/* ============================================================
   Design-Tokens — einzige Quelle für Farbe, Typografie, Abstand,
   Radius und Tiefe.

   Früher lag eine zweite :root-Definition in styles.css, die diese
   Werte vollständig überschrieben hat (die Datei hier war damit
   faktisch wirkungslos). Sie ist entfernt; Änderungen an Farben oder
   Skalen gehören ausschließlich hierher.
   ============================================================ */

:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  background: var(--n-50);
  color: var(--n-900);


  /* ── Rampen ──────────────────────────────────────────────────────────────
     Bestand waren 498 einzeln gesetzte Hex-Werte aus drei nebeneinander
     gewachsenen Paletten (Tailwind-Slate, ein türkisstichiges Grau und diese
     Tokens). Weil sich die Paletten nach Sektion unterschiedlich verteilten,
     wechselte beim Menüwechsel sichtbar die Farbtemperatur. Alle Werte sind
     auf die folgenden Stufen abgebildet; neue Regeln verwenden nur diese.

     Abgebildet wird nie heller als der Ausgangswert, damit die
     Vereinheitlichung keinen Kontrast kostet. --n-500 ersetzt das häufige
     #64748b und liegt mit 4.94:1 auf Weiß über der AA-Schwelle.
     ──────────────────────────────────────────────────────────────────────── */
  /* Neutral — Flächen, Linien, Text */
  /* n-400 ist Linien- und Symbolfarbe, kein Textwert (3.04:1). */
  --n-0: #ffffff;
  --n-25: #f7f9fc;
  --n-50: #eef1f6;
  --n-200: #dde3ec;
  --n-300: #c7d0db;
  --n-400: #8496a8;
  --n-500: #5f7288;
  --n-600: #536b77;
  --n-700: #4d5f70;
  --n-800: #2e3c4c;
  --n-900: #0f1a26;

  /* Blau — Marke, Verweise, aktive Zustände */
  --b-50: #eff5ff;
  --b-100: #dbe7fb;
  --b-200: #b9d0f5;
  --b-500: #1d5fd0;
  --b-600: #1749a8;
  --b-700: #123a86;

  /* Rot — Risiko */
  --r-50: #fef2f3;
  --r-100: #fbdfe2;
  --r-200: #f4bcc2;
  --r-500: #d02b3e;
  --r-600: #a81f2f;
  --r-700: #801624;

  /* Bernstein — Warnung */
  /* Erst ab a-500 als Text zulässig; hellere Stufen sind reine Flächen. */
  --a-50: #fff8ea;
  --a-100: #fdecca;
  --a-200: #f7d894;
  --a-500: #a66300;
  --a-600: #834e00;
  --a-700: #653c00;

  /* Grün — in Ordnung */
  --g-50: #eefaf4;
  --g-100: #d3f2e2;
  --g-200: #a3e2c4;
  --g-500: #0d824f;
  --g-600: #0a663e;
  --g-700: #074c2e;

  /* ── Marke / Navigation ──────────────────────────────────── */
  --clr-primary: var(--b-500);
  --clr-primary-dark: var(--b-600);
  --clr-brand: var(--b-500);
  --clr-nav: var(--n-900);
  --clr-nav-hover: var(--n-800);
  --clr-nav-active: var(--n-800);
  --clr-accent: var(--b-500);

  /* ── Flächen und Linien ──────────────────────────────────── */
  --clr-surface: var(--n-0);
  --clr-surface-alt: var(--n-25);
  --clr-subtle: var(--n-50);
  --clr-border: var(--n-200);
  --clr-border-mid: var(--n-400);

  /* ── Text ────────────────────────────────────────────────── */
  --clr-text: var(--n-900);
  --clr-muted: var(--n-700);
  /* Bewusst kontraststark: 5.62:1 auf Weiß, 5.33:1 auf --clr-surface-alt
     (Tabellenköpfe). Ein kühlerer Ton passte optisch besser zur blauen
     Palette, verlor aber ~0.8 Kontrastpunkte — bei Betriebsdaten hat
     Lesbarkeit Vorrang. Durch Tests festgeschrieben. */
  --clr-xmuted: var(--n-600);

  /* ── Status: Farbe trägt Bedeutung, nicht Dekoration ─────── */
  --clr-risk: var(--r-500);
  --clr-risk-bg: var(--r-50);
  /* Dunkel genug für weiße Schrift auf der Vollflächen-Pill (≥4.5:1)
     und für farbigen Text auf der zugehörigen hellen Fläche. */
  --clr-warn: var(--a-500);
  --clr-warn-bg: var(--a-50);
  --clr-ok: var(--g-500);
  --clr-ok-bg: var(--g-50);
  --clr-info: var(--b-500);
  --clr-info-bg: var(--b-50);

  /* ── Typografie-Skala ────────────────────────────────────────
     Sechs Stufen. Bestand waren 105 Ad-hoc-Größen, davon zehn allein
     zwischen 0.62 und 0.82rem — visuell nicht unterscheidbar.
     Neue Regeln verwenden ausschließlich diese Stufen. */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  /* Altname, solange bestehende Regeln ihn noch verwenden. */
  --fs-xxs: var(--fs-2xs);

  /* Bestehende Regeln setzen ihre Größen weiterhin in rem gegen die 14px-Wurzel
     und liegen damit unterhalb dieser Token-Stufen. Diese rem-Werte sind auf
     eine Leiter gelegt — 0.6 · 0.66 · 0.72 · 0.78 · 0.84 · 0.9 · 0.96 · 1 ·
     1.1 · 1.25 · 1.45 · 1.8 · 2.2 —, weil der Bestand 82 kaum unterscheidbare
     Größen führte (allein zehn zwischen 0.6 und 0.7rem). Neue Regeln nehmen
     die Token oben; wer eine bestehende Regel anfasst, bleibt auf der Leiter. */

  /* ── Abstands-Raster (4px-Basis) ─────────────────────────────
     Bestand waren 221 verschiedene padding-Werte und gar keine
     Abstands-Tokens. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ── Radius ──────────────────────────────────────────────────
     Knapp gehalten. Die Oberfläche führte zuvor 16 Radien bis 24px und
     201 Voll-Pillen (999px); das las sich wie eine Consumer-App, nicht wie
     ein Betriebswerkzeug. Kreise entstehen weiterhin über 50 %. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* ── Tiefe ───────────────────────────────────────────────────
     Flächen trennt in erster Linie eine Linie, nicht ein Schatten. Tiefe
     bleibt echten Überlagerungen vorbehalten — Dialog, Menü, Popover. */
  --shadow-xs: 0 1px 1px rgba(16, 26, 44, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 26, 44, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 26, 44, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 26, 44, 0.12);

  /* ── Interaktion ─────────────────────────────────────────── */
  --focus-ring-color: var(--b-500);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus-ring-color) 30%, transparent);
  --t-fast: 100ms ease;
  --t-base: 150ms ease;
}

/* The QTC preference also themes the application chrome and other sections.
   Semantic roles keep their meaning: dark surfaces, bright text and accents. */
:root[data-qtc-theme="dark"] {
  color-scheme: dark;
  --n-0: #17181a; --n-25: #1e2023; --n-50: #141517;
  --n-200: #353940; --n-300: #505760; --n-400: #78838f;
  --n-500: #a8adb4; --n-600: #b4bdc7; --n-700: #bec5ce;
  --n-800: #d4d9e0; --n-900: #e3e5e8;
  --b-50: #232936; --b-100: #28364b; --b-200: #45628b;
  --b-500: #9cc0f0; --b-600: #b4cff4; --b-700: #c6dcfa;
  --r-50: #3a2523; --r-100: #482b2a; --r-200: #79413d;
  --r-500: #ff9d92; --r-600: #ffb1a8; --r-700: #ffc4bc;
  --a-50: #30291e; --a-100: #3f3423; --a-200: #756040;
  --a-500: #e5be81; --a-600: #f0cf9b; --a-700: #f6ddb6;
  --g-50: #1d3027; --g-100: #274334; --g-200: #426e55;
  --g-500: #7fd6a8; --g-600: #9ce2bc; --g-700: #b6ecd0;
  --clr-nav: var(--n-0); --clr-nav-hover: var(--n-25); --clr-nav-active: var(--b-50);
}