/* ============================================================
   DRIVING CANADA — DESIGN TOKENS
   Single source of truth for the design system.

   Authority: docs/motion-interaction-spec.md §3. Where that
   document and any other guidance disagree, it wins.

   Layout grammar: flat poster-style solid-colour blocks, hard
   edges, generous margins. No gradients, no glows, no noir
   atmospherics anywhere.

   Every foreground/background pairing below is annotated with its
   measured contrast ratio and WCAG AA verdict. test-contrast.js
   parses these values out of this file, so it cannot drift.
   ============================================================ */

:root {
    /* ---- Shell ------------------------------------------------
       Pure black shell with near-white primary text.
       #F5F5F2 on #0A0A0A = 18.13:1 — AA/AAA (normal + large)
    */
    --shell:            #0A0A0A;
    --ink:              #F5F5F2;

    /* Muted body text on the shell.
       #B9B9B4 on #0A0A0A = 10.05:1 — AA/AAA */
    --ink-muted:        #B9B9B4;

    /* Dimmest supporting text, and the dashed segment of the route
       line. Still comfortably above AA.
       #8C8C88 on #0A0A0A = 5.87:1 — AA (normal text) */
    --ink-dim:          #8C8C88;

    /* ---- Accent -----------------------------------------------
       THE accent. Confirmed with Haroon on 29 August 2026: the
       duller lime sampled from the homepage mock, not the #DFFF00
       written in the brief.

       #B9C601 on #0A0A0A = 10.51:1 — AA/AAA (accent text on shell)
       #0A0A0A on #B9C601 = 10.51:1 — AA/AAA (black text on accent fill)

       THE LIME RULE. #B9C601 on white is 1.14:1 and fails
       everything. There is no dark lime that still reads as lime,
       so there is deliberately no --accent-deep in this system.
       Lime never appears on a light surface: on light blocks,
       --ink on --surface-light carries the text and lime does not
       appear at all.

       LIME MEANS LIVE. It is the only colour the interface uses to
       signal state — active, current, playing, selected, focused.
       Available-but-not-active is --ink; present-but-unavailable is
       --ink-dim. Never colour alone: every lime state is also
       carried by a fill, an underline, a position, or a label.
    */
    --accent:           #B9C601;

    /* ---- Light surface ----------------------------------------
       Used sparingly, for blocks that invert the shell.
       #0A0A0A on #F5F5F2 = 18.13:1 — AA/AAA */
    --surface-light:    #F5F5F2;

    /* ---- Structure --------------------------------------------
       Hard edges only: 0 radius everywhere, by design. */
    --rule:             #2A2A28;
    /* Border/edge colour, non-text. #666663 on #0A0A0A = 3.44:1 — AA (UI) */
    --rule-strong:      #666663;

    /* ---- Map roads --------------------------------------------
       The street network on the GTA map, warmed toward the accent so
       the map reads as ONE palette rather than a grey map with lime
       laid on it. Per Haroon's mock, September 2026.

       These are the accent's hue at a fraction of its intensity, and
       they are deliberately far below it: the route stays 4.79:1
       against the roads it crosses, so the one lime line still reads
       as the subject and the network stays ground.

       #2E3111 on #0A0A0A = 1.47:1 — the same register as --rule
       (1.38:1), which is what it replaces.
       #454D18 on #0A0A0A = 2.19:1 — one step up, for named highways.

       Neither carries text and neither encodes state, so neither has a
       contrast obligation of its own. They are ground. */
    --map-street:       #2E3111;
    --map-road:         #454D18;

    /* ---- Water ------------------------------------------------
       Lake Ontario on the GTA map. One step off the shell: enough
       that the shoreline reads as a coast rather than as the edge
       of the drawing, not so much that the water competes with the
       land it surrounds.

       Carries no text and encodes no state, so it has no contrast
       obligation of its own — it is a ground, and every element
       drawn over it keeps its own ratio against the shell. */
    --water:            #131313;
    --radius:           0;

    /* The ONE softened corner on the site, per §3. Driver row boxes only:
       each row is its own bordered box with a gap between rows, and at
       that size a hard corner reads as a table cell rather than a card.
       A token rather than a hardcoded 4px so that if the softening turns
       out to be wrong it changes in one place. Nothing else may use it. */
    --radius-row:       4px;

    /* Per-driver colour worlds are retired. The six --driver-*
       variables and --driver-hue are deleted, not overridden.
       Drivers are distinguished by portrait, name, and content. */

    /* ---- Typography -------------------------------------------
       One font file. Inter as a variable font with the optical
       size axis — what "Inter Display" is. Optical sizing tightens
       spacing automatically above 32px, so display and body come
       from the same file. Space Grotesk and Cormorant Garamond are
       removed; there is no separate quote face. */
    --font-sans:        'Inter', 'Helvetica Neue', Arial, sans-serif;

    /* Body 19–20px, per §3's type scale. */
    --fs-body:          1.1875rem; /* 19px — minimum body size    */
    --fs-read:          1.25rem;   /* 20px — primary reading text */
    --fs-label:         0.875rem;  /* 14px — UI labels            */
    --fs-meta:          0.9375rem; /* 15px — rating, metadata     */

    /* H1 56–64px @600, H2 36–42px @600. */
    --fs-h1:            clamp(3.5rem, 6vw, 4rem);
    --fs-h2:            clamp(2.25rem, 4vw, 2.625rem);
    --fs-h3:            clamp(1.125rem, 2vw, 1.25rem);

    --ls-label:         0.14em;    /* all-caps letterspacing */
    --ls-tight:         -0.02em;

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

    /* ---- Spacing ----------------------------------------------
       Generous margins are part of the grammar. */
    --gutter:           clamp(1.25rem, 5vw, 5rem);
    --measure:          38rem;     /* prose line-length cap */
    --block-gap:        clamp(4rem, 9vw, 8.5rem);
    --stack:            1.5rem;

    /* ---- Motion -----------------------------------------------
       Two curves. Not three. */
    --ease:             cubic-bezier(0.22, 1, 0.36, 1);  /* everything     */
    --ease-linear:      linear;                          /* ambient loops  */

    /* Five durations. Nothing between them. If an interaction needs
       a value not on this list, the interaction is wrong, not the
       scale. */
    --t-instant:        120ms;   /* focus rings, toggles, immediate feedback */
    --t-quick:          240ms;   /* hover, card fill, button states          */
    --t-medium:         480ms;   /* section reveals, modals, panel slides    */
    --t-slow:           960ms;   /* route drawing, map reveal                */
    --t-ritual:         2000ms;  /* boarding sequence only                   */

    /* ---- Focus ------------------------------------------------
       Visible on every interactive element, on every background,
       including inside the scene. Never removed. */
    --focus-ring:       3px solid var(--accent);
    --focus-offset:     3px;
}