/* ================================================================
   TrueTest Labs — Design Tokens
   Unified navy + gold brand identity. Changes here cascade site-wide.
   ================================================================ */

:root {
  /* -------- Brand: TrueTest Labs Gray (matches logo) -------- */
  /* NOTE: variable names are legacy "navy/gold" — values below are the */
  /* real TrueTest brand gray + green. Rename tokens site-wide later. */
  --brand-navy-900: #1F2328;   /* Hero bg, footer, H1 — deepest gray */
  --brand-navy-800: #2A2F36;   /* Elevated surfaces */
  --brand-navy-700: #3A3F47;   /* H2, button hover, logo-match gray */
  --brand-navy-500: #5E656F;   /* Links, accents */
  --brand-navy-100: #EEF0F3;   /* Tint backgrounds */

  /* -------- Brand: TrueTest Labs Green (matches logo) -------- */
  --brand-gold-700: #256F1D;   /* Green text on white (AA) */
  --brand-gold-600: #2F8327;   /* Primary CTAs — white text passes WCAG AA (4.78:1); was #2F8927 (4.44, failed) */
  --brand-gold-500: #5FB950;   /* Logo-exact green — accents, icons, borders */
  --brand-gold-400: #7CC46D;   /* Hover green, trust marks */
  --brand-gold-100: #EAF7E5;   /* Green tint backgrounds */

  /* -------- Ink (text) -------- */
  --ink-900: #14181F;
  --ink-700: #2A313D;
  --ink-600: #4A5363;
  --ink-500: #6A7384;
  --ink-400: #8A93A3;
  --ink-300: #B8C0CE;

  /* -------- Surfaces -------- */
  --paper: #FFFFFF;
  --paper-tint: #F6F8FB;
  --paper-tint-2: #EEF2F7;
  --line: #E3E7EE;
  --line-strong: #CBD3DF;

  /* -------- State -------- */
  --danger: #B3261E;
  --danger-bg: #FDECEA;
  --danger-border: #F5C2C0;
  --success: #1F7A3A;
  --success-bg: #E6F4EA;
  --warning: #8A6100;
  --warning-bg: #FFF4D6;

  /* -------- Typography -------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale (clamp: min, ideal, max) */
  --fs-display: clamp(2.5rem, 5vw + 1rem, 3.75rem);  /* 40 → 60 */
  --fs-h1: clamp(2rem, 3vw + 1rem, 2.75rem);          /* 32 → 44 */
  --fs-h2: clamp(1.5rem, 2vw + 0.8rem, 2.125rem);     /* 24 → 34 */
  --fs-h3: clamp(1.25rem, 1vw + 0.8rem, 1.5rem);      /* 20 → 24 */
  --fs-h4: 1.125rem;                                   /* 18 */
  --fs-body: 1.0625rem;                                /* 17 */
  --fs-body-sm: 0.9375rem;                             /* 15 */
  --fs-small: 0.8125rem;                               /* 13 */
  --fs-micro: 0.75rem;                                 /* 12 */
  --fs-eyebrow: 0.75rem;                               /* 12 uppercased */

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-eyebrow: 0.12em;

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

  --section-y: clamp(3.5rem, 6vw, 6rem);  /* 56 → 96 */

  /* -------- Layout -------- */
  --container: 1200px;
  --container-narrow: 760px;
  --container-prose: 680px;

  /* -------- Radii -------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* -------- Shadows (tinted with brand gray) -------- */
  --shadow-xs: 0 1px 2px rgba(31, 35, 40, 0.04);
  --shadow-sm: 0 1px 3px rgba(31, 35, 40, 0.06), 0 1px 2px rgba(31, 35, 40, 0.04);
  --shadow: 0 2px 6px rgba(31, 35, 40, 0.06), 0 4px 12px rgba(31, 35, 40, 0.05);
  --shadow-md: 0 4px 10px rgba(31, 35, 40, 0.08), 0 8px 24px rgba(31, 35, 40, 0.06);
  --shadow-lg: 0 10px 32px rgba(31, 35, 40, 0.12), 0 4px 12px rgba(31, 35, 40, 0.06);
  --shadow-gold: 0 2px 8px rgba(47, 137, 39, 0.28);  /* green CTA glow */
  --shadow-focus: 0 0 0 3px rgba(95, 185, 80, 0.35);  /* green focus ring */

  /* -------- Motion -------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 360ms;

  /* -------- Z-index scale -------- */
  --z-base: 1;
  --z-nav: 100;
  --z-dropdown: 200;
  --z-overlay: 500;
  --z-modal: 600;
  --z-chat: 700;
  --z-toast: 800;

  /* -------- Breakpoints (for reference; media queries use px) -------- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

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