/* ==========================================================================
   TH-Racemanager Design Tokens — Karbon & Rennrot
   Single source of truth for CSS custom properties.
   Load BEFORE main.css and all other stylesheets.
   ========================================================================== */

:root {
  /* ── Palette (Karbon & Rennrot) ────────────────────────────────────────── */
  /* Akzent in zwei Stufen: --color-accent ist Schrift- und Linienrot (AA auf
     App- und Kartengrund, der Smoke-Test prüft das), --color-accent-fill das
     satte Flächenrot; Schrift auf dieser Fläche nimmt --color-on-accent. */
  --week-plan-tint: color-mix(in srgb, var(--color-accent-fill) 8%, transparent);
  --week-plan-accent-shadow: color-mix(in srgb, var(--color-accent-fill) 55%, transparent);
  --color-midnight: #0b0d10;
  --color-midnight-card: #14171c;
  /* Schrift auf fest dunklen Flächen; der Dark-Akzent und -Grauton lesen hier ab */
  --on-dark-accent: #ff4d45;
  --on-dark-muted: #8e95a5;
  --on-dark-blue: #4da3ff; /* #007aff hielt auf der Karbon-Karte nur 4.47:1 */
  --color-accent: var(--on-dark-accent);
  --color-accent-hover: #ff6d66;
  --color-accent-fill: #e10600;
  --color-on-accent: #ffffff;
  --color-pure-white: #ffffff;
  --color-text-muted: var(--on-dark-muted);
  --color-accent-text: var(--color-accent);
  --footer-link-color: var(--color-accent);

  /* ── Comic-Noir Kontrastfarben ─────────────────────────────────────────── */
  --color-ink-black: #020203;
  --color-halftone-gray: color-mix(in srgb, var(--color-accent-fill) 5%, transparent);
  /* Fehler, Ausfall, Gefahr: Orange-Rot statt Rennrot, damit Signal und Akzent
     nicht verwechselbar sind; Schrift auf dieser Fläche ist dunkel (--color-ink-black). */
  --color-comic-red: #ff7a3d;
  --color-comic-green: #34c759;
  --color-comic-blue: #007aff;
  --color-comic-yellow: #ffd200;
  /* Signalfarben als Text: im Dark-Theme meist gleich der Fläche (>= 4.5:1 auf --color-midnight und --color-midnight-card),
     im Light-Theme dunkler (siehe unten). Flächen bleiben bei --color-comic-*. */
  --color-comic-red-text: var(--color-comic-red);
  --color-comic-green-text: var(--color-comic-green);
  --color-comic-blue-text: var(--on-dark-blue);
  --color-comic-yellow-text: var(--color-comic-yellow);

  /* ── Comic Eigenschaften ───────────────────────────────────────────────── */
  --comic-outline: 3px solid var(--color-ink-black);
  --comic-shadow: 6px 6px 0px var(--color-ink-black);
  --comic-shadow-hover: 3px 3px 0px var(--color-ink-black);
  --comic-border-radius: 12px;

  /* ── Typography ────────────────────────────────────────────────────────── */
  /* Überschriften: kräftige Grotesk aus Systemschriften, keine Schriftdatei */
  --font-headline: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  --text-xs: 0.75rem;
  --text-xs-lh: 1.4;
  --text-sm: 0.8125rem;
  --text-sm-lh: 1.4;
  --text-base: 0.95rem;
  --text-base-lh: 1.6;
  --text-lg: 1.125rem;
  --text-lg-lh: 1.5;
  --text-xl: 1.25rem;
  --text-xl-lh: 1.4;
  --text-2xl: 1.7rem;
  --text-2xl-lh: 1.2;
  --text-3xl: 2.2rem;
  --text-3xl-lh: 1.1;
  --text-4xl: 3rem;
  --text-4xl-lh: 1;

  /* Typografie-Skala (TH Noir Editorial — mapped to tokens above) */
  --type-h1: var(--text-3xl, 2.2rem);
  --type-h2: 1.75rem;
  --type-h3: var(--text-xl, 1.25rem);
  --type-screen-title: 1.75rem;
  --type-section-title: var(--text-lg, 1.125rem);
  --type-weight-headline: 800;
  --type-line-height-headline: var(--text-3xl-lh, 1.25);
  --type-letter-spacing-headline: -0.01em;
  --type-letter-spacing-caps: 0.04em;

  /* ── Spacing (4px base grid) ───────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  /* Flächen: Karten und Kopfkacheln, Light-Werte unten */
  --surface-card: rgba(20, 23, 28, 0.72);
  --surface-card-border: rgba(160, 170, 190, 0.12);
  --surface-raised-top: rgba(20, 23, 28, 0.95);
  --surface-raised-bottom: rgba(11, 13, 16, 0.88);
  --surface-chart: rgba(11, 13, 16, 0.6);
  --surface-pill: rgba(2, 2, 3, 0.72);
  --surface-inset: rgba(2, 2, 3, 0.45);
  /* Gemeinsame F&E-Karte: deckende Flaechen fuer Zustand und Technikdetails. */
  --fe-card-radius: var(--comic-border-radius);
  --fe-status-border: var(--surface-card-border);
  --fe-progress-height: var(--space-2);
  --bottom-nav-height: 3.75rem;
  /* Seitenleiste ab Desktop-Breite (Breakpoint: @media in main.css und layout_dashboard.css) */
  --sidebar-width: 14rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;

  /* ── Animation ─────────────────────────────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;

  /* ── Z-Index Scale ─────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-raised: 1;
  --z-overlay: 2;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-fixed: 1000;
  --z-noise: 9999;
  --z-wipe: 99999;

  /* ── Race Visual State (HUD chips, atmosphere, track overlays) ─────────── */
  /* Flag / session state — maps to race-state-green | safety-car | vsc */
  --race-state-green-bg: rgba(52, 199, 89, 0.15);
  --race-state-green-border: var(--color-comic-green);
  --race-state-green-text: var(--color-comic-green);
  --race-state-green-glow: rgba(52, 199, 89, 0.35);

  --race-state-safety-car-bg: rgba(255, 210, 0, 0.18);
  --race-state-safety-car-border: var(--color-comic-yellow);
  --race-state-safety-car-text: var(--color-comic-yellow);
  --race-state-safety-car-glow: rgba(255, 210, 0, 0.4);

  --race-state-vsc-bg: rgba(255, 170, 0, 0.15);
  --race-state-vsc-border: #ffaa00;
  --race-state-vsc-text: #ffaa00;
  --race-state-vsc-glow: rgba(255, 170, 0, 0.35);

  /* Weather atmosphere — maps to race-weather-dry | rain | heavy */
  --race-weather-dry-bg: color-mix(in srgb, var(--color-accent-fill) 8%, transparent);
  --race-weather-dry-accent: var(--color-accent);
  --race-weather-dry-chip: var(--color-accent);

  --race-weather-rain-bg: rgba(0, 122, 255, 0.12);
  --race-weather-rain-accent: var(--color-comic-blue);
  --race-weather-rain-chip: var(--color-comic-blue);

  --race-weather-heavy-bg: rgba(0, 80, 180, 0.18);
  --race-weather-heavy-accent: #0056d6;
  --race-weather-heavy-chip: #4da3ff;

  /* Track wetness surfaces (0 → soaked) */
  --race-wetness-dry: color-mix(in srgb, var(--color-accent-fill) 6%, transparent);
  --race-wetness-damp: rgba(0, 122, 255, 0.1);
  --race-wetness-wet: rgba(0, 122, 255, 0.22);
  --race-wetness-soaked: rgba(0, 80, 180, 0.32);

  /* Canvas2D Plus broadcast camera and marker accents */
  --race-camera-border: color-mix(in srgb, var(--color-accent-fill) 28%, transparent);
  --race-camera-glass: rgba(5, 6, 11, 0.38);
  --race-camera-vignette: rgba(0, 0, 0, 0.5);
  --race-marker-player: var(--color-accent);
  --race-marker-rival: #e6ebfd;
  --race-marker-incident: var(--color-comic-red);
  --race-marker-sector: var(--color-comic-blue);

  /* ── CTA Hierarchy (primary / secondary / disabled / locked) ───────────── */
  --cta-primary-bg: var(--color-accent-fill);
  --cta-primary-bg-hover: #c00500;
  --cta-primary-text: var(--color-on-accent);
  --cta-primary-shadow: color-mix(in srgb, var(--color-accent-fill) 39%, transparent);
  --cta-primary-shadow-hover: color-mix(in srgb, var(--color-accent-fill) 50%, transparent);

  --cta-secondary-bg: var(--color-midnight-card);
  --cta-secondary-bg-hover: rgba(255, 255, 255, 0.05);
  --cta-secondary-text: var(--color-pure-white);
  --cta-secondary-border: rgba(255, 255, 255, 0.12);
  --cta-secondary-shadow: rgba(0, 0, 0, 0.25);

  /* Composite shorthand tokens (required by sprint spec) */
  --cta-disabled: var(--color-text-muted);
  --cta-disabled-bg: var(--color-midnight-card);
  --cta-disabled-text: var(--color-text-muted);
  --cta-disabled-border: rgba(255, 255, 255, 0.06);
  --cta-disabled-opacity: 0.55;
  --cta-disabled-shadow: none;

  --cta-locked: var(--color-accent);
  --cta-locked-bg: color-mix(in srgb, var(--color-accent-fill) 25%, transparent);
  --cta-locked-text: var(--color-accent);
  --cta-locked-border: color-mix(in srgb, var(--color-accent-fill) 45%, transparent);
  --cta-locked-icon: var(--color-accent);

  /* Cost badge on CTAs (canAfford / resource cost) */
  --cta-cost-badge-bg: var(--color-accent-fill);
  --cta-cost-badge-text: var(--color-on-accent);
  --cta-cost-badge-border: var(--color-ink-black);
  --cta-cost-badge-alt-bg: var(--color-comic-blue);
  --cta-cost-badge-alt-text: #ffffff;

  /* ── Focus Ring (WCAG 2.4.7 — consumed by main/theme_a11y) ──────────── */
  --focus-ring-color: var(--color-accent);
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
  --focus-ring-shadow: 0 0 0 1px var(--color-ink-black),
                       0 0 0 5px color-mix(in srgb, var(--color-accent-fill) 35%, transparent);

  /* ── Blueprint, Sammelkarten, Finanzen (Layout-Erweiterungen) ────────────── */
  /* Blueprint / CAD Styles (Dark Theme - Standard) */
  --bp-bg: #030814;
  --bp-grid-color: rgba(0, 240, 255, 0.07);
  --bp-grid-subcolor: rgba(0, 240, 255, 0.03);
  --bp-line-color: rgba(0, 240, 255, 0.4);
  --bp-line-glow: rgba(0, 240, 255, 0.15);
  --bp-accent-cyan: #00f0ff;
  --bp-accent-blue: #0072ff;
  --bp-card-bg: rgba(6, 17, 34, 0.85);
  --bp-card-border: rgba(0, 240, 255, 0.5);
  --bp-card-glow: 0px 8px 32px rgba(0, 240, 255, 0.1);
  --bp-text-main: #e2e8f0;

  /* Collectible Trading Cards (Dark Theme - Standard) */
  --cc-bg-legendary: linear-gradient(135deg, #14171c 0%, #0b0d10 100%);
  --cc-border-legendary: #d4a54a;
  --cc-border-inner-legendary: rgba(212, 165, 74, 0.25);
  --cc-glow-legendary: 0px 0px 25px rgba(212, 165, 74, 0.25);
  --cc-shimmer: linear-gradient(135deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 70%);

  --cc-bg-epic: linear-gradient(135deg, #0e111a 0%, #050609 100%);
  --cc-border-epic: #9b59d4;
  --cc-border-inner-epic: rgba(155, 89, 212, 0.25);
  --cc-glow-epic: 0px 0px 25px rgba(155, 89, 212, 0.25);

  --cc-bg-rare: linear-gradient(135deg, #0d1219 0%, #060810 100%);
  --cc-border-rare: #5289e6;
  --cc-border-inner-rare: rgba(82, 137, 230, 0.25);
  --cc-glow-rare: 0px 0px 20px rgba(82, 137, 230, 0.2);

  --cc-bg-common: linear-gradient(135deg, #111318 0%, #08090c 100%);
  --cc-border-common: #6b7280;
  --cc-border-inner-common: rgba(107, 114, 128, 0.25);
  --cc-glow-common: 0px 0px 12px rgba(107, 114, 128, 0.15);

  --rarity-badge-legendary: "LEGENDÄR";
  --rarity-badge-epic: "EPISCH";
  --rarity-badge-rare: "SELTEN";
  --rarity-badge-common: "STANDARD";

  /* Finance screen */
  --fin-grid-color: color-mix(in srgb, var(--color-accent-fill) 8%, transparent);
  --fin-grid-subcolor: color-mix(in srgb, var(--color-accent-fill) 3%, transparent);
  --fin-terminal-green: #00ff41;
  --fin-terminal-bg: #0a0f0a;
  --fin-cost-drivers: #d4a54a;
  --fin-cost-staff: #5289e6;
  --fin-cost-factory: #e74c3c;
  --fin-cost-interest: #ff6b6b;

  /* ── Rennuebertragung (TV-Broadcast) ─────────────────────────────────────── */
  --race-broadcast-red: var(--color-accent-fill);
  --race-gauge-yellow: #ffaa00;
  --race-gauge-cyan: #00f0ff;
  /* Rennansicht nach Vorlage: Kacheln, Karten, Reifenkreise. Kachelflaeche
     deckend, damit der Kontrast der Werte messbar bleibt (Smoke-Test). */
  --race-tile-bg: var(--color-midnight);
  --race-tile-text: var(--color-pure-white);
  --race-tile-radius: 8px;
  /* Fest dunkle Renn-Flaeche (Rennleitung), in beiden Themes gleich */
  --race-surface-dark: #05060b;
  --race-card-radius: 12px;
  --race-live-dot: 0.625rem;
  --race-tyre-dot: 1.375rem;
  /* Mindestbreite der HUD-Chips im Handy-Raster: drei Spalten bei 390 px */
  --race-hud-chip-min: 6.5rem;
  --race-grid-min-height: 30rem;
  --race-chart-height: 9.5rem;
  --race-chart-height-compact: 7.5rem;
  /* Dashboard, Saisonbilanz: Linie des Konstrukteursrangs je Rennen */
  --dashboard-trend-height: 7.5rem;
  --race-tyre-soft: var(--color-comic-red);
  --race-tyre-medium: var(--race-gauge-yellow);
  --race-tyre-hard: #ffffff;
  --race-tyre-inter: var(--color-comic-green);
  --race-tyre-wet: var(--race-gauge-cyan);
  --race-board-player-bg: color-mix(in srgb, var(--color-accent-fill) 22%, transparent);
  /* Gelb als Schrift (Grip, Boxenfenster); im Light-Theme dunkler */
  --race-signal-yellow-text: var(--race-gauge-yellow);
  /* Zeitentafel: Ziffern gleich breit (DM Sans hat kein tnum), Platzwechsel */
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --race-board-team-bar: 0.25rem;
  --race-board-cell-y: 0.0625rem;
  --race-board-gain-text: #6fdc8c;
  --race-board-loss-text: var(--color-comic-red-text);
  --race-board-gain-bg: rgba(52, 199, 89, 0.22);
  --race-board-loss-bg: color-mix(in srgb, var(--color-comic-red) 20%, transparent);
  --race-board-dnf-text: var(--color-comic-red-text);

  /* ── Atmosphaere (Glows, Timings) ────────────────────────────────────────── */
  /* Abgeleitete Atmosphären-Tokens (Akzent via --color-accent) */
  --atm-accent-glow: color-mix(in srgb, var(--color-accent) 25%, transparent);
  --atm-accent-subtle: color-mix(in srgb, var(--color-accent) 6%, transparent);
  --atm-accent-highlight: color-mix(in srgb, var(--color-accent) 60%, transparent);
  --atm-cyan-glow: rgba(0, 240, 255, 0.22);
  --atm-race-red-glow: rgba(255, 59, 48, 0.18);
  --atm-race-red-subtle: rgba(255, 59, 48, 0.05);
  --atm-midnight: #0b0d10;
  --atm-card-bg: rgba(255, 255, 255, 0.025);
  --atm-card-border: rgba(255, 255, 255, 0.06);

  /* Übergänge & Timings */
  --transition-atm: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-atm: 0.6s;

  /* ── Referenz-Aliase (Transitions) ───────────────────────────────────────── */
  --accent-primary: var(--color-accent);
  --accent-secondary: #0b0d10;
  --font-heading: var(--font-headline);
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ── Light Theme Overrides ───────────────────────────────────────────────── */
[data-theme="light"] {
  --color-midnight: #f2f3f5;
  --color-midnight-card: #ffffff;
  /* Karten hell: die dunkle Glasfläche wurde auf hellem Grund zu Mittelgrau, und
     jede dunkle Schrift darauf lag unter 2:1. */
  --surface-card: rgba(255, 255, 255, 0.92);
  --surface-card-border: rgba(15, 23, 42, 0.12);
  --surface-raised-top: #ffffff;
  --surface-raised-bottom: #f7f8fa;
  --surface-chart: rgba(255, 255, 255, 0.92);
  --surface-pill: #ffffff;
  --surface-inset: rgba(8, 9, 13, 0.05);
  /* Rot als Schrift auf hellem Grund dunkler; die Fläche bleibt --color-accent-fill */
  --color-accent: #c20500;
  --color-accent-hover: #9e0400;
  --color-pure-white: #0b0d10;
  --color-text-muted: #4e5361; /* Kontrasterhöhung für sekundären Text im Light-Theme (WCAG AA) */
  --color-halftone-gray: color-mix(in srgb, var(--color-accent-fill) 8%, transparent);
  --color-ink-black: #020203;
  /* Signalfarben als Text: >= 4.5:1 auf --color-midnight und --color-midnight-card (WCAG AA) */
  --color-comic-red-text: #b33a00;
  --color-comic-green-text: #137333;
  --color-comic-blue-text: #1d4ed8;
  --color-comic-yellow-text: #8a5300;

  /* Race state — higher contrast on light surfaces */
  --race-state-green-bg: rgba(52, 199, 89, 0.12);
  --race-state-safety-car-bg: rgba(255, 210, 0, 0.22);
  --race-state-vsc-bg: rgba(255, 170, 0, 0.18);
  --race-state-green-text: var(--color-comic-green-text);
  --race-state-safety-car-text: var(--color-comic-yellow-text);
  --race-state-vsc-text: var(--color-comic-yellow-text);
  --race-weather-dry-bg: color-mix(in srgb, var(--color-accent-fill) 10%, transparent);
  --race-weather-rain-bg: rgba(0, 122, 255, 0.1);
  --race-weather-heavy-bg: rgba(0, 80, 180, 0.14);
  --race-wetness-dry: color-mix(in srgb, var(--color-accent-fill) 8%, transparent);
  --race-wetness-damp: rgba(0, 122, 255, 0.08);
  --race-wetness-wet: rgba(0, 122, 255, 0.16);
  --race-wetness-soaked: rgba(0, 80, 180, 0.24);
  --race-camera-border: color-mix(in srgb, var(--color-accent-fill) 32%, transparent);
  --race-camera-glass: rgba(255, 255, 255, 0.32);
  --race-camera-vignette: rgba(8, 9, 13, 0.18);
  --race-marker-player: var(--color-accent);
  --race-marker-rival: #1e293b;
  --race-marker-incident: var(--color-comic-red-text);
  --race-marker-sector: #1d4ed8;
  --race-board-gain-text: #1b6e33;
  --race-board-player-bg: color-mix(in srgb, var(--color-accent-fill) 16%, transparent);
  --race-signal-yellow-text: var(--color-comic-yellow-text);
  --race-board-gain-bg: rgba(52, 199, 89, 0.18);
  --race-board-loss-bg: color-mix(in srgb, var(--color-comic-red) 14%, transparent);

  /* CTA hierarchy */
  --cta-secondary-bg-hover: rgba(8, 9, 13, 0.06);
  --cta-secondary-border: rgba(8, 9, 13, 0.12);
  --cta-disabled-border: rgba(8, 9, 13, 0.08);
  --cta-locked-bg: color-mix(in srgb, var(--color-accent-fill) 18%, transparent);
  --cta-locked-border: color-mix(in srgb, var(--color-accent-fill) 50%, transparent);

  /* ── Blueprint & Sammelkarten (Light) ────────────────────────────────────── */
  /* Blueprint / CAD Styles (Light Theme) */
  --bp-bg: #f4f7fb;
  --bp-grid-color: rgba(37, 99, 235, 0.08);
  --bp-grid-subcolor: rgba(37, 99, 235, 0.03);
  --bp-line-color: rgba(37, 99, 235, 0.3);
  --bp-line-glow: rgba(37, 99, 235, 0.08);
  --bp-accent-cyan: #2563eb;
  --bp-accent-blue: #1d4ed8;
  --bp-card-bg: rgba(255, 255, 255, 0.95);
  --bp-card-border: rgba(37, 99, 235, 0.4);
  --bp-card-glow: 0px 8px 30px rgba(37, 99, 235, 0.06);
  --bp-text-main: #1e293b;

  /* Collectible Trading Cards (Light Theme) */
  --cc-bg-legendary: linear-gradient(135deg, #fcfcf9 0%, #f4f5f1 100%);
  --cc-border-legendary: #b3862b;
  --cc-border-inner-legendary: rgba(179, 134, 43, 0.3);
  --cc-glow-legendary: 0px 0px 20px rgba(179, 134, 43, 0.15);
  --cc-shimmer: linear-gradient(135deg, rgba(255,255,255,0) 30%, rgba(212, 165, 74, 0.08) 50%, rgba(255,255,255,0) 70%);

  --cc-bg-epic: linear-gradient(135deg, #f7f4fc 0%, #ede8f7 100%);
  --cc-border-epic: #7c3aed;
  --cc-border-inner-epic: rgba(124, 58, 237, 0.3);
  --cc-glow-epic: 0px 0px 20px rgba(124, 58, 237, 0.15);

  --cc-bg-rare: linear-gradient(135deg, #f7f9fc 0%, #edf1f7 100%);
  --cc-border-rare: #3b74d1;
  --cc-border-inner-rare: rgba(59, 116, 209, 0.3);
  --cc-glow-rare: 0px 0px 18px rgba(59, 116, 209, 0.12);

  --cc-bg-common: linear-gradient(135deg, #f8f9fa 0%, #eef0f2 100%);
  --cc-border-common: #9ca3af;
  --cc-border-inner-common: rgba(156, 163, 175, 0.35);
  --cc-glow-common: 0px 0px 12px rgba(156, 163, 175, 0.1);

  /* ── Referenz-Aliase (Light) ─────────────────────────────────────────────── */
  --accent-secondary: #f2f3f5;
}

/* ── Fest dunkle Flächen im Light-Theme ──────────────────────────────────── */
/* Renn-HUD, Streckenbild, angeheftete Rennleitung und Telemetrie-Diagramme
   bleiben auch im Light-Theme dunkel. Ihre Schrift nimmt darum hier die
   Dark-Werte; abgeleitete Tokens (--race-weather-dry-chip) werden mit neu
   gesetzt, weil sie an :root schon aufgelöst sind. */
[data-theme="light"] .race-control-hud,
[data-theme="light"] .track-canvas-container,
[data-theme="light"] .race-director-pinned,
[data-theme="light"] .race-chart-slot {
  --color-accent: var(--on-dark-accent);
  --color-text-muted: var(--on-dark-muted);
  --color-pure-white: #ffffff;
  --color-comic-red-text: var(--color-comic-red);
  --color-comic-green-text: var(--color-comic-green);
  --color-comic-blue-text: var(--on-dark-blue);
  --color-comic-yellow-text: var(--color-comic-yellow);
  --race-state-green-text: var(--color-comic-green);
  --race-state-safety-car-text: var(--color-comic-yellow);
  --race-state-vsc-text: var(--race-gauge-yellow);
  --race-signal-yellow-text: var(--race-gauge-yellow);
  --race-weather-dry-chip: var(--on-dark-accent);
}