/* ==========================================================================
   Vector Algorithmics — Help Center theme overrides (MINIMAL)
   --------------------------------------------------------------------------
   Goal: align typography and color palette with the new dashboard, while
   leaving Zoho's stock layout, positioning, sticky headers, search bar
   behaviour, sidebar widths and card structure UNTOUCHED.

   What this file changes:
     1. Loads Inter from Google Fonts.
     2. Applies Inter as the global font family.
     3. Lays the ink (greyscale) + #ff6a00 accent palette down as CSS
        variables, then nudges Zoho's body text, headings, links and
        primary buttons to use them.

   What this file deliberately does NOT change:
     - No positioning, sticky/fixed elements, or sidebar widths.
     - No card border-radius, shadow, or hover behaviour.
     - No search-input restyling or repositioning.
     - No header layout changes.

   Heuristic: if a selector here only sets `color`, `background-color`,
   `font-family`, `font-weight`, `letter-spacing` or `border-color`, it
   stays. Anything touching `position`, `top`, `transform`, `width`,
   `display`, `flex`, `grid`, `padding`, `margin` was removed.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --va-ink-900: #0a0a0a;
  --va-ink-800: #171717;
  --va-ink-700: #262626;
  --va-ink-600: #404040;
  --va-ink-500: #737373;
  --va-ink-400: #a3a3a3;
  --va-ink-300: #d4d4d4;
  --va-ink-200: #e5e5e5;
  --va-ink-100: #f5f5f5;
  --va-ink-50:  #fafafa;

  --va-accent:     #ff6a00;
  --va-accent-600: #e95f00;
}

/* ----- 1. Global typography ----- */
html, body,
.zd_v1-portal,
.HelpCenterContainer__container,
.kb-portal,
[class*="HelpCenter__"],
[class*="kb-"] {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--va-ink-800);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  color: var(--va-ink-900);
  letter-spacing: -0.01em;
  font-weight: 600;
}

p, li, label, input, textarea, select, button, a, span, div {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

/* ----- 2. Link color ----- */
a {
  color: var(--va-ink-900);
}
a:hover {
  color: var(--va-accent);
}

/* ----- 3. Brand accents on common UI bits ----- */
/* Primary buttons → ink-900 background, white text */
.zd_v1-btn-primary,
.btn-primary,
.zdo-btn-primary,
button.primary,
[class*="primary-button" i] {
  background-color: var(--va-ink-900) !important;
  border-color: var(--va-ink-900) !important;
  color: #ffffff !important;
}
.zd_v1-btn-primary:hover,
.btn-primary:hover,
.zdo-btn-primary:hover,
button.primary:hover,
[class*="primary-button" i]:hover {
  background-color: var(--va-ink-800) !important;
  border-color: var(--va-ink-800) !important;
}

/* Default (secondary) buttons → white background, ink-300 border, ink-900 text */
.zd_v1-btn-default,
.btn-default,
.zdo-btn-secondary,
[class*="secondary-button" i] {
  background-color: #ffffff !important;
  border-color: var(--va-ink-300) !important;
  color: var(--va-ink-900) !important;
}

/* Subtle borders → ink-200 instead of Zoho's default light blue/grey */
hr,
table, table th, table td {
  border-color: var(--va-ink-200) !important;
}

/* Selected / active accents → orange */
.active, .is-active,
[class*="selected"]:not(input):not(textarea) {
  border-color: var(--va-accent) !important;
}

/* ----- 4. Form inputs — recolor only, no resizing or repositioning ----- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
select {
  color: var(--va-ink-900);
  border-color: var(--va-ink-300);
  background-color: #ffffff;
}
input[type="text"]::placeholder,
input[type="search"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
  color: var(--va-ink-400);
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--va-ink-900);
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, .08);
}

/* ----- 5. Article body — typographic comfort only ----- */
.kb-article-content,
.kb-article-body,
[class*="Article__"] {
  color: var(--va-ink-700);
}
.kb-article-content h1,
.kb-article-content h2,
.kb-article-content h3,
.kb-article-body h1,
.kb-article-body h2,
.kb-article-body h3 {
  color: var(--va-ink-900);
}
.kb-article-content a,
.kb-article-body a {
  color: var(--va-ink-900);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kb-article-content a:hover,
.kb-article-body a:hover {
  color: var(--va-accent);
}

/* Inline code & blockquote — color only */
.kb-article-content code,
.kb-article-body code,
code {
  background-color: var(--va-ink-100);
  color: var(--va-ink-800);
}
.kb-article-content blockquote,
.kb-article-body blockquote,
blockquote {
  border-left-color: var(--va-ink-300);
  color: var(--va-ink-700);
}