/* GENERATED by scripts/gen-tokens.mjs from docs/design-system/tokens/*.css — do not edit here.
   Change the value in the normative sheet, or the prose in
   design/templates/site-tokens.css, and re-run the generator. Drift between the two
   fails the design-system lane: node scripts/gen-tokens.mjs --check */
/* Interstate Tracker — the atlas and the signage.
   The ground is a printed road atlas: warm paper, hairline rules, mono figures.
   The accents are the signs standing on it, in the exact FHWA sign inks
   (Pantone -> RGB per FHWA's own table): blue 294 #003F87, red 187 #AF1E2D,
   green 342 #006B54, brown 469 #603311, orange 152 #DD7500, yellow 116 #FCD116.
   The shield artwork in web/public/shields/ uses these same inks, so chrome and
   sign are literally the same colors. Each hue keeps its road meaning: green is
   guidance, blue is services, brown is recreation, orange is temporary work,
   red is prohibition. Orange and yellow are FIELDS, never text inks — a real
   work-zone sign carries a black legend, and orange on paper is ~2.6:1.

   One typeface family throughout, because highway signage works that way: FHWA
   Series B through F are widths of a single face, never two typefaces. Overpass is
   an open derivative of Highway Gothic, so weight and tracking carry the hierarchy
   rather than a display/body pairing. Numerals on a sign face are sans, as FHWA
   Series is; the atlas layer (tables, labels, figures) counts in mono. */

@font-face {
  font-family: "Overpass";
  src: url("../fonts/overpass-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Overpass Mono";
  src: url("../fonts/overpass-mono-var-latin.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* -- atlas layer (neutrals) -- */
  --paper:      #F7F6F2;   /* atlas page */
  --paper-2:    #EFEDE7;
  --rule:       #D9D6CC;   /* hairlines; also state outlines on the map */
  --ink:        #14181F;
  --ink-dim:    #5B6371;

  /* -- sign inks (FHWA) -- */
  --blue:       #003F87;   /* PMS 294 — services: actions, links, structure */
  --blue-deep:  #00305F;
  --red:        #AF1E2D;   /* PMS 187 — prohibition: the driven mile; danger */
  --green:      #006B54;   /* PMS 342 — guidance: a completed route; mileposts */
  --green-deep: #00543F;
  --brown:      #603311;   /* PMS 469 — recreation: achievements */
  --orange:     #DD7500;   /* PMS 152 — temporary: pending claims, active work */
  --yellow:     #FCD116;   /* PMS 116 — warning; reserved, almost never used */
  --road:       #A9B8CC;   /* interstate line, not yet driven */
  --guide:      var(--sign-green);  /* legacy alias; the milepost is a SIGN, so
                                       it stays retroreflective (fixed) */

  /* -- sign fields: fixed in BOTH themes. A sign looks the same at night;
        components quoting signage (shields, guide signs, mileposts, work-zone
        banners) paint with these and are never re-declared by the dark scope. */
  --sign-green:  #006B54;
  --sign-blue:   #003F87;
  --sign-red:    #AF1E2D;
  --sign-brown:  #603311;
  --sign-orange: #DD7500;
  --sign-white:  #FFFFFF;
  --sign-ink:    #14181F;  /* the BLACK legend a work-zone/warning face carries.
                              A literal, not var(--ink): the dark scope lifts
                              --ink to #E9EEF6, which on a --sign-orange field
                              is 2.0:1 (issue 235). Like the rest of the family
                              it is deliberately absent from the dark scope. */

  /* -- semantic aliases: components paint through these, never base values.
        The dark scope below re-declares every alias literally — a var()
        indirection declared at :root cannot be re-pointed from a nested
        scope, so adding a token here means adding it there too. -- */
  --surface-page:   var(--paper);
  --surface-card:   var(--paper);
  --surface-sunken: var(--paper-2);
  --surface-raised: var(--paper);
  --border-hairline: var(--rule);
  --border-strong:   var(--ink);
  --border-danger:   var(--red);     /* the danger hairline — argued at --text-danger below */
  --text-body:      var(--ink);
  --text-muted:     var(--ink-dim);
  --text-link:      var(--blue);
  --text-link-hover: var(--red);
  --text-figure:    var(--blue);
  --text-on-accent: var(--paper);
  --text-complete:  var(--green);
  --text-award:     var(--brown);
  /* Pending ink is NOT the brand orange. PMS 152 is a FIELD, and as text it is
     2.93:1 on paper and 2.71:1 on paper-2 — under even the 3:1 large-text floor
     (#551). Burnt down to ink it is 6.35:1 on paper, 5.86:1 on the sunken
     surface. The orange fields are untouched. */
  --text-pending:   #8A4A00;
  /* Danger as a LEGEND rather than a field: error copy, a destructive
     link-button's ink, the hairline round an inline confirm. It tracks --red
     and not --action-danger because the two diverge in dark on purpose — the
     dark scope lifts --red to #F2685C so it stays readable ink (5.2:1 on the
     raised surface), while --action-danger stays the saturated #C8352A a
     button field needs under a white legend (3.0:1 as ink, which no legend may
     be). Not a --sign-* either: a warning on the atlas page is set in ink, not
     printed on retroreflective sheeting, and unlifted PMS 187 is 2.3:1 at
     night. */
  --text-danger:    var(--red);
  --action-primary:       var(--blue);
  --action-primary-hover: var(--blue-deep);
  --action-primary-ink:   var(--paper);
  --action-danger:        var(--red);
  --action-danger-hover:  var(--red);
  --focus-ring:           var(--red);
  --status-driven:   var(--red);
  --status-complete: var(--green);
  --status-none:     var(--road);
  --status-pending:  var(--orange);
  --coverage-driven:   var(--red);
  --coverage-manual:   var(--red);
  --coverage-casing:   var(--ink);
  --coverage-complete: var(--green);
  --coverage-none:     var(--road);
  --coverage-preview:  var(--orange);
  --coverage-track:    var(--blue);
  --map-canvas:        var(--paper);
  --map-state-outline: var(--rule);
  --masthead-bg: color-mix(in srgb, var(--paper) 92%, transparent);
  --shadow-panel: 0 1px 3px rgb(20 24 31 / 0.08);

  /* -- v3 "Open Road" (2026-09-05): the marketing site's ground is no longer
        atlas paper but FHWA sign-blue enamel — the material of the plate wall —
        with a navy band, cream porcelain plates, and a photographic hero.
        Inner reading pages keep the paper tokens above; these are the
        homepage's world and the site chrome's. Sign fields stay --sign-*. */
  --enamel-hi:   #0B4A99;  /* enamel gradient, lit end */
  --enamel:      #003F87;  /* = --sign-blue: the ground IS the sign material */
  --enamel-deep: #002B57;
  --navy-band:   #0F2A56;  /* figures band, footer */
  --plate-cream: #F3EFE2;  /* porcelain plate; buttons, wordmark ink on blue */
  --plate-cream-hi: #F9F5EA;
  --plate-cream-lo: #E8E0CB;
  --plate-ink:   #00305F;  /* legend pressed into a cream plate */
  --cream-dim:   rgba(214, 228, 255, 0.75); /* secondary text on blue/navy */
  --porcelain:   #F5F1E6;  /* light section ground (exit-to-exit) */
  --porcelain-lo:#EBE5D5;
  --scrim:       rgba(4, 16, 36, 0.62);     /* photo scrim, left edge */
  --map-land:    #F2EEE1;  /* the map's cream states over the photo */
  --map-route:   #A9B0BD;
  --map-driven:  #C93340;
  --night-1:     #0B1A33;  /* navy-night app surfaces (phone mock) */
  --night-2:     #081226;
  --night-card:  #12203A;
  --night-border:#1E3252;
  --night-text:  #E9EEF6;
  --night-muted: #8496B6;

  --sans: "Overpass", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Overpass Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 68rem;
  --measure: 38rem;
}

/* Road atlas at night. Opt in with data-theme="dark" on <html>; the web app
   sets it from the system preference, the marketing site never sets it and
   stays light. Brand hues are lifted, not replaced — the daylight inks fail
   contrast on a near-black ground, and an unreadable brand is not on brand.
   Every alias is re-declared literally (see the note above). The --sign-*
   tokens are deliberately absent here: retroreflective. */
:root[data-theme="dark"] {
  --paper:      #081226;
  --paper-2:    #12203A;
  --rule:       #1E3252;
  --ink:        #E9EEF6;
  --ink-dim:    #8496B6;

  --blue:       #8FB3F0;
  --blue-deep:  #B3CCF7;
  --red:        #F2685C;
  --green:      #4CAF7D;
  --green-deep: #3E9469;
  --brown:      #C99B6A;
  --orange:     #F2A33C;
  --yellow:     #FCD116;
  --road:       #2C3E60;
  /* --guide deliberately not re-declared: the milepost is a sign idiom and
     keeps its daylight field (retroreflective). */

  --surface-page:   #081226;
  --surface-card:   #12203A;
  --surface-sunken: #0A1526;
  --surface-raised: #16233E;
  --border-hairline: #1E3252;
  --border-strong:   #E9EEF6;
  --border-danger:   #F2685C;
  --text-body:      #E9EEF6;
  --text-muted:     #8496B6;
  --text-link:      #8FB3F0;
  --text-link-hover: #F2685C;  /* hover reddens in both themes (lifted red) */
  --text-figure:    #8FB3F0;
  --text-on-accent: #FFFFFF;
  --text-complete:  #4CAF7D;
  --text-award:     #C99B6A;
  --text-pending:   #F2A33C;
  --text-danger:    #F2685C;   /* the lifted red, as DESIGN-V2-SIGNAGE.md's dark
                                  palette already names it: 5.20–6.36:1 across the
                                  four night surfaces */
  --action-primary:       #2D5BC4;
  --action-primary-hover: #3C6DDA;
  --action-primary-ink:   #FFFFFF;
  --action-danger:        #C8352A;
  --action-danger-hover:  #D84337;
  --focus-ring:           #F2685C;
  --status-driven:   #F2685C;
  --status-complete: #4CAF7D;
  --status-none:     #2C3E60;
  --status-pending:  #F2A33C;
  --coverage-driven:   #F2685C;
  --coverage-manual:   #F2685C;
  --coverage-casing:   #000000;
  --coverage-complete: #4CAF7D;
  --coverage-none:     #2C3E60;
  --coverage-preview:  #F2A33C;
  --coverage-track:    #8FB3F0;
  --map-canvas:        #081226;
  --map-state-outline: #1E3252;
  --masthead-bg: color-mix(in srgb, #081226 92%, transparent);
  --shadow-panel: 0 1px 3px rgb(0 0 0 / 0.45);
}