/* tokens.css - DESIGN TOKENS ONLY. Change the look HERE.
   Palette borrowed from the pjob executive-view: warm paper, ink, accent clay.
   Fonts: Fraunces (serif headers) + Inter (body) + JetBrains Mono (eyebrows).
   The sim reads its colors from the --road-* / --car-* / --money-* vars below
   via getComputedStyle - no hex lives in the sim. */
:root {
  /* paper + ink */
  --paper: #fbf8f1;
  --paper-2: #f3ede0;
  --paper-3: #ebe4d2;
  --ink: #1c1916;
  --ink-strong: #2e2a24;  /* near-black body for raised-contrast reading text */
  --ink-soft: #4a443d;
  --ink-mute: #8a8278;
  --ink-faint: #b8b0a3;
  --rule: #ddd4c0;
  --rule-soft: #e8e1cf;

  /* accent (clay) */
  --accent: #c2410c;
  --accent-soft: #ea580c;
  --accent-bg: #fef0e6;

  /* secondary (deep blue, used for "calculated" / source notes) */
  --calc: #1e3a8a;
  --calc-soft: #3b5cb8;
  --calc-bg: #e6ecf8;

  /* condition / status semantics */
  --green: #166534;
  --green-bg: #d1fae5;
  --amber: #a16207;
  --amber-bg: #fef3c7;
  --red: #991b1b;
  --red-bg: #fee2e2;
  --gray: #525252;
  --gray-bg: #e5e5e5;

  /* tier colors (good / fair / poor / potholed) */
  --tier-good: #166534;
  --tier-fair: #a16207;
  --tier-poor: #b45309;
  --tier-potholed: #991b1b;

  /* shadows */
  --shadow-soft: 0 1px 2px rgba(28, 25, 22, 0.04);
  --shadow-hover: 0 4px 16px rgba(28, 25, 22, 0.07);
  --shadow-expanded: 0 8px 32px rgba(194, 65, 12, 0.08);

  /* page background wash (kept here so layout/components carry no raw colors) */
  --page-wash:
    radial-gradient(circle at 12% 8%, rgba(194, 65, 12, 0.04) 0%, transparent 38%),
    radial-gradient(circle at 88% 94%, rgba(30, 58, 138, 0.03) 0%, transparent 46%);

  /* fonts */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-pill: 999px;

  /* extra motion tokens */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur: 0.4s;
  --dur-slow: 0.7s;

  /* ===== SIM visual tokens (read by gamesim via getComputedStyle) ===== */
  --sim-sky-top: #e9f0f4;    /* upper sky */
  --sim-sky-bottom: #f6efe2; /* horizon haze (warm) */
  --sim-ground: #e3dac6;     /* roadside earth */
  --sim-sky: #f3ede0;        /* legacy fallback */
  --road-good: #3e3a34;      /* dark, intact asphalt */
  --road-fair: #4f4a40;      /* lightly worn */
  --road-poor: #6b5e4a;      /* sun-bleached, worn */
  --road-potholed: #2a2622;  /* cratered, pocked */
  --road-crack: #1c1916;
  --road-pothole: #14110e;
  --road-line: #e8e1cf;      /* lane marking */
  --road-edge: #211e1a;      /* road shoulder line */
  --car-good: #1e3a8a;       /* car body when traffic flows */
  --car-bad: #991b1b;        /* car body juddering on bad road */
  --car-glass: #cfe0ee;      /* windshield glint */
  --digger: #c2410c;         /* diggers re-scarring when coordinate is OFF */
  --money-public: #991b1b;   /* public cost / emergency-patch bleed */
  --money-benefit: #166534;  /* benefit accruing */
  --money-track: #d8cfba;
  --ghost: #b9b0a0;          /* status-quo ghost lane */
  --ghost-ink: #8a8278;
  --sim-grid: #d8cfba;       /* timeline ribbon ticks */
  --sim-marker: #c2410c;     /* meaning-label markers */

  /* ===== v4-round2 craft additions (sim depth + delta semantics) ===== */
  /* richer, more tactile asphalt ramp: good = deep fresh bitumen, decaying to a
     bleached, pocked, cratered surface. Distinct enough to read at a glance. */
  --road-good: #34302a;        /* fresh, dark, oily asphalt */
  --road-good-hi: #46413a;     /* aggregate fleck highlight on good asphalt */
  --road-fair: #574f44;        /* sun-touched, slightly grey */
  --road-poor: #7a6b52;        /* bleached, dry, ravelled */
  --road-potholed: #241f1a;    /* dark cratered base where chunks are gone */
  --road-base: #b9966a;        /* exposed sub-base / mud at the bottom of a pothole */
  --road-patch: #3a342c;       /* fresh emergency patch (mismatched tone) */
  --road-shine: #ffffff;       /* wet specular glint (used at low alpha) */

  /* sky + scene depth */
  --sim-sky-top: #dbe6ec;
  --sim-sky-bottom: #f3e9d8;
  --sim-haze: #e7dcc8;         /* distant building haze band */
  --sim-building: #cabfa9;     /* skyline silhouettes */

  /* delta chips (better / worse vs today) — reuse condition semantics */
  --delta-good: #166534;
  --delta-good-bg: #dcfce7;
  --delta-bad: #991b1b;
  --delta-bad-bg: #fee2e2;
  --delta-neutral: #8a8278;
  --delta-neutral-bg: #efe9dc;

  /* linchpin callout (the load-bearing finding) — a distinct, weightier surface */
  --linchpin-ink: #1e3a8a;
  --linchpin-bg: #eef2fb;
  --linchpin-edge: #1e3a8a;
  --linchpin-glow: rgba(30, 58, 138, 0.14);

  /* play button accent ring */
  --play-ring: rgba(194, 65, 12, 0.18);

  /* actionable "what can you do" section — DESATURATED into the warm Ledger family
     (was a saturated forest-green / mint that clashed with the clay+paper palette). */
  --action: #9a5a2c;            /* muted warm brown — calm, reads as "do this" without shouting */
  --action-edge: #c2410c;       /* clay accent rule */
  --action-bg: #f6ecdd;         /* warm paper tint */
  --action-chip-ink: #fbf8f1;   /* paper, for the level pill text */

  /* per-node marginal chip (locality) — the extra years a reform adds, on the node itself */
  --marg-pos: #2f6d4f;          /* warm Ledger green (matches viz-cell-good) */
  --marg-pos-bg: #e4efe6;
  --marg-neg: #991b1b;
  --marg-neg-bg: #fbe6e3;
  --marg-zero: #8a8278;
  --marg-zero-bg: #efe9dc;

  /* ===== v6.20 ROUND-3: EDITORIAL CONDITION-TIMELINE viz tokens =====
     The sim is no longer a side-view street game. It is a designed data-visualization
     of road CONDITION over 15 years: a flat horizontal strip, each year a cell coloured
     by its condition tier, with a faded status-quo baseline strip above for contrast.
     These read in the warm Ledger palette (not the old asphalt greys). */
  --viz-bg: #fbf8f1;             /* canvas paper */
  --viz-cell-good: #2f6d4f;      /* smooth — calm Ledger green */
  --viz-cell-fair: #b08642;      /* worn — warm ochre */
  --viz-cell-poor: #c0612a;      /* cracked — clay */
  --viz-cell-potholed: #8f3022;  /* cratered — deep brick red */
  --viz-cell-empty: #e8e1cf;     /* not-yet-reached cell (future years) */
  --viz-baseline: #cdc4b2;       /* faded status-quo strip fill */
  --viz-baseline-ink: #9a9183;   /* status-quo cell tint when blended */
  --viz-strip-edge: #ddd4c0;     /* hairline between cells / strip border */
  --viz-playhead: #c2410c;       /* the year playhead marker (clay) */
  --viz-ink: #1c1916;            /* hero year number + state label */
  --viz-ink-soft: #4a443d;
  --viz-ink-mute: #8a8278;
  --viz-grid: #ece5d5;           /* faint year gridlines */
  --viz-good-ink: #2f6d4f;       /* GOOD state label */
  --viz-fair-ink: #9a6f25;       /* FAIR state label */
  --viz-poor-ink: #c0612a;       /* POOR state label */
  --viz-potholed-ink: #8f3022;   /* CRATERED state label */
  --viz-motif: #b8b0a3;          /* single minimal car motif (faint, tasteful) */

  /* ===== v7: in-cell tier labels + band dividers (drawn ON the saturated tier fills) =====
     The four tier words are drawn inside each live-strip year-block so the separate
     colour legend becomes redundant; the road profile also sinks/roughens by tier. */
  --viz-on-fill: #fbf3e4;                       /* paper-toned label ink; reads on all 4 tier fills */
  --viz-on-fill-scrim: rgba(28, 25, 22, 0.28);  /* faint dark scrim behind the in-cell word (legibility on ochre) */
  --viz-band-divider: #fbf3e4;                  /* vertical tick where the tier band changes */
}