/* ==========================================================================
   Kartbahn Lyss · Event-Seite — Design-Tokens
   Light (Standard) + Dark via prefers-color-scheme UND [data-theme].
   Erzwingen:  <html data-theme="light">  oder  <html data-theme="dark">
   Event-Charakter: <body data-event="night-gp"> bzw. "kappelen-trophy"
   Alle Komponenten referenzieren NUR diese Variablen. Doku: /DESIGN.md
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---------- Marke (aus Kappelen-Trophy-Logo) ---------- */
  --brand-red: #e1001a;          /* Logo-Rot, nur Flächen/Marke */
  --brand-navy: #262a7a;         /* Logo-Navy "TROPHY" */
  --brand-navy-ink: #b8bcff;     /* Text auf Navy-Fläche (6.9:1) */

  /* ---------- Typografie ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "Segoe UI", Roboto, Arial, system-ui, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* nur Code/Debug */

  /* Grössen (iOS Text Styles, rem-basiert → Dynamic-Type-freundlich) */
  --fs-caption: 0.75rem;     /* 12 – Achsen, Meta */
  --fs-footnote: 0.8125rem;  /* 13 – Sublines, Tabellen-Header */
  --fs-sub: 0.9375rem;       /* 15 – Zellen, Rows */
  --fs-body: 1.0625rem;      /* 17 – iOS Body */
  --fs-title3: 1.25rem;      /* 20 – Card-Titel */
  --fs-title2: 1.375rem;     /* 22 */
  --fs-title1: 1.75rem;      /* 28 – Seitentitel */
  --fs-large: 2.125rem;      /* 34 – iOS Large Title */
  --fs-display: clamp(2.5rem, 9vw, 4.5rem); /* Hero-Eventname / Live-Uhr */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;           /* nur Race-Zahlen (.race-num) & Hero */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.47;           /* 17/25 */
  --tracking-display: -0.025em;
  --tracking-title: -0.015em;
  --race-slant: -8deg;       /* Kursiv-Neigung wie Logo-Wortmarke */

  /* ---------- Abstände (4er-Raster) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* Seitenrand Handy, Row-Padding */
  --space-5: 20px;   /* Seitenrand >= 600px */
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  --gutter: var(--space-4);
  --container: 1080px;
  --container-narrow: 720px;
  --header-h: 52px;
  --tap: 44px;                /* min. Touch-Target */
  --row-h: 52px;

  /* Safe-Areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* ---------- Radien ---------- */
  --radius-xs: 4px;    /* Balken, Plate */
  --radius-sm: 8px;    /* Chips, Inputs, Segment */
  --radius-md: 12px;   /* Cards, Inset-Listen (iOS) */
  --radius-lg: 20px;   /* Hero, Sheets */
  --radius-pill: 999px;

  /* ---------- Bewegung ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  --z-header: 50;
  --z-tooltip: 60;
  --z-overlay: 80;

  /* ---------- Farben LIGHT ---------- */
  --bg: #f2f2f7;                 /* iOS grouped background */
  --bg-elevated: #ffffff;
  --surface: #ffffff;            /* Cards, Inset-Listen */
  --surface-2: #f2f2f7;          /* Wells innerhalb Cards */
  --surface-3: #e5e5ea;          /* Segment-Track, Skeleton */
  --surface-pressed: #e8e8ed;
  --header-bg: rgba(242, 242, 247, 0.78);

  --ink: #111114;                /* Primärtext */
  --ink-2: #5c5c66;              /* Sekundär 5.9:1 auf --bg */
  --ink-3: #6b6b75;              /* Tertiär 4.7:1 auf --bg */
  --ink-inverse: #ffffff;

  --separator: rgba(60, 60, 67, 0.16);
  --separator-strong: rgba(60, 60, 67, 0.29);
  --control-border: rgba(60, 60, 67, 0.24);

  --accent: #d0021b;             /* Rot, Text-tauglich 5.7:1 auf Weiss */
  --accent-hover: #b00017;
  --accent-ink: #ffffff;         /* Text auf Akzentfläche */
  --accent-tint: #fde8ea;
  --accent-tint-ink: #8a0012;
  --focus: #0a66d6;              /* Fokusring bewusst blau ≠ Live-Rot */

  /* Status */
  --live: #d0021b;
  --live-tint: #fde8ea;
  --live-ink: #8a0012;
  --final: #157a3a;
  --final-tint: #ddf5e4;
  --final-ink: #0b4a22;
  --upcoming: #5c5c66;
  --upcoming-tint: #e9e9ef;
  --upcoming-ink: #3a3a42;
  --warn-tint: #fff4d6;
  --warn-ink: #7a4b00;

  /* Podium (Pos 1–3, nur kleine Marken) */
  --gold: #b8860b;
  --silver: #8a8f98;
  --bronze: #a0522d;
  /* als Ziffern-/Textfarbe (≥ 4.5:1 auf Weiss) */
  --gold-ink: #8a6500;
  --silver-ink: #5f6368;
  --bronze-ink: #8f4524;

  /* Kategorien (bis 6) — solid = Linie/Punkt, tint+ink = Chip */
  --cat-1: #0062cc; --cat-1-tint: #e2efff; --cat-1-ink: #00428a;  /* blau   */
  --cat-2: #b4470a; --cat-2-tint: #fdebdc; --cat-2-ink: #7a2f05;  /* orange */
  --cat-3: #157a3a; --cat-3-tint: #ddf5e4; --cat-3-ink: #0b4a22;  /* grün   */
  --cat-4: #0b7285; --cat-4-tint: #dcf3f6; --cat-4-ink: #064b57;  /* petrol */
  --cat-5: #b5175f; --cat-5-tint: #fce4ef; --cat-5-ink: #7a0f40;  /* magenta*/
  --cat-6: #8a6100; --cat-6-tint: #fbf0d2; --cat-6-ink: #5c4000;  /* senf   */

  /* Charts */
  --chart-grid: rgba(60, 60, 67, 0.12);
  --chart-axis: rgba(60, 60, 67, 0.36);
  --chart-tick: var(--ink-3);
  --chart-muted: #c7c7cc;        /* Kontext-Serien grau */

  /* Schatten: nur für Schwebendes (Tooltip, Header beim Scrollen) */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);

  /* Hero-Flächen je Event */
  --hero-bg: var(--brand-navy);
  --hero-ink: #ffffff;
  --hero-ink-2: var(--brand-navy-ink);
}

/* ---------- Farben DARK (Systemeinstellung) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-elevated: #1c1c1e;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --surface-3: #3a3a3c;
    --surface-pressed: #2c2c2e;
    --header-bg: rgba(0, 0, 0, 0.72);

    --ink: #f5f5f7;
    --ink-2: #a1a1a8;
    --ink-3: #929298;
    --ink-inverse: #000000;

    --separator: rgba(84, 84, 88, 0.55);
    --separator-strong: rgba(84, 84, 88, 0.85);
    --control-border: rgba(120, 120, 128, 0.5);

    --accent: #ff4d5e;
    --accent-hover: #ff6b79;
    --accent-ink: #000000;
    --accent-tint: rgba(255, 77, 94, 0.18);
    --accent-tint-ink: #ff8a96;
    --focus: #4da3ff;

    --live: #ff4d5e;
    --live-tint: rgba(255, 77, 94, 0.18);
    --live-ink: #ff8a96;
    --final: #3dd068;
    --final-tint: rgba(61, 208, 104, 0.16);
    --final-ink: #7ce39a;
    --upcoming: #a1a1a8;
    --upcoming-tint: rgba(142, 142, 147, 0.2);
    --upcoming-ink: #c7c7cc;
    --warn-tint: rgba(242, 194, 48, 0.16);
    --warn-ink: #f2c230;

    --gold: #f2c230;
    --silver: #c7c9d1;
    --bronze: #e08a5b;
    --gold-ink: #f2c230;
    --silver-ink: #c7c9d1;
    --bronze-ink: #e08a5b;

    --cat-1: #4da3ff; --cat-1-tint: rgba(77, 163, 255, 0.18);  --cat-1-ink: #8cc4ff;
    --cat-2: #ff9147; --cat-2-tint: rgba(255, 145, 71, 0.18);  --cat-2-ink: #ffb47f;
    --cat-3: #3dd068; --cat-3-tint: rgba(61, 208, 104, 0.16);  --cat-3-ink: #7ce39a;
    --cat-4: #2cc6db; --cat-4-tint: rgba(44, 198, 219, 0.16);  --cat-4-ink: #7fdce8;
    --cat-5: #ff6bae; --cat-5-tint: rgba(255, 107, 174, 0.18); --cat-5-ink: #ff9ec9;
    --cat-6: #f2c230; --cat-6-tint: rgba(242, 194, 48, 0.16);  --cat-6-ink: #f5d36b;

    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-axis: rgba(255, 255, 255, 0.28);
    --chart-muted: #48484a;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.7);

    --hero-bg: #0b0b10;
    --hero-edge: rgba(255, 255, 255, 0.09);
    --hero-ink: #ffffff;
    --hero-ink-2: #a1a1a8;
  }
}

/* ---------- Farben DARK (manuell erzwungen) — identisch zum Block oben ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-elevated: #1c1c1e;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --surface-pressed: #2c2c2e;
  --header-bg: rgba(0, 0, 0, 0.72);

  --ink: #f5f5f7;
  --ink-2: #a1a1a8;
  --ink-3: #929298;
  --ink-inverse: #000000;

  --separator: rgba(84, 84, 88, 0.55);
  --separator-strong: rgba(84, 84, 88, 0.85);
  --control-border: rgba(120, 120, 128, 0.5);

  --accent: #ff4d5e;
  --accent-hover: #ff6b79;
  --accent-ink: #000000;
  --accent-tint: rgba(255, 77, 94, 0.18);
  --accent-tint-ink: #ff8a96;
  --focus: #4da3ff;

  --live: #ff4d5e;
  --live-tint: rgba(255, 77, 94, 0.18);
  --live-ink: #ff8a96;
  --final: #3dd068;
  --final-tint: rgba(61, 208, 104, 0.16);
  --final-ink: #7ce39a;
  --upcoming: #a1a1a8;
  --upcoming-tint: rgba(142, 142, 147, 0.2);
  --upcoming-ink: #c7c7cc;
  --warn-tint: rgba(242, 194, 48, 0.16);
  --warn-ink: #f2c230;

  --gold: #f2c230;
  --silver: #c7c9d1;
  --bronze: #e08a5b;
  --gold-ink: #f2c230;
  --silver-ink: #c7c9d1;
  --bronze-ink: #e08a5b;

  --cat-1: #4da3ff; --cat-1-tint: rgba(77, 163, 255, 0.18);  --cat-1-ink: #8cc4ff;
  --cat-2: #ff9147; --cat-2-tint: rgba(255, 145, 71, 0.18);  --cat-2-ink: #ffb47f;
  --cat-3: #3dd068; --cat-3-tint: rgba(61, 208, 104, 0.16);  --cat-3-ink: #7ce39a;
  --cat-4: #2cc6db; --cat-4-tint: rgba(44, 198, 219, 0.16);  --cat-4-ink: #7fdce8;
  --cat-5: #ff6bae; --cat-5-tint: rgba(255, 107, 174, 0.18); --cat-5-ink: #ff9ec9;
  --cat-6: #f2c230; --cat-6-tint: rgba(242, 194, 48, 0.16);  --cat-6-ink: #f5d36b;

  --chart-grid: rgba(255, 255, 255, 0.08);
  --chart-axis: rgba(255, 255, 255, 0.28);
  --chart-muted: #48484a;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.7);

  --hero-bg: #0b0b10;
  --hero-edge: rgba(255, 255, 255, 0.09);
  --hero-ink: #ffffff;
  --hero-ink-2: #a1a1a8;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- Event-Charakter ----------
   Night GP: Hero immer schwarz mit Flutlicht-Akzent, auch im Light-Mode. */
[data-event="night-gp"] {
  --hero-bg: #050507;
  --hero-ink: #ffffff;
  --hero-ink-2: #a1a1a8;
  --hero-glow: #ff4d5e;
}
[data-event="kappelen-trophy"] {
  --hero-bg: var(--brand-navy);
  --hero-ink: #ffffff;
  --hero-ink-2: var(--brand-navy-ink);
  --hero-glow: #ff4d5e;
}

@media (min-width: 600px) {
  :root { --gutter: var(--space-5); }
}