/* TireTally design tokens v3 — generated from the TireTally Design System (tokens.json).
   Material 3 colour roles with TireTally's own values: asphalt and concrete neutrals, one tire-crayon yellow.
   This file is the single source of truth for home.html, app.css and src/site.js. Change values here, nowhere else.
   Themes: light on :root; dark follows the system unless html[data-theme] says otherwise. */
:root{
  /* colour roles */
  --primary:#0b1220;--on-primary:#ffffff;
  --primary-container:#ffc700;--on-primary-container:#1a1400;
  --brand-yellow:#ffc700;
  --secondary:#5a6676;--secondary-container:#eef1f5;--on-secondary-container:#0b1220;
  --tertiary:#0c7a52;--tertiary-container:#dcf5ea;--on-tertiary-container:#0c7a52;
  --warning:#8a5300;--warning-container:#fff2cc;
  --error:#c4261b;--error-container:#fde7e5;--on-error-container:#c4261b;
  --surface:#f7f8fa;--on-surface:#0b1220;--on-surface-variant:#5a6676;
  --surface-container-lowest:#ffffff;--surface-container:#eef1f5;--surface-container-high:#e2e6ec;
  --inverse-surface:#0b1220;--inverse-on-surface:#f2f4f7;--inverse-secondary:#9aa4b2;
  --outline:#7d8898;--outline-variant:#dde2e9;
  --focus-ring:#0b1220;--scrim:#0b1220;
  /* type */
  --font-display:"Archivo","Archivo Fallback","Arial Narrow",Arial,sans-serif;
  --font-body:"Geist","Geist Fallback",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  /* spacing (4px scale) */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-14:56px;--space-18:72px;--space-28:112px;
  /* shape */
  --radius-xs:6px;--radius-sm:10px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:999px;
  /* elevation: tonal surfaces first, shadows only on things that float */
  --shadow-float:0 -8px 24px -16px rgba(0,0,0,.25);
  --shadow-fab:0 10px 22px -8px rgba(204,160,0,.75),0 0 0 5px var(--surface-container-lowest);
  --shadow-card-raised:0 30px 60px -30px rgba(11,18,32,.28);
  --shadow-segment:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--outline-variant);
  /* motion */
  --duration-fast:120ms;--duration-default:200ms;--duration-slow:300ms;--duration-draw:900ms;
  --ease-standard:cubic-bezier(.2,0,0,1);--ease-emphasized:cubic-bezier(.3,0,0,1.4);
  /* sizes and window size classes (compact <600, medium 600–839, expanded 840–1199, large ≥1200) */
  --target-min:48px;--target-primary:56px;--target-grade:76px;--control-h:52px;--control-h-sm:42px;
  --sidebar-w:248px;--rail-w:80px;--content-max:1240px;
  --state-hover:8%;--state-pressed:12%;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --primary:#ffc700;--on-primary:#1a1400;
  --primary-container:#4a3a00;--on-primary-container:#ffe27a;
  --secondary:#9aa4b2;--secondary-container:#1b232d;--on-secondary-container:#f2f4f7;
  --tertiary:#3dd598;--tertiary-container:#0f3d2e;--on-tertiary-container:#3dd598;
  --warning:#f5b82e;--warning-container:#3d2e0a;
  --error:#ff7a6e;--error-container:#3f1a1a;--on-error-container:#ff7a6e;
  --surface:#0b0f14;--on-surface:#f2f4f7;--on-surface-variant:#b9c2cd;
  --surface-container-lowest:#141a22;--surface-container:#1b232d;--surface-container-high:#242e3a;
  --inverse-surface:#05080c;--inverse-on-surface:#f2f4f7;--inverse-secondary:#9aa4b2;
  --outline:#5b6777;--outline-variant:#26303c;
  --focus-ring:#ffc700;--scrim:#000000;
  --shadow-float:0 -8px 24px -16px rgba(0,0,0,.6);--shadow-fab:0 10px 22px -8px rgba(0,0,0,.7),0 0 0 5px var(--surface-container-lowest);--shadow-card-raised:0 30px 60px -30px rgba(0,0,0,.7);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --primary:#ffc700;--on-primary:#1a1400;
  --primary-container:#4a3a00;--on-primary-container:#ffe27a;
  --secondary:#9aa4b2;--secondary-container:#1b232d;--on-secondary-container:#f2f4f7;
  --tertiary:#3dd598;--tertiary-container:#0f3d2e;--on-tertiary-container:#3dd598;
  --warning:#f5b82e;--warning-container:#3d2e0a;
  --error:#ff7a6e;--error-container:#3f1a1a;--on-error-container:#ff7a6e;
  --surface:#0b0f14;--on-surface:#f2f4f7;--on-surface-variant:#b9c2cd;
  --surface-container-lowest:#141a22;--surface-container:#1b232d;--surface-container-high:#242e3a;
  --inverse-surface:#05080c;--inverse-on-surface:#f2f4f7;--inverse-secondary:#9aa4b2;
  --outline:#5b6777;--outline-variant:#26303c;
  --focus-ring:#ffc700;--scrim:#000000;
  --shadow-float:0 -8px 24px -16px rgba(0,0,0,.6);--shadow-fab:0 10px 22px -8px rgba(0,0,0,.7),0 0 0 5px var(--surface-container-lowest);--shadow-card-raised:0 30px 60px -30px rgba(0,0,0,.7);
  color-scheme:dark;
}
/* Focus: one ring everywhere, 3:1+ on every surface in both themes. */
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){:root{--duration-fast:0ms;--duration-default:0ms;--duration-slow:0ms;--duration-draw:0ms}}