/* The token system.
 *
 * Three layers, in this order, and the order is the rule:
 *   1. BRAND PRIMITIVES  the corporate identity. Never varies by state, ever.
 *   2. SEMANTIC ROLES    what a colour is *for*. Components only ever use these.
 *   3. STATE ACCENT      a per-state identity tint, applied via [data-state="XX"].
 *
 * A state may RETINT, never REDESIGN: a state block may set only the tokens listed
 * under §3. Type scale, spacing, radii, surfaces and action colour are corporate and
 * identical in every state — that is what keeps 50 states one product instead of 50
 * skins (wiki/Identity.md: "one palette system with per-state accents").
 *
 * The look is road signage (designed on the Claude Design canvas "Open Road Ready
 * App", approved 2026-10-22): colour means what it means on the road. Guide green
 * moves you on, services blue marks the app's places and every source, amber says
 * look at this, red says stop or wrong, a white plate holds a fact or a price, and
 * school-zone green is family. Night is a night drive: the road goes dark and the
 * signs keep their colour.
 */

/* Highway lettering and a calm reading face, both open (OFL, web/kit/fonts/). */
@font-face {
  font-family: "Overpass"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/kit/fonts/overpass-latin.woff2") format("woff2");
  /* not its middle dot (U+00B7): drawn for Catalan's l·l, it swallows the space after it */
  unicode-range: U+0000-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/kit/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---- 1. brand primitives ------------------------------------------------- */
:root {
  --orr-green: #00704a;          /* guide-sign green: the action colour */
  --orr-green-lift: #008a5c;     /* the same sign at night */
  --orr-blue: #1356a8;           /* services blue */
  --orr-blue-lift: #2c6fd1;
  --orr-amber: #ffc21a;          /* warning yellow */
  --orr-red: #c8102e;            /* regulatory red */
  --orr-red-lift: #db2840;
  --orr-school: #c9e31e;         /* school-zone yellow-green */

  --sign-face: "Overpass", "Source Sans 3", "Avenir Next", system-ui, sans-serif;
  --read-face: "Source Sans 3", -apple-system, "Segoe UI", Roboto, sans-serif;
  --type: 17px/1.55 var(--read-face);
  --step-0: 1rem; --step-1: 1.125rem; --step-2: 1.4rem; --step-3: clamp(27px, 5vw, 36px);
  --space-1: 6px; --space-2: 10px; --space-3: 16px; --space-4: 24px; --space-5: 40px;
  --radius: 12px; --radius-lg: 18px;
  --tap: 52px;                   /* tap-target floor, comfortably over the 44px minimum */
  --reading: 62ch;               /* long-form prose only (the guide column) */
  --page: 1120px;                /* every shell uses this — landing, app, ops, guide chrome */
  --motion: 220ms cubic-bezier(.2, .7, .2, 1);
  --spring: linear(0, .063, .207, .379, .548, .696, .814, .903, .964, 1.003, 1.024, 1.034,
    1.035, 1.032, 1.026, 1.02, 1.014, 1.01, 1.006, 1.003, 1.001, 1, .999, 1);
  color-scheme: light dark;
}

/* ---- 2. semantic roles (light) ------------------------------------------- */
:root {
  --ink: #14191e;
  --muted: #4b5661;
  --faint: #7c8792;
  --line: #e3e8eb;
  --line-2: #cfd7dd;
  --bg: #ffffff;
  --card: #ffffff;
  --zone: #f1f4f5;               /* the concrete beside the road: a quiet panel */
  --tap-bg: #f1f4f5;
  --shadow: none;
  --accent: var(--orr-green);
  --accent-ink: #ffffff;         /* text drawn on top of --accent */
  --guide: var(--orr-green);     /* a green sign's fill */
  --guide-ink: var(--orr-green); /* green as text on the ground */
  --info: var(--orr-blue);
  --info-soft: #e4edf8;
  --info-ink: var(--orr-blue);
  --warn: var(--orr-amber);
  --warn-ink: #7a5200;
  --stop: var(--orr-red);
  --school: var(--orr-school);
  --right: var(--orr-green);
  --wrong: #b0122b;
  --go: var(--orr-green);
  --nogo: #b0122b;
  --pending: #7a5200;
  --skip: #d99a00;               /* not finished — the amber lamp */
  --plate: #ffffff;              /* a white sign: a rule, a number, a price */
  --plate-ink: #14191e;
  --road: #e2e7ea;               /* the road the stops sit on */
  --road-line: #ffffff;
  --asphalt: #2f363d;            /* a road drawn as a road: markings, the family lanes */
  --stud: #ffb400;
  --housing: #1c2329;            /* a traffic signal's case */
  --lamp-off: #3b444d;
  --lamp-green: #19c97b;
  --lamp-red: #ff4458;
  --lamp-amber: #ffc21a;
  --glow: 0 0 0 0;               /* signs only glow at night (a shadow length, then a colour) */
  /* state identity: defaults to the brand until a [data-state] block overrides it */
  --state-accent: var(--orr-green);
  --state-accent-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9eef2;
    --muted: #a4b0bb;
    --faint: #6f7e8b;
    --line: #1c2834;
    --line-2: #2a3846;
    --bg: #0a1016;
    --card: #131c26;
    --zone: #101821;
    --tap-bg: #101821;
    --accent: var(--orr-green-lift);
    --accent-ink: #ffffff;
    --guide: var(--orr-green-lift);
    --guide-ink: #3fd39a;
    --info: var(--orr-blue-lift);
    --info-soft: #14243a;
    --info-ink: #8db8ff;
    --warn-ink: #ffc21a;
    --stop: var(--orr-red-lift);
    --right: #3fd39a;
    --wrong: #ff7186;
    --go: #3fd39a;
    --nogo: #ff7186;
    --pending: #ffc21a;
    --skip: #ffc21a;
    --plate: #e8ecef;
    --road: #17212b;
    --road-line: #ffb400;
    --asphalt: #151c23;
    --housing: #04070a;
    --glow: 0 16px 44px -18px;
    --state-accent: var(--orr-green-lift);
    --state-accent-ink: #10201c;
  }
}

/* ---- 3. state accents ----------------------------------------------------
 * ONLY these two tokens (plus their dark-mode pair) may appear in a state block.
 * tests/test_theme.py enforces it and checks every accent for WCAG contrast in
 * both schemes, so a new state cannot ship an unreadable or off-brand theme.
 * Used for who you are, never for meaning: the state's shield, the edge of its
 * welcome, your marker on the road. Primary actions stay guide green everywhere.
 */
[data-state="CA"] {
  --state-accent: #9a6b00;              /* golden-poppy, darkened to carry text */
  --state-accent-ink: #fffdf7;
}
@media (prefers-color-scheme: dark) {
  [data-state="CA"] {
    --state-accent: #e8b54b;
    --state-accent-ink: #201804;
  }
}
[data-state="FL"] {
  --state-accent: #a8480a;              /* citrus, darkened to carry text */
  --state-accent-ink: #fffaf4;
}
@media (prefers-color-scheme: dark) {
  [data-state="FL"] {
    --state-accent: #ffa45c;
    --state-accent-ink: #2a1200;
  }
}
[data-state="TX"] {
  --state-accent: #2f4f9e;              /* bluebonnet, darkened to carry text */
  --state-accent-ink: #f7f9ff;
}
@media (prefers-color-scheme: dark) {
  [data-state="TX"] {
    --state-accent: #9db4ff;
    --state-accent-ink: #0c1638;
  }
}
[data-state="NY"] {
  --state-accent: #a3224f;              /* rose, darkened to carry text */
  --state-accent-ink: #fff7f9;
}
@media (prefers-color-scheme: dark) {
  [data-state="NY"] {
    --state-accent: #ff94b4;
    --state-accent-ink: #33061a;
  }
}
[data-state="IL"] {
  --state-accent: #5b3a91;              /* violet, darkened to carry text */
  --state-accent-ink: #faf7ff;
}
@media (prefers-color-scheme: dark) {
  [data-state="IL"] {
    --state-accent: #c4a8ff;
    --state-accent-ink: #1c0d3a;
  }
}
[data-state="CO"] {
  --state-accent: #96301f;              /* red sandstone, darkened to carry text */
  --state-accent-ink: #fff9f6;
}
@media (prefers-color-scheme: dark) {
  [data-state="CO"] {
    --state-accent: #ff9d85;
    --state-accent-ink: #2a0d06;
  }
}
[data-state="GA"] {
  --state-accent: #a8363f;              /* peach blush, darkened to carry text */
  --state-accent-ink: #fff8f7;
}
@media (prefers-color-scheme: dark) {
  [data-state="GA"] {
    --state-accent: #ffa0aa;
    --state-accent-ink: #33080f;
  }
}