/* public/design-tokens.css — gemeinsames Design-System (Reskin nach Oliver-Vorlage,
   docs/superpowers/specs/2026-08-18-design-system-vorlage.md). Hell ist die Voreinstellung
   (blankes :root), dunkel ist der Override über [data-theme="dark"] — das Attribut setzt
   bereits public/nav.js (Sidebar-Umschalter), hier wird nur derselbe Vertrag für den
   Seiteninhalt eingehalten. Namen bewusst NICHT wie in der Vorlage (dort z.B. --blau für
   Orange, ein von der Vorlage selbst dokumentierter Fehlgriff) — klare, sprechende Namen statt
   1:1-Übernahme, s. Spec Abschnitt 2.
   Grundregel: Farbe kommt über die Fläche, nie über den Rand — Ränder bleiben transparent. */

:root {
  /* Flächen */
  --bg: #F5F1E9;
  --bg2: #FFFFFF;
  --card: #FFFFFF;
  --surface-raised: #FAF7F1;
  /* Trennlinien */
  --border: rgba(20,18,15,0.10);
  --border-subtle: rgba(20,18,15,0.06);
  /* Text */
  --text: #1A1510;
  --text-muted: #5E544B;
  --text-dim: #9A9088;
  /* Akzent (Auswahl/Bezug/aktiver Zustand) */
  --accent: #E87B3F;
  --accent-tint: #FBEDE3;
  --accent-strong: #B4571F;
  /* Zustände */
  --success: #1D8A52;
  --success-bg: #E8F3EC;
  --danger: #B4442F;
  --danger-bg: #FAEBE7;
  --warning: #B07A18;
  --warning-bg: #FBF2DF;
  /* Eingabefelder */
  --field-bg: #FFFFFF;
  --field-border: rgba(20,18,15,0.14);

  /* Typografie */
  --font: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-heading: 20px;   --fw-heading: 650;
  --fs-card-title: 13.5px; --fw-card-title: 600;
  --fs-body: 13px;      --fw-body: 400;
  --fs-label: 10px;     --fw-label: 700;  /* Großbuchstaben, letter-spacing .05em */
  --fs-secondary: 12px; --fw-secondary: 400;

  /* Abstände (Vierersprünge) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;

  /* Radien */
  --radius-field: 8px;
  --radius-card: 11px;
  --radius-pill: 20px;

  /* Bewegung */
  --ease-color: 0.18s ease;
  --ease-move: 0.32s cubic-bezier(.2,.8,.25,1);
}

:root[data-theme="dark"] {
  --bg: #0B0C10;
  --bg2: #14161D;
  --card: #14161D;
  --surface-raised: #1B1E25;
  --border: rgba(255,255,255,0.10);
  --border-subtle: rgba(255,255,255,0.06);
  --text: #F5F5F0;
  --text-muted: #9A9A93;
  --text-dim: #6E6E68;
  --accent: #E87B3F;
  --accent-tint: #2A1A11;
  --accent-strong: #F0A170;
  --success: #5BC98A;
  --success-bg: #12281C;
  --danger: #E8553F;
  --danger-bg: #2C1614;
  --warning: #E8A33D;
  --warning-bg: #2C2416;
  --field-bg: #1B1E25;
  --field-border: rgba(255,255,255,0.14);
}

/* Fallback für den kurzen Moment vor nav.js's Attribut-Zuweisung bzw. bei deaktiviertem JS:
   Systemeinstellung greift, solange kein data-theme gesetzt/explizit "light" ist. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0C10; --bg2: #14161D; --card: #14161D; --surface-raised: #1B1E25;
    --border: rgba(255,255,255,0.10); --border-subtle: rgba(255,255,255,0.06);
    --text: #F5F5F0; --text-muted: #9A9A93; --text-dim: #6E6E68;
    --accent-tint: #2A1A11; --accent-strong: #F0A170;
    --success: #5BC98A; --success-bg: #12281C;
    --danger: #E8553F; --danger-bg: #2C1614;
    --warning: #E8A33D; --warning-bg: #2C2416;
    --field-bg: #1B1E25; --field-border: rgba(255,255,255,0.14);
  }
}

body { font-variant-numeric: tabular-nums; }
.num, .tabular-nums { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Scrollbars global auf die Token-Palette umgestellt (Nutzerauftrag 2026-08-21): ohne diese
   Regel bekommen Listen/Tabellen/Panels/etc. die Standard-Browser-Scrollbar (auf dunklem
   Hintergrund meist hell/grau), während die Sidebar (nav.js) längst eigene, zum Theme passende
   Scrollbar-Farben hatte — dieser Kontrast wirkte wie ein Bruch im dunklen Modus. --text-dim/
   --text-muted sind bereits Theme-aware (kippen automatisch über [data-theme]), also folgt die
   Scrollbar-Farbe hell/dunkel ohne Zusatzaufwand pro Seite. */
html { scrollbar-width: thin; scrollbar-color: var(--text-dim) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-dim); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }