/* verplombt. – Design-Tokens, unverändert aus docs/styleguide.md (Abschnitt „CSS-Variablen“).
   Im UI-Code nur die semantischen Tokens verwenden, nie rohe Hex-Werte. */
:root,
[data-theme="light"] {
  --anthrazit: #2b2f33;
  --anthrazit-700: #363b40;
  --anthrazit-900: #1e2124;
  --signalgelb: #f2c230;
  --signalgelb-hover: #ffd24d;
  --ocker: #7a5c00;
  --papier: #f4f1ea;
  --papier-200: #eae5da;
  --weiss: #ffffff;
  --linie-hell: #d9d3c6;
  --grau-500: #5e6368;
  --grau-300: #a8adb2;
  --gruen: #2e9e5b;
  --gruen-dunkel: #1f7a45;
  --gruen-hell: #3dba70;
  --rot: #d64545;
  --rot-dunkel: #b33030;
  --rot-hell: #f07070;
  --surface-page: var(--papier);
  --surface-card: var(--weiss);
  --surface-raised: var(--papier-200);
  --surface-inverse: var(--anthrazit);
  --text-primary: var(--anthrazit);
  --text-secondary: var(--grau-500);
  --text-on-inverse: var(--papier);
  --text-on-inverse-muted: #c9cccf;
  --border: var(--linie-hell);
  --border-strong: #8c8577;
  --accent: var(--signalgelb);
  --accent-hover: var(--signalgelb-hover);
  --on-accent: var(--anthrazit);
  --accent-text: var(--ocker);
  --status-ok: var(--gruen);
  --status-ok-text: var(--gruen-dunkel);
  --status-ok-fill: var(--gruen-dunkel);
  --on-status-ok: var(--weiss);
  --status-broken: var(--rot);
  --status-broken-text: var(--rot-dunkel);
  --status-progress: var(--signalgelb);
  --status-progress-text: var(--ocker);
  --focus-ring: var(--anthrazit);
}

[data-theme="dark"] {
  --surface-page: var(--anthrazit-900);
  --surface-card: var(--anthrazit);
  --surface-raised: var(--anthrazit-700);
  --surface-inverse: var(--anthrazit-700);
  --text-primary: var(--papier);
  --text-secondary: var(--grau-300);
  --border: #4a5056;
  --border-strong: #858b91;
  --accent-text: var(--signalgelb);
  --status-ok: var(--gruen-hell);
  --status-ok-text: var(--gruen-hell);
  --status-ok-fill: var(--gruen-hell);
  --on-status-ok: var(--anthrazit-900);
  --status-broken: var(--rot-hell);
  --status-broken-text: var(--rot-hell);
  --status-progress-text: var(--signalgelb);
  --focus-ring: var(--signalgelb);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: var(--anthrazit-900);
    --surface-card: var(--anthrazit);
    --surface-raised: var(--anthrazit-700);
    --surface-inverse: var(--anthrazit-700);
    --text-primary: var(--papier);
    --text-secondary: var(--grau-300);
    --border: #4a5056;
    --border-strong: #858b91;
    --accent-text: var(--signalgelb);
    --status-ok: var(--gruen-hell);
    --status-ok-text: var(--gruen-hell);
    --status-ok-fill: var(--gruen-hell);
    --on-status-ok: var(--anthrazit-900);
    --status-broken: var(--rot-hell);
    --status-broken-text: var(--rot-hell);
    --status-progress-text: var(--signalgelb);
    --focus-ring: var(--signalgelb);
  }
}

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-18: 72px;
  --space-24: 96px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 26px;
  --radius-full: 999px;
  --tap-min: 48px;
  --tap-check: 56px;
  --dot-sm: 12px;
  --dot-lg: 16px;
  --content-max: 1120px;
  --app-max: 560px;
  --shadow-device: 0 30px 60px rgba(0,0,0,0.35);
}