/* ==========================================================================
   KuduDoc Design Tokens
   Blue leads. Orange acts. White does the work in between.
   ========================================================================== */

:root{

  /* ---- Brand blue ramp (base #2450E0) ---- */
  --blue-50:  #EEF2FE;
  --blue-100: #DCE6FD;
  --blue-200: #B9CDFB;
  --blue-300: #8FADF7;
  --blue-400: #5F87F0;
  --blue-500: #3868E5;
  --blue-600: #2450E0;   /* primary */
  --blue-700: #1B3EB8;   /* hover/pressed on white */
  --blue-800: #10256B;   /* deep — reserved, minimal use */
  --blue-900: #0B1A4E;   /* deepest — reserved, minimal use (2026-08-03: dropped from bands/footer/hero — reads as "the dark navy look", direction is brighter now) */

  /* ---- Hot orange ramp (base #F2542D) ---- */
  --orange-50:  #FFF1EC;
  --orange-100: #FFDED2;
  --orange-200: #FFBBA3;
  --orange-300: #FF9973;
  --orange-400: #FF7A45; /* orange on dark surfaces */
  --orange-500: #F2542D; /* action — buttons, the tall logo bar */
  --orange-600: #D6431F; /* hover/pressed on white */
  --orange-700: #B23417;

  /* ---- Ink (blue-leaning neutral, base #16233A) ---- */
  --ink-900: #16233A; /* body copy — never set body copy in brand blue */
  --ink-700: #3B4A63; /* secondary text */
  --ink-500: #67748C; /* tertiary / placeholder text */
  --ink-300: #A6B0C0; /* disabled text, quiet icons */
  --ink-200: #CBD3DF; /* stronger borders, dividers-on-tint */
  --ink-100: #E4E8EF; /* hairline borders on white */
  --ink-50:  #F7F9FC; /* resting surface tint */
  --white:   #FFFFFF;

  /* ---- Semantic (fresh — never the retired brand red) ----
     Bright 500s to match the energy of the brand blue/orange — pair with
     ink-900 text when used as a solid fill (they're too light for white text).
     Danger is the one exception: it sits dark enough to pair with white. */
  --success-500: #22C55E; /* solid fills, dots, icons — pair with ink-900 text */
  --success-700: #0F7A3D; /* text on success-50 — AA-safe */
  --success-50:  #E8FBF0;
  --danger-500:  #DC2626; /* solid fills, dots, icons — pairs with white text */
  --danger-700:  #A5241F; /* text on danger-50 — AA-safe */
  --danger-50:   #FDECEC;
  --warning-500: #F59E0B; /* solid fills, dots, icons — pair with ink-900 text */
  --warning-700: #7A4E00; /* text on warning-50 — AA-safe */
  --warning-50:  #FFF6E5;

  /* ---- Surface & text roles ---- */
  --surface-page:   var(--white);
  --surface-sunken: var(--ink-50);
  --surface-tint-blue: var(--blue-50);
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-tertiary:  var(--ink-500);
  --text-on-dark:      #FFFFFF;
  --text-on-dark-soft: #B9C4E6;

  /* ---- Gradients ----
     Brighter direction (2026-08-03): stays in the blue-500→700 band, never
     fading to the near-black 800/900 — the whole hero should read as vivid
     brand blue, not dark navy. Origin sits upper-right so the brightest glow
     lands behind the product visual, not behind the body copy. */
  --gradient-hero: radial-gradient(135% 150% at 68% -25%, var(--blue-500) 0%, var(--blue-600) 48%, var(--blue-700) 100%);
  --gradient-hero-flip: radial-gradient(135% 160% at 35% 125%, var(--blue-500) 0%, var(--blue-600) 48%, var(--blue-700) 100%);

  /* ---- Fonts ---- */
  --font-display: 'Montserrat', 'Inter', Helvetica, Arial, sans-serif;
  --font-sans:    'Inter', Helvetica, Arial, sans-serif;
  --font-hand:    'Caveat', cursive;

  /* ---- Type scale (fluid where it matters) ---- */
  --text-display: clamp(2.75rem, 2.1rem + 2.6vw, 4.25rem);   /* hero H1, ~44–68px */
  --text-h1:      clamp(2.1rem, 1.8rem + 1.4vw, 3rem);        /* ~34–48px */
  --text-h2:      clamp(1.75rem, 1.55rem + 0.9vw, 2.25rem);   /* ~28–36px */
  --text-h3:      1.5rem;      /* 24px */
  --text-h4:      1.25rem;     /* 20px */
  --text-body-lg: 1.125rem;    /* 18px */
  --text-body:    1rem;        /* 16px */
  --text-small:   0.875rem;    /* 14px */
  --text-micro:   0.8125rem;   /* 13px */
  --text-eyebrow: 0.75rem;     /* 12px */

  --tracking-display: -0.02em;
  --tracking-h: -0.015em;
  --tracking-eyebrow: 0.08em;
  --tracking-wordmark: -0.03em;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 5rem;    /* 80 */
  --space-11: 6rem;    /* 96 */
  --space-12: 8rem;    /* 128 */

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--ink-100);
  --border-hairline-strong: 1px solid var(--ink-200);
  --border-hairline-on-dark: 1px solid rgba(255,255,255,0.16);

  /* ---- Shadow (used sparingly — hairline borders do most separation) ---- */
  --shadow-sm: 0 1px 2px rgba(11,26,78,0.06), 0 1px 1px rgba(11,26,78,0.04);
  --shadow-md: 0 12px 24px -8px rgba(16,37,107,0.18);
  --shadow-lg: 0 32px 64px -16px rgba(11,26,78,0.28);
  --shadow-focus: 0 0 0 4px rgba(36,80,224,0.28);
  --shadow-focus-on-dark: 0 0 0 4px rgba(255,255,255,0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-signature: 1100ms;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 4rem);
  --nav-height: 72px;
}

@media (prefers-reduced-motion: reduce){
  :root{
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-signature: 0ms;
  }
}