/* ===================== Pistop – Design-Tokens (Umbau PISTOP, Schritt 1) =====================
   Dunkel ist Standard, „Sonne“ für Tageslicht an der Strecke. Umschalten über <html data-theme="dark|sun|system">.
   Alle Farben nur über diese Tokens. Die älteren Namen (--bg, --border, --muted, --bar) bleiben als Verweise,
   damit vorhandene Bausteine ohne Änderung mitgehen. */
@font-face { font-family: "Michroma"; src: url("fonts/Michroma-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGroteskwght.woff") format("woff"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }

:root, :root[data-theme="dark"] {
  --bg-1: #0E1117; --bg-2: #0B1430;          /* Hintergrund-Verlauf 165° */
  --nav: #0A0D16;                             /* Tab-Leiste / Seitenleiste */
  --surface: #141A2B; --surface-2: #1C2438; --field: #0E1424;
  --line: #2A3350; --line-soft: #222B45;
  --field-border: #647091;                    /* Rahmen von Eingabefeldern: ≥ 3:1 gegen Feld und Fläche (WCAG 1.4.11) */
  --text: #F4F6FA; --text-2: #A7AFC2; --text-3: #8A93AA;
  --accent: #E6FF00; --on-accent: #0B0F1A;    /* einzige Aktionsfarbe */
  --warn: #FF7A1A; --warn-text: #FF9A4D;      /* Warnung, offline, abgelaufen */
  --ok: #4FD18B;                              /* synchron, gültig */
  --danger: #FF4D4D;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
  color-scheme: dark;
}
:root[data-theme="sun"] {                     /* Sonnenmodus für die Strecke */
  --bg-1: #EEF0F4; --bg-2: #EEF0F4; --nav: #FFFFFF;
  --surface: #FFFFFF; --surface-2: #F4F5F8; --field: #EEF0F4;
  --line: #C9CEDA; --line-soft: #E1E4EB; --field-border: #7D869E;
  --text: #0B1430; --text-2: #4A5470; --text-3: #4A5470;
  --accent: #0B1430; --on-accent: #E6FF00;    /* Knöpfe dunkel mit gelber Schrift */
  /* Zustandsfarben für helle Flächen (≥ 4,5:1 als Schrift, ≥ 3:1 als Fläche) – im Prompt nur für Dunkel festgelegt */
  --warn: #C2620F; --warn-text: #A84E09; --ok: #1E7A46; --danger: #C62828;
  --shadow: 0 1px 2px rgba(11, 20, 48, .05), 0 8px 24px rgba(11, 20, 48, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --bg-1: #EEF0F4; --bg-2: #EEF0F4; --nav: #FFFFFF;
    --surface: #FFFFFF; --surface-2: #F4F5F8; --field: #EEF0F4;
    --line: #C9CEDA; --line-soft: #E1E4EB; --field-border: #7D869E;
    --text: #0B1430; --text-2: #4A5470; --text-3: #4A5470;
    --accent: #0B1430; --on-accent: #E6FF00;
    --warn: #C2620F; --warn-text: #A84E09; --ok: #1E7A46; --danger: #C62828;
    --shadow: 0 1px 2px rgba(11, 20, 48, .05), 0 8px 24px rgba(11, 20, 48, .06);
    color-scheme: light;
  }
}
:root {
  /* Verweise auf die älteren Namen */
  --bg: var(--bg-1); --border: var(--line-soft); --muted: var(--text-2); --bar: var(--line);
  /* abgeleitete Flächen für Zustände (Text bleibt --text, Zustand zusätzlich über Symbol/Text) */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --warn-soft: color-mix(in srgb, var(--warn) 16%, var(--surface));
  --danger-soft: color-mix(in srgb, var(--danger) 15%, var(--surface));
  --ok-soft: color-mix(in srgb, var(--ok) 16%, var(--surface));
  /* Schrift: Michroma (Marke, Titel, Abschnitts-Labels), Space Grotesk (Text), IBM Plex Mono (Messwerte) – mit der App ausgeliefert */
  --display: "Michroma", "Space Grotesk", system-ui, sans-serif;
  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-15: 15px; --fs-17: 17px; --fs-22: 22px; --fs-28: 28px; --fs-40: 40px;
  /* 4er-Raster */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  /* Radien */
  --radius-s: 12px; --radius-m: 16px; --radius-l: 20px;
  --r-card: var(--radius-l); --r-tile: var(--radius-m); --r-field: var(--radius-s); --r-pill: 999px; --r-btn: var(--radius-m);
  /* Trefferfläche: 48 px (Handschuhe), Handschuh-Modus 56 px */
  --hit: 48px;
  --dur: 180ms;
}
:root[data-glove="1"] { --hit: 56px; }
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }