/* Allo Cars tokens as CSS variables, generated from tokens.json. Same palette and fonts as Allo Outings. Light by default; dark via prefers-color-scheme or data-theme="dark". */
:root {
  --surface-50: #f6f5f2;
  --surface-100: #ffffff;
  --surface-200: #ecebe6;
  --border: #dddbd5;
  --ink: #17191b;
  --ink-muted: #5b6066;
  --brand: #17191b;
  --brand-strong: #000000;
  --brand-soft: #ecebe6;
  --on-brand: #f6f5f2;
  --accent: #1d4f91;
  --accent-soft: #e3eaf4;
  --on-accent: #ffffff;
  --ochre: #ffcc00;
  --success: #1d7a4a;
  --on-success: #ffffff;
  --danger: #d1001f;
  --on-danger: #ffffff;
  --notice-surface: #fff4c2;
  --notice-ink: #17191b;
  --warning: #7a5600;
  --on-warning: #17191b;
  --warning-soft: #fff4c2;
  --success-soft: #e2f2e8;
  --danger-soft: #fde3e6;
  --car-1: #86b6ef;
  --car-2: #3987e5;
  --car-3: #1c5cab;
  --car-4: #0d366b;
  --ref-line: #a3a6aa;
  --ref-line-hi: #5b6066;
  --fuel: #6f4a2a;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --chart-grid: #e6e4de;
  --chart-axis: #7d8187;
  --gold: #ffcc00;
  --gold-ink: #17191b;
  --gold-bg: #fff4c2;
  --braun-bg: #f2e9df;
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-sign: "Barlow Semi Condensed", "Bahnschrift", "DIN Alternate", "Arial Narrow", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-xs: 6px;
  --shadow-sm: 0 1px 2px #17191b0f, 0 6px 18px #17191b0f;
  --shadow-md: 0 6px 20px #00000026;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-50: #121314;
    --surface-100: #1c1d1f;
    --surface-200: #27292c;
    --border: #303235;
    --ink: #ecebe8;
    --ink-muted: #a5a9ae;
    --brand: #ecebe8;
    --brand-strong: #ffffff;
    --brand-soft: #27292c;
    --on-brand: #121314;
    --accent: #8fb4ea;
    --accent-soft: #1b2535;
    --on-accent: #17191b;
    --ochre: #ffcc00;
    --success: #6fd39b;
    --on-success: #0f1a14;
    --danger: #ff5a6a;
    --on-danger: #17191b;
    --notice-surface: #3a3212;
    --notice-ink: #ecebe8;
    --warning: #ffcc00;
    --on-warning: #17191b;
    --warning-soft: #3a3212;
    --success-soft: #1a2e22;
    --danger-soft: #3a1a1e;
    --car-1: #b7d3f6;
    --car-2: #6da7ec;
    --car-3: #3987e5;
    --car-4: #256abf;
    --ref-line: #5e6268;
    --ref-line-hi: #c4c7cb;
    --fuel: #c79d6f;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --chart-grid: #2a2c2f;
    --chart-axis: #8a8e94;
    --gold: #ffcc00;
    --gold-ink: #17191b;
    --gold-bg: #3a3212;
    --braun-bg: #2e251c;
    --shadow-sm: 0 1px 2px #0000004d;
    --shadow-md: 0 6px 20px #00000080;
  }
}
:root[data-theme="dark"] {
  --surface-50: #121314;
  --surface-100: #1c1d1f;
  --surface-200: #27292c;
  --border: #303235;
  --ink: #ecebe8;
  --ink-muted: #a5a9ae;
  --brand: #ecebe8;
  --brand-strong: #ffffff;
  --brand-soft: #27292c;
  --on-brand: #121314;
  --accent: #8fb4ea;
  --accent-soft: #1b2535;
  --on-accent: #17191b;
  --ochre: #ffcc00;
  --success: #6fd39b;
  --on-success: #0f1a14;
  --danger: #ff5a6a;
  --on-danger: #17191b;
  --notice-surface: #3a3212;
  --notice-ink: #ecebe8;
  --warning: #ffcc00;
  --on-warning: #17191b;
  --warning-soft: #3a3212;
  --success-soft: #1a2e22;
  --danger-soft: #3a1a1e;
  --car-1: #b7d3f6;
  --car-2: #6da7ec;
  --car-3: #3987e5;
  --car-4: #256abf;
  --ref-line: #5e6268;
  --ref-line-hi: #c4c7cb;
  --fuel: #c79d6f;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --chart-grid: #2a2c2f;
  --chart-axis: #8a8e94;
  --gold: #ffcc00;
  --gold-ink: #17191b;
  --gold-bg: #3a3212;
  --braun-bg: #2e251c;
  --shadow-sm: 0 1px 2px #0000004d;
  --shadow-md: 0 6px 20px #00000080;
}