/* Open Road Ready — 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").
 */

/* ---- 1. brand primitives ------------------------------------------------- */
:root {
  --orr-green: #1f6f5c;          /* the action colour: buttons, links, focus */
  --orr-green-lift: #6fcfb4;     /* its dark-mode counterpart */
  --orr-red: #a4343a;
  --orr-red-lift: #f08a90;

  --type: 17px/1.6 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step-0: 1rem; --step-1: 1.125rem; --step-2: 1.5rem; --step-3: clamp(24px, 5vw, 34px);
  --space-1: 6px; --space-2: 10px; --space-3: 16px; --space-4: 24px; --space-5: 40px;
  --radius: 10px; --radius-lg: 14px;
  --tap: 52px;                   /* tap-target floor, comfortably over the 44px minimum */
  --reading: 62ch;               /* prose measure; data views opt into .wrap-wide */
  --motion: 220ms cubic-bezier(.2, .7, .2, 1);
}

/* ---- 2. semantic roles (light) ------------------------------------------- */
:root {
  --ink: #1a1d1f;
  --muted: #5a5348;
  --line: #e4ddd2;
  --bg: #f4efe6;
  --card: #fffdf8;
  --tap-bg: #ece6db;
  --shadow: 0 1px 2px rgb(26 29 31 / .05), 0 10px 28px rgb(31 111 92 / .07);
  --accent: var(--orr-green);
  --accent-ink: #fbfaf8;         /* text drawn on top of --accent */
  --right: var(--orr-green);
  --wrong: var(--orr-red);
  --go: var(--orr-green);
  --nogo: var(--orr-red);
  --pending: #7a6a3a;
  /* state identity: defaults to the brand until a [data-state] block overrides it */
  --state-accent: var(--orr-green);
  --state-accent-ink: #fbfaf8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece8e1;
    --muted: #b3aaa0;
    --line: #3a342c;
    --bg: #161310;
    --card: #1f1b17;
    --tap-bg: #262119;
    --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 12px 32px rgb(0 0 0 / .35);
    --accent: var(--orr-green-lift);
    --accent-ink: #10201c;
    --right: var(--orr-green-lift);
    --wrong: var(--orr-red-lift);
    --go: var(--orr-green-lift);
    --nogo: var(--orr-red-lift);
    --pending: #d8c48a;
    --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 state identity moments — the state chip, guide headers, dashboard
 * highlights — never for primary actions, which stay corporate 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;
  }
}