/* ==========================================================================
   tokens.css — design tokens only. No selectors that paint.
   Loaded first, on every page.

   Unit system (see agency/development.md):
     - Root is 1rem = 10px (html { font-size: 10px }, set in base.css), so rem
       math is trivial: 1.6rem = 16px. The root is then scaled by the viewport
       at two bands, so authoring everything in rem scales the whole layout from
       one lever — no per-element media queries for sizing.
     - No px for sizing. The only px that survive are hairline borders (a 0.1rem
       line vanishes when the root shrinks) and tap-target floors (WCAG needs 44
       real px); both are carried inline where used, with a note.
     - Text containers pad in em, so padding tracks the element's own font-size.
   ========================================================================== */

:root {
    /* ---- Brand ------------------------------------------------------------
       Blue and orange are the existing brand identity and are preserved.
       Each token below states the contrast ratio it is verified at, so future
       edits can't silently break AA. Text tokens are darker than fill tokens
       because #0070F3 as text on white is 4.55:1 — passing, but with no margin.
       ---------------------------------------------------------------------- */
    --blue-fill: #0070F3;         /* white text on this: 4.55:1 AA */
    --blue-fill-hover: #0057C2;   /* white text on this: 6.68:1 */
    --blue-text: #0057C2;         /* on white: 6.68:1 · on --surface: 6.29:1 */
    --blue-wash: #EAF2FE;         /* tinted surface, never carries text alone */

    /* Emergency orange. The brand's #FF6B00 cannot carry white text (2.86:1),
       so the *fill* is deepened. #FF6B00 survives as a decorative accent only. */
    --emergency: #C2410C;         /* white text on this: 5.18:1 AA */
    --emergency-hover: #9A3412;   /* white text on this: 7.31:1 */
    --accent-orange: #FF6B00;     /* rules, icon fills. NEVER behind white text. */
    --star: #F59E0B;              /* review stars; decorative */

    /* ---- Ink & surface ---------------------------------------------------- */
    --ink: #0F172A;               /* on --surface: 17.10:1 */
    --ink-body: #334155;          /* on --surface:  9.74:1 */
    --ink-muted: #475569;         /* on --surface:  7.13:1 — lowest text token */
    --ink-placeholder: #64748B;   /* on white: 4.8:1 — placeholders must clear AA */
    --ink-on-dark: #FFFFFF;

    --surface: #F6F8FC;           /* page */
    --surface-raised: #FFFFFF;    /* cards, form fields */
    --surface-sunken: #EEF3FA;    /* alternating bands */
    --surface-ink: #0F172A;       /* dark band */

    --border: #D8E0EC;            /* decorative dividers, non-text */
    --border-strong: #9FB0C6;     /* input borders: 3.1:1 on white, AA non-text */

    /* ---- Dark surfaces -----------------------------------------------------
       The utility bar, contact band, and footer are dark. Without these the
       same seven slate values get retyped as raw hex in every component.
       Ratios below are measured against --surface-ink.
       ---------------------------------------------------------------------- */
    --ink-raised: #1E293B;        /* cards on a dark band */
    --ink-border: #334155;
    --ink-border-strong: #475569;
    --on-ink: #E2E8F0;            /* 12.02:1 — body text on dark */
    --on-ink-muted: #94A3B8;      /* 6.96:1  — meta text on dark */
    --on-ink-soft: #CBD5E1;       /*  9.6:1  — secondary text on dark */
    --blue-on-ink: #60A5FA;       /* links/icons on dark; never on white */
    --blue-on-scrim: #7FB8FF;     /* 6.6:1 on the hero scrim */

    /* Hero scrim base, as channels so alpha ramps have one source of truth. */
    --scrim-rgb: 2 6 23;

    /* ---- Feedback ---------------------------------------------------------- */
    --success-surface: #ECFDF5;
    --success-border: #6EE7B7;
    --success-ink: #065F46;
    --danger-surface: #FEF2F2;
    --danger-border: #FCA5A5;
    --danger-ink: #991B1B;

    /* ---- Type -------------------------------------------------------------
       Montserrat is the logo and stays on headings (identity preservation).
       Source Sans 3 is humanist — a deliberate contrast axis against
       Montserrat's geometry — and carries all long-form prose.
       ---------------------------------------------------------------------- */
    --font-display: 'Montserrat', system-ui, sans-serif;
    --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;

    /* Heading scale — two-layer clamp. `--fs-N-c` holds the fluid clamp;
       `--fs-N` consumes it and carries a plain rem fallback for engines without
       clamp() support. Headings reference `--fs-N`, never a raw clamp. The vw
       term stays constant while the rem anchors ride the root scaling, so a
       heading is fluid within a band and steps with the band. */
    --fs-1-c: clamp(4.4rem, 2.96rem + 3.8vw, 7.2rem);   /* h1, ceiling 72px */
    --fs-1: var(--fs-1-c, 5.6rem);
    --fs-2-c: clamp(3.6rem, 2.56rem + 2.6vw, 5.2rem);   /* h2 */
    --fs-2: var(--fs-2-c, 4rem);
    --fs-3-c: clamp(2.4rem, 2.1rem + 0.9vw, 2.8rem);    /* h3 */
    --fs-3: var(--fs-3-c, 2.6rem);
    --fs-4-c: clamp(2rem, 1.85rem + 0.5vw, 2.3rem);     /* h4 */
    --fs-4: var(--fs-4-c, 2.1rem);
    --fs-5-c: clamp(1.8rem, 1.7rem + 0.3vw, 2rem);      /* h5 */
    --fs-5: var(--fs-5-c, 1.9rem);
    --fs-6-c: clamp(1.6rem, 1.55rem + 0.2vw, 1.8rem);   /* h6 */
    --fs-6: var(--fs-6-c, 1.7rem);

    /* Body / UI scale. Fixed rem; scales with the root, not the viewport. */
    --text-xs: 1.3rem;    /* 13px — legal, meta */
    --text-sm: 1.5rem;    /* 15px — labels, captions */
    --text-base: 1.7rem;  /* 17px — body */
    --text-lg: 2.1rem;    /* 21px — lead paragraph */
    --text-xl: 2.6rem;    /* 26px — standalone large UI text */

    /* The wordmark sits outside the reading scale on purpose. */
    --text-logo: 2.4rem;
    --text-logo-word: 1.1rem;

    --leading-tight: 1.08;   /* display */
    --leading-snug: 1.25;    /* headings */
    --leading-normal: 1.65;  /* prose */

    --tracking-display: -0.025em;  /* floor is -0.04em; never go tighter */
    --tracking-label: 0.06em;

    --measure: 68ch;   /* prose line-length cap */

    /* ---- Space ------------------------------------------------------------ */
    --space-1: 0.4rem;   /* 4px */
    --space-2: 0.8rem;   /* 8px */
    --space-3: 1.2rem;   /* 12px */
    --space-4: 1.6rem;   /* 16px */
    --space-5: 2.4rem;   /* 24px */
    --space-6: 3.2rem;   /* 32px */
    --space-7: 4.8rem;   /* 48px */
    --space-8: 6.4rem;   /* 64px */
    --space-9: 9.6rem;   /* 96px */

    /* Section owns vertical rhythm; the container owns horizontal padding.
       --gutter floors at 1.6rem per the house rule. */
    --section-y: clamp(5.6rem, 3.2rem + 6vw, 10.4rem);
    --gutter: clamp(1.6rem, 0.8rem + 2.5vw, 3.2rem);
    --container-max: 120rem;   /* 1200px at base */

    /* ---- Radius, shadow --------------------------------------------------- */
    --radius-sm: 0.6rem;
    --radius: 1rem;
    --radius-lg: 1.6rem;
    --radius-pill: 99rem;   /* always exceeds any pill height */

    --shadow-sm: 0 0.1rem 0.2rem rgba(15, 23, 42, 0.06);
    --shadow: 0 0.4rem 1.2rem rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 1.2rem 3.2rem rgba(15, 23, 42, 0.12);

    /* ---- Motion -----------------------------------------------------------
       Entering and exiting use ease-out: it starts fast, so the interface
       answers before the user finishes looking. Never ease-in on UI; it
       delays the first frame, the exact moment being watched.
       No bounce, no elastic. This brand is dependable, not playful.
       ---------------------------------------------------------------------- */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* enter, exit, hover */
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */

    --dur-press: 140ms;   /* button press feedback */
    --dur-fast: 120ms;
    --dur: 200ms;         /* hovers, dropdowns */
    --dur-slow: 400ms;    /* drawers, scroll reveals */
    --stagger: 60ms;      /* delay between siblings entering */

    /* ---- Z-index scale ----------------------------------------------------
       Semantic, ordered. No arbitrary 999 / 9999 anywhere.
       ---------------------------------------------------------------------- */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-dropdown: 200;
    --z-fab: 300;
    --z-backdrop: 400;
    --z-modal: 500;
}