/* ============================================================================
   PoliMoney — Design Tokens v2  (tokens.css)
   ----------------------------------------------------------------------------
   A REAL, fully-used token system. Every custom property below is referenced
   either by another token (var()) or by the companion swatches.html — no dead
   tokens. Values are WCAG-validated; see contrast-report.json (0 failing
   allowed pairs, body >=4.5 / large >=3.0).

   FROZEN brand anchors (do NOT change) are baked in as scale rungs:
     bg        #001B33  -> --navy-900        (deep navy page field)
     text      #F0F8FF  -> --neutral-50      (AliceBlue body text)
     primary   #1A94FF  -> --primary-500     (trust blue)
     accent    #FF9A00  -> --accent-500      (orange — ACCENT ONLY, <=5% surface)
     logo teal #5ECED2  -> --teal-400        (focus + secondary)
   Fonts are FROZEN verbatim: Manrope (body/UI) + Unbounded (display).

   THEMING MODEL
     :root                       = navy-dominant (DARK) semantics — the default.
     [data-surface="light"] /
     .surface-light              = light-dominant semantics — same token NAMES,
                                    remapped values. A section carrying this
                                    attribute flips to a light surface while the
                                    component CSS keeps referencing --bg / --text-*
                                    / --surface-* unchanged. Both directions ship.
   ============================================================================ */

:root {
  /* ==========================================================================
     1. COLOR SCALES — 11 steps (50 -> 950). Perceptually monotonic in lightness.
        Hue held ~207 for navy/blue, ~36 for orange. Neutral is HUE-SHIFTED
        toward navy (cool), never pure gray.
     ========================================================================== */

  /* Navy — surface / structure backbone (hue ~207). Only referenced rungs kept. */
  --navy-50:  #EAF1F7;
  --navy-100: #D0E0EC;
  --navy-300: #749FBD;
  --navy-400: #48739B;
  --navy-500: #295478;
  --navy-600: #153E5E;
  --navy-700: #0A2E4A;
  --navy-900: #001B33;  /* FROZEN brand bg */
  --navy-950: #00101F;

  /* Neutral — navy-shifted gray (cool tint, NOT pure gray). Text / borders. */
  --neutral-50:  #F0F8FF;  /* FROZEN brand text */
  --neutral-200: #C4D2E0;
  --neutral-300: #A7B9CB;
  --neutral-500: #5F7286;
  --neutral-600: #495B6D;
  --neutral-700: #374857;

  /* Primary — trust blue (hue ~207) */
  --primary-200: #92C8FF;
  --primary-400: #38A0FF;
  --primary-500: #1A94FF;  /* FROZEN brand primary */
  --primary-600: #0E7AE6;
  --primary-700: #0C62BC;
  --primary-800: #0D4E93;

  /* Accent — orange (hue ~36). ACCENT ONLY: fills / markers, never body text on light. */
  --accent-300: #FFB74D;  /* accent-as-text: DARK surfaces + large only */
  --accent-400: #FFA524;
  --accent-500: #FF9A00;  /* FROZEN brand accent */
  --accent-600: #E07F00;

  /* Teal — logo / secondary / focus (compact set; only used rungs kept) */
  --teal-300: #7EDDE1;
  --teal-400: #5ECED2;  /* FROZEN logo teal */
  --teal-700: #257E83;

  /* ==========================================================================
     2. SEMANTIC SURFACES — DARK (navy-dominant). Ladder UP from bg.
        sunken < bg < surface-1 < surface-2 < surface-3, plus a raised plane.
     ========================================================================== */
  /* Surfaces step UP in real, PERCEPTIBLE increments off the frozen navy field.
     Values are decoupled from the palette rungs on purpose so cards/panels read
     as distinctly lifted planes (not navy-on-navy). Order (lightness):
     sunken < bg < surface-1 < surface-2 < surface-raised < surface-3. */
  --bg:              var(--navy-900);   /* #001B33 FROZEN page field                  */
  --surface-sunken:  var(--navy-950);   /* #00101F recessed wells, footer (< bg)      */
  --surface-1:       #0C3252;           /* resting cards / tint bands — clearly > bg   */
  --surface-2:       #14456B;           /* nested / inputs / elevated cards            */
  --surface-3:       #205C8A;           /* highest static tint (table head)            */
  --surface-raised:  #184A73;           /* FLOATING panel — lifted focal plane (+glow) */

  --border-subtle:    var(--navy-600);           /* visible hairline on cards          */
  --border-strong:    var(--navy-400);           /* emphasized edges                   */
  --border-highlight: rgba(240, 248, 255, 0.16); /* lit top edge — brighter "lit from above" */

  /* ==========================================================================
     3. TEXT ROLES — DARK. All validated >=4.5 on bg/surface-1/2/3 (see report).
     ========================================================================== */
  --text-primary:    var(--neutral-50);   /* 16.25 on bg / 12.5 on surface-1 */
  --text-secondary:  var(--neutral-200);  /* 11.33 on bg / 8.6 on surface-1  */
  --text-muted:      var(--neutral-300);  /*  8.67 on bg / 6.6 on surface-1   */
  --text-on-accent:  var(--navy-950);     /* ink on primary/accent fills */
  --text-link:       var(--primary-200);  /* lighter blue: >=4.5 AA on lifted surface-2/raised cards too */
  --text-accent:     var(--accent-300);   /* 10.07 on bg — DARK + large only */

  /* ==========================================================================
     4. INTERACTIVE STATES — rest / hover / active / focus / disabled.
        Dark navy ink sits on bright fills, so fills BRIGHTEN on hover and only
        mildly DEEPEN on active — this keeps ink contrast >=4.5 in every state
        (a fully-dark active would drop ink to ~3.2 and fail).
        These fills are GLOBAL (identical in both scopes); ink is --text-on-accent.
     ========================================================================== */
  --primary-fill:         var(--primary-500);  /* rest   — ink 6.15 */
  --primary-fill-hover:   var(--primary-400);  /* hover  — brighter */
  --primary-fill-active:  var(--primary-600);  /* active — ink 4.90 */

  --accent-fill:          var(--accent-500);   /* rest   — ink 9.03 */
  --accent-fill-hover:    var(--accent-400);   /* hover  — brighter */
  --accent-fill-active:   var(--accent-600);   /* active — ink 6.83 */

  --ghost-fill:         transparent;
  --ghost-fill-hover:   rgba(240, 248, 255, 0.08);
  --ghost-fill-active:  rgba(240, 248, 255, 0.14);
  --ghost-border:       var(--border-strong);
  --ghost-ink:          var(--text-primary);

  --action-disabled-fill: var(--neutral-700);
  --action-disabled-ink:  var(--neutral-500);

  /* ==========================================================================
     5. FOCUS RING — highly visible, two-part (surface gap + colored halo).
        --focus-color adapts per scope; ring references --bg so the gap always
        matches the field it sits on.
     ========================================================================== */
  --focus-color:        var(--teal-400);          /* 9.33 on bg */
  --focus-ring-width:   3px;
  --focus-ring:         0 0 0 2px var(--bg), 0 0 0 5px var(--focus-color);
  --focus-ring-primary: 0 0 0 2px var(--bg), 0 0 0 5px var(--primary-fill);
  --focus-ring-accent:  0 0 0 2px var(--bg), 0 0 0 5px var(--accent-fill);

  /* ==========================================================================
     6. ELEVATION — navy-tinted shadows (rgba of #001B33/#00101F), never black.
        Dual-layer (ambient + key) scaling with height; focal-only glow rims.
     ========================================================================== */
  --shadow-1: 0 1px 2px rgba(0, 16, 31, 0.55);
  --shadow-2: 0 6px 18px -4px rgba(0, 16, 31, 0.62), 0 2px 6px rgba(0, 16, 31, 0.45);
  --shadow-3: 0 18px 40px -10px rgba(0, 16, 31, 0.72), 0 6px 14px rgba(0, 16, 31, 0.50);
  --shadow-4: 0 40px 90px -18px rgba(0, 16, 31, 0.88), 0 16px 34px rgba(0, 16, 31, 0.58);

  --glow-primary: 0 0 0 1px rgba(56, 160, 255, 0.55), 0 14px 48px -6px rgba(26, 148, 255, 0.55);
  --glow-accent:  0 0 0 1px rgba(255, 154, 0, 0.38), 0 10px 30px -8px rgba(255, 154, 0, 0.40);

  /* ==========================================================================
     7. RADII
     ========================================================================== */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;   /* default control radius */
  --radius-lg:   18px;   /* cards        */
  --radius-xl:   24px;   /* hero panels  */
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ==========================================================================
     8. SPACING — 4px base rhythm
     ========================================================================== */
  --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 */
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* ==========================================================================
     9. TYPOGRAPHY — font families FROZEN verbatim; scale refined.
     ========================================================================== */
  --font-sans:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Unbounded", var(--font-sans);
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --fs-2xs: 0.75rem;                                       /* 12 caption */
  --fs-xs:  clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);  /* 13 -> 14 */
  --fs-sm:  clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);  /* 14 -> 15 */
  --fs-base: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);     /* 16 -> 17 */
  --fs-lg:  clamp(1.125rem, 1.08rem + 0.25vw, 1.1875rem);  /* 18 -> 19 */
  --fs-xl:  clamp(1.25rem, 1.18rem + 0.4vw, 1.375rem);     /* 20 -> 22 */
  --fs-2xl: clamp(1.5rem, 1.38rem + 0.6vw, 1.75rem);       /* 24 -> 28 */
  --fs-3xl: clamp(1.75rem, 1.55rem + 1vw, 2.25rem);        /* 28 -> 36 */
  --fs-4xl: clamp(1.875rem, 1.45rem + 2vw, 3rem);          /* 30 -> 48 */
  --fs-5xl: clamp(2.125rem, 1.5rem + 3vw, 3.75rem);        /* 34 -> 60 hero */

  --lh-tight:   1.08;  /* display */
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --tracking-tight: -0.02em;  /* display */
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.12em;   /* eyebrows */

  /* ==========================================================================
     10. MOTION — 150-300ms micro-interactions; ease-out enter / ease-in exit.
     ========================================================================== */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* enter */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* ambient float loop */
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);     /* premium */
}

/* ============================================================================
   LIGHT-DOMINANT SCOPE — same semantic NAMES, remapped values.
   Apply to any section: <section data-surface="light"> … </section>
   Surfaces, text, borders, overlay, focus-color, disabled + ghost tints flip.
   The bright PRIMARY/ACCENT fills stay identical (dark ink reads on both).
   Orange is NEVER text here: --text-accent resolves to blue emphasis.
   ============================================================================ */
[data-surface="light"],
.surface-light {
  --bg:              var(--navy-50);
  --surface-sunken:  var(--navy-100);
  --surface-1:       #FFFFFF;
  --surface-2:       var(--navy-50);
  --surface-3:       var(--navy-100);
  --surface-raised:  #FFFFFF;

  --border-subtle:    var(--navy-100);
  --border-strong:    var(--navy-300);
  --border-highlight: rgba(255, 255, 255, 0.70);

  --text-primary:   var(--navy-900);    /* 15.29 on light bg */
  --text-secondary: var(--navy-700);    /* 12.26 on light bg */
  --text-muted:     var(--navy-500);    /*  7.00 on light bg */
  --text-on-accent: var(--navy-950);    /* ink unchanged      */
  --text-link:      var(--primary-800); /*  7.29 on light bg */
  --text-accent:    var(--primary-800); /* orange disabled as text on light -> blue */

  --ghost-fill-hover:  rgba(0, 27, 51, 0.06);
  --ghost-fill-active: rgba(0, 27, 51, 0.10);

  --action-disabled-fill: var(--neutral-200);
  --action-disabled-ink:  var(--neutral-500);

  --focus-color: var(--teal-700);       /* 4.78 on white — visible on light */
}

/* Accessibility: honor reduced-motion by neutralizing the motion durations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}

/* ============================================================================
   SITE INFRASTRUCTURE — additive to the visual system above.
   ----------------------------------------------------------------------------
   Non-visual scaffolding the multi-page site + main.js rely on (z-index scale,
   container widths, extra spacing / motion rungs) and STATUS colors
   (success / warning / error) used by the comparison table, form validation and
   the chat widget. These live in tokens.css on purpose so that NO color is ever
   hardcoded in component CSS. They do not alter any of the visual tokens above.
   ============================================================================ */
:root {
  /* --- Status colors (navy ink on solid fills; *-text rungs are AA on dark bg) */
  --color-success:      #34D399;   /*  9.07 on bg — success TEXT / mark */
  --color-success-ink:  var(--navy-950);
  --color-warning:      #FBBF24;   /* 10.44 on bg */
  --color-error:        #FB7185;   /*  6.48 on bg — error TEXT / mark   */
  --color-error-solid:  #E11D48;   /* solid danger tint base            */

  /* --- Extra motion / tracking rungs used by reveal + logo */
  --dur-slower:      480ms;
  --tracking-normal: 0;

  /* --- Section rhythm (compact) */
  --section-y-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* --- Container widths + gutter (unchanged geometry — restyle only) */
  --container:       1440px;
  --container-wide:  1440px;
  --container-prose: 72ch;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

  /* --- Teal glow rim (companion to --glow-primary / --glow-accent) */
  --glow-teal: 0 0 0 1px rgba(94, 206, 210, 0.32), 0 8px 26px -8px rgba(94, 206, 210, 0.30);

  /* --- Z-index scale (only referenced rungs kept) */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  20;   /* sticky header */
  --z-max:     9999; /* mobile menu, skip-link */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-slower: 1ms; }
}