/* tokens.css – Design-Tokens. :root = Dark (Standard), body.light = Light.
   Ladereihenfolge: tokens → base → components → views.

   Farbe nur für Abweichung: danger = Fehler (Rahmen + Fläche), warn = braucht
   Aufmerksamkeit (linker Balken oder Text), ok/info nur als Punkt oder Text,
   nie als Fläche. --ok-soft, --info-soft und --warn-soft bleiben als Tokens
   definiert, werden aber in keiner Komponentenregel mehr als background
   verwendet (einzige Fläche: --danger-soft).

   Gefüllte Buttons nutzen --accent-strong/--danger-strong: weiße Schrift auf
   den Text-/Link-Farben --accent/--danger erreicht im Dark-Theme keine 4,5:1. */

:root {
  color-scheme: dark;

  --bg: #0b1020;
  --surface: #131a2e;
  --surface-2: #1a2340;
  --surface-3: #212b4d;
  --border: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.32);
  --text: #eef2ff;
  --muted: #9aa3b8;

  --accent: #3b82f6;
  --accent-hover: #5b9bff;
  --accent-soft: rgba(59, 130, 246, 0.16);
  --accent-strong: #2b6fe0;
  --on-accent: #ffffff;

  --ok: #34d399;
  --ok-text: #6ee7b7;
  --ok-soft: rgba(52, 211, 153, 0.14);

  --warn: #f59e0b;
  --warn-text: #fcd34d;
  --warn-soft: rgba(245, 158, 11, 0.16);

  --danger: #ef4444;
  --danger-text: #fca5a5;
  --danger-soft: rgba(239, 68, 68, 0.16);
  --danger-strong: #dc2626;

  --info: #60a5fa;
  --info-text: #93c5fd;
  --info-soft: rgba(96, 165, 250, 0.16);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.32);

  /* Abstände, Radien, Schrift */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;

  --space-panel: 20px;
  --space-content: 32px;
  --row-y: 10px;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;

  --dot: 8px;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Die einzigen Schriftstufen der Oberfläche */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-28: 28px;

  /* Die einzigen Schriftschnitte */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --motion: 150ms ease;

  /* Layout */
  --sidebar-w: 240px;
  --sidebar-rail-w: 64px;
  --topbar-h: 56px;
  --content-max: 1440px;
  --drawer-w: 480px;
}

/* Aliase (alte Token-Namen) und zusammengesetzte Tokens werden auf <body>
   deklariert: var()-Bezüge in Custom Properties werden auf dem deklarierenden
   Element aufgelöst – nur so folgen sie dem Theme-Wechsel über body.light. */
body {
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --panel: var(--surface);
  --glass: var(--surface);
  --surface-strong: var(--surface);
  --surface-soft: var(--surface-2);
  --badge: var(--surface-3);
  --shadow: var(--shadow-1);
  --bg-soft: var(--bg);
  --muted-text: var(--muted);
  --text-color: var(--text);
  --text-muted: var(--muted);
  --surface-hover: var(--surface-3);
}

body.light {
  color-scheme: light;

  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f1f4f9;
  --surface-3: #e8edf5;
  --border: rgba(15, 23, 42, 0.1);
  --border-strong: rgba(15, 23, 42, 0.22);
  --text: #0f172a;
  --muted: #5b6478;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.12);
  --accent-strong: #2563eb;

  --ok: #0f8a5f;
  --ok-text: #0b6b4a;
  --ok-soft: rgba(15, 138, 95, 0.12);

  --warn: #b45309;
  --warn-text: #92400e;
  --warn-soft: rgba(180, 83, 9, 0.12);

  --danger: #b91c1c;
  --danger-text: #991b1b;
  --danger-soft: rgba(185, 28, 28, 0.1);
  --danger-strong: #b91c1c;

  --info: #0e7490;
  --info-text: #155e75;
  --info-soft: rgba(14, 116, 144, 0.12);

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 8px 24px rgba(15, 23, 42, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0ms;
  }
}