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

   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.
   ============================================================ */

: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 still comfortably above AA.
       #8C8C88 on #0A0A0A = 5.87:1 — AA (normal text) */
    --ink-dim:          #8C8C88;

    /* ---- Accent -----------------------------------------------
       The accent carries the identity and is used with total
       commitment: active nav, inline highlights, solid card
       blocks, button fills, hover states.

       #2DE1C2 on #0A0A0A = 11.94:1 — AA/AAA (accent text on shell)
       #0A0A0A on #2DE1C2 = 11.94:1 — AA/AAA (black text on accent fill)
    */
    --accent:           #2DE1C2;

    /* Deep accent variant, for accent-coloured TEXT that sits on a
       light surface (the accent itself is far too light for that).
       #0E7C6B on #F5F5F2 = 4.67:1 — AA (normal text)
       #0E7C6B on #FFFFFF = 5.10:1 — AA (normal text) */
    --accent-deep:      #0E7C6B;

    /* Accent used as a hairline/edge, not as text. Decorative only. */
    --accent-edge:      #2DE1C2;

    /* ---- 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;
    --radius:           0;

    /* ---- Per-driver colour worlds ------------------------------
       Each driver page tints its own hue over the black shell.
       All are >= 7:1 on --shell, so they stay AA/AAA as text and
       give black text >= 7:1 when used as a solid block fill.

       kulbir      #2DE1C2 on #0A0A0A = 11.94:1
       mehakjot    #F2B441 on #0A0A0A = 10.73:1
       yalgar      #7FB2FF on #0A0A0A =  9.16:1
       mohd        #FF9E7A on #0A0A0A =  9.83:1
       rammah      #C8A2FF on #0A0A0A =  9.49:1
       niharika    #FF8FB8 on #0A0A0A =  9.31:1
    */
    --driver-kulbir-singh:      #2DE1C2;
    --driver-mehakjot-singh:    #F2B441;
    --driver-yalgar-singh:      #7FB2FF;
    --driver-mohd-javed:        #FF9E7A;
    --driver-rammah-mohammad:   #C8A2FF;
    --driver-niharika-aggarwal: #FF8FB8;

    /* Active driver hue. Driver pages override --driver-hue inline;
       everything else inherits the house accent. */
    --driver-hue:       var(--accent);

    /* ---- Typography -------------------------------------------
       Space Grotesk throughout. Cormorant Garamond italic is
       reserved exclusively for interview pull-quotes. */
    --font-sans:        'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-quote:       'Cormorant Garamond', Georgia, 'Times New Roman', serif;

    /* 18px body minimum, 20px primary reading text. */
    --fs-body:          1.125rem;  /* 18px — minimum body size   */
    --fs-read:          1.25rem;   /* 20px — primary reading text */
    --fs-label:         0.8125rem; /* 13px — all-caps labels only */
    --fs-meta:          1rem;      /* 16px — metadata            */

    --fs-h1:            clamp(2.75rem, 7vw, 5rem);
    --fs-h2:            clamp(2rem, 4vw, 3rem);
    --fs-h3:            clamp(1.25rem, 2vw, 1.5rem);

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

    --fw-regular:       400;
    --fw-medium:        500;
    --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;

    /* ---- Focus ------------------------------------------------
       Visible on every interactive element, on any background. */
    --focus-ring:       3px solid var(--accent);
    --focus-offset:     3px;
}