/* Shared design tokens — loaded by both the webapp pages and the desktop app
   (app/windows/main.html pulls this in via ../../webapp/tokens.css, the same
   way it shares combobox.js / icons.js). Single source of truth for the
   palette values that must stay identical across both surfaces.

   Scope: the primary accent + button treatment and the race-list filter chips.
   Add more shared families as they come up. */
:root {
  /* Primary accent — one blue across both surfaces (the webapp blue won). */
  --accent: #5b8def;
  --accent-hover: #4a7de0;   /* darker accent for button :hover */
  /* Primary button — accent fill, white label (the webapp button style). */
  --btn-primary-text: #fff;

  /* Text ramp — brightest (body) to faintest (disabled/hints). */
  --text: #e0e0e0;
  --text-secondary: #ccc;
  --text-tertiary: #aaa;  /* muted-but-readable: nav links, list meta */
  --text-dim: #888;
  --text-muted: #666;
  --text-faint: #555;

  /* Webapp surface ramp — kept neutral-grey (the app's blue-tinted equivalents
     live in app/windows/main.css). Variabilized so a future grey<->blue unify is
     a one-place edit right here. */
  --bg-page: #1a1a1e;     /* body / page background */
  --bg-card: #22222a;     /* cards, panels, modals */
  --bg-input: #25252a;    /* form fields, link boxes */
  --bg-sunken: #1e1e26;   /* inset sections (e.g. passkey block) */
  --bg-hover: #2a2a32;    /* hovered surfaces */

  /* Borders — webapp greys. --border is the resting edge (cards, nav, rows,
     dividers); --border-strong is the hover/emphasis + modal edge. The app
     overrides --border to its blue #2a2a3e in app/windows/main.css, so these
     stay webapp-scoped until a future surface/border unify. */
  --border: #333;
  --border-strong: #444;

  /* Team / "official" gold — the team badge + official accents. */
  --team-gold: #f0c040;

  /* State colours. *-text = the light .error/.success message text; the bare
     --danger/--success = the stronger UI accents (delete buttons, live/online
     dots, unavailable indicators). Data-viz reds/greens (driver tags, heatmaps
     in field/colors.js & race/render) are intentionally NOT tokenized here. */
  --danger-text: #e88;
  --success-text: #8e8;
  --danger: #c44;
  --success: #5a5;

  /* Driver filter chip — neutral grey throughout (idle + active), so it never
     reads as a blue accent and stays apart from the gold Team-official chip. */
  --chip-driver-idle-border: #3a3a40;
  --chip-driver-idle-text: #7a7a82;
  --chip-driver-active-bg: rgba(255, 255, 255, 0.1);
  --chip-driver-active-border: #6a6a72;
  --chip-driver-active-text: #e0e0e0;

  /* Team-official filter chip — gold accent (idle + active). */
  --chip-official-border: #3a3320;
  --chip-official-text: #7a6f50;
  --chip-official-active-bg: #3a3320;
  --chip-official-active-border: #e8d27a;
  --chip-official-active-text: #e8d27a;

  /* ---- Radius + spacing SCALES ----
     The standard for NEW / refactored code. Existing border-radius / padding /
     margin / gap values are deliberately NOT retrofitted: unlike colours (which
     get re-themed and mapped cleanly), these are a drift continuum where a blanket
     sweep would shift layout for negligible benefit. Reach for these going forward
     so new UI is consistent and a future spacing/radius change is one-place. */
  --radius-sm: 4px;    /* buttons, inputs, small chips */
  --radius-md: 6px;    /* cards, panels */
  --radius-lg: 8px;    /* large cards, modals */
  --radius-xl: 10px;   /* hero / prominent panels */
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
}