/* Garage Log — design tokens for all three directions.
   Usage: <html data-theme="detroit">  |  "chrono"  |  "stage"
   Fonts (Google Fonts) — load the line for the chosen theme:
   detroit: family=Bowlby+One&family=Yellowtail&family=Barlow+Condensed:wght@400;500;600;700&family=Share+Tech+Mono
   chrono:  family=Saira+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&family=Chakra+Petch:wght@500;600
   stage:   family=Archivo+Black&family=Archivo+Narrow:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600
*/

/* ---------- 01 · Detroit '69 (muscle car era) ---------- */
[data-theme="detroit"] {
  --color-ground: #F1E6CF;      /* Vinyl Cream — page background */
  --color-surface: #FBF5E8;     /* cards */
  --color-panel: #161311;       /* Asphalt — dashboard panel */
  --color-ink: #161311;
  --color-text-2: #3B322A;
  --color-muted: #5A4E42;
  --color-on-panel: #F1E6CF;
  --color-on-panel-muted: #CFC4AE;
  --color-panel-border: #4A4038;
  --color-panel-track: #3A322B;
  --color-rule: #CDBFA4;
  --color-accent: #D9531E;      /* Hemi Orange — primary buttons, progress, odometer last digit */
  --color-accent-text: #B5400F; /* orange for text on cream (passes 4.5:1) */
  --color-yellow: #E8B12A;      /* Top Banana — stat labels on dark, "due soon" */
  --color-red: #9E1B14;         /* Torch Red — third stripe, "overdue" (replaces Plum Crazy) */
  --color-chrome: #B8B4AC;
  --status-done-bg: #2F6B3A;    --status-done-fg: #FBF5E8;
  --status-soon-bg: #E8B12A;    --status-soon-fg: #161311;
  --status-overdue-bg: #9E1B14; --status-overdue-fg: #FBF5E8;
  --font-display: 'Bowlby One', sans-serif;      /* headlines, stat labels */
  --font-script: 'Yellowtail', cursive;          /* logo/badge only */
  --font-body: 'Barlow Condensed', sans-serif;   /* UI, tables */
  --font-numeric: 'Share Tech Mono', monospace;  /* mileage, dates, cost */
  --radius-card: 14px;
  --radius-panel: 20px;
  --radius-pill: 999px;
  --border-card: 3px solid #161311;
}

/* ---------- 02 · Chrono GT (motorsport timing) ---------- */
[data-theme="chrono"] {
  --color-ground: #DADDE1;      /* Track Silver */
  --color-surface: #F4F5F7;
  --color-card: #FFFFFF;        /* Dial White */
  --color-panel: #1C1F24;       /* Graphite — top nav */
  --color-ink: #1C1F24;
  --color-text-2: #3A3F47;      /* Gunmetal */
  --color-muted: #4A5059;
  --color-on-panel: #FFFFFF;
  --color-on-panel-muted: #D5D9DE;
  --color-bezel: #A9AEB5;
  --color-rule: #C9CDD2;
  --color-rule-light: #E4E7EA;
  --color-accent: #D7192A;      /* Race Red — primary button, active nav, dial ring */
  --color-accent-text: #B3101F; /* red for text on white */
  --color-alert-row: #FCEEEF;   /* overdue row tint */
  --status-done: #1E7A45;
  --status-soon: #C77A00;
  --status-overdue: #D7192A;    /* dot colors; label text stays ink (or accent-text for overdue) */
  --font-display: 'Saira Condensed', sans-serif; /* 800 italic for headlines, 700 caps for labels */
  --font-body: 'Barlow', sans-serif;
  --font-numeric: 'Chakra Petch', sans-serif;
  --radius-card: 4px;
  --radius-panel: 6px;
  --shadow-card: 0 1px 0 #FFFFFF inset, 0 1px 2px rgba(28,31,36,0.18);
  --button-slant: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

/* ---------- 03 · Stage Notes (Group B rally roadbook) ---------- */
[data-theme="stage"] {
  --color-ground: #EFEBE1;      /* Roadbook paper */
  --color-surface: #F8F6F0;
  --color-card: #FFFFFF;
  --color-ink: #141414;
  --color-text-2: #3A3630;
  --color-muted: #4B4740;
  --color-gravel: #8C8576;      /* dashed dividers */
  --color-rule: #C9C2B2;        /* dashed table rows */
  --color-accent: #F2C230;      /* Plate Yellow — primary button, door plate, "caution" */
  --color-blue: #1E4BA0;        /* Stage Blue — links */
  --color-red: #C8361D;         /* Flag Red — "late" */
  --status-done-bg: #FFFFFF;    --status-done-fg: #141414;  /* "✓ CLEARED", 2px ink border */
  --status-soon-bg: #F2C230;    --status-soon-fg: #141414;  /* "CAUTION" */
  --status-overdue-bg: #C8361D; --status-overdue-fg: #FFFFFF; /* "!! LATE" */
  --font-display: 'Archivo Black', sans-serif;
  --font-body: 'Archivo Narrow', sans-serif;
  --font-numeric: 'IBM Plex Mono', monospace;   /* also pace-note style text, uppercase */
  --radius-card: 0;
  --radius-plate: 18px;
  --radius-button: 10px;
  --border-card: 3px solid #141414;
  --shadow-button: 4px 4px 0 #141414;
}

/* Shared */
:root {
  --tap-target: 48px;  /* buttons and inputs: min-height */
  --space-1: 6px; --space-2: 12px; --space-3: 18px; --space-4: 24px; --space-5: 36px; --space-6: 64px;
}