/* =====================================================================
   Design-Token-System – Waffensachkunde Lernsoftware
   ---------------------------------------------------------------------
   Gestaltungsrichtung: ruhig und kontrastreich.
   Zurückhaltende Farben, große klare Typografie, viel Weißraum, eine
   einzige dezente Akzentfarbe (gedämpftes Petrol). Ausgelegt auf lange
   Lernsitzungen ohne Ermüdung.

   Kontrastziele (WCAG 2.2):
     - Fließtext:        Ziel 7:1   (AAA), Minimum 4,5:1 (AA)
     - Sekundärtext:     Minimum 4,5:1
     - UI-Komponenten,
       Ränder, Fokus:    Minimum 3:1 (1.4.11 Non-text Contrast)

   Steuerung der Themes:
     - Ohne Attribut folgt die Oberfläche `prefers-color-scheme`.
     - `<html data-thema="hell|dunkel|hochkontrast">` übersteuert manuell.
     - `forced-colors: active` (Windows-Kontrastdesign) übersteuert alles
       und übergibt die Farbwahl an das Betriebssystem.
   ===================================================================== */

:root {
  /* ── Typografie ─────────────────────────────────────────────────────
     Ausschließlich systemseitig vorhandene Schriften: die Anwendung lädt
     keine Webfonts nach und funktioniert vollständig offline.          */
  --schrift-familie:
    'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'SF Pro Text', 'Helvetica Neue',
    'Noto Sans', Arial, sans-serif;
  --schrift-familie-ueberschrift:
    'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, 'SF Pro Display',
    'Helvetica Neue', Arial, sans-serif;
  --schrift-familie-mono: 'Cascadia Mono', 'Consolas', ui-monospace, 'SF Mono', monospace;

  /* Basisgröße bewusst 18px statt 16px: bessere Lesbarkeit bei langen
     Lernsitzungen. Alle weiteren Größen skalieren relativ mit, damit die
     Zoom-Funktion und Nutzer-Schriftgrößen wirksam bleiben.            */
  --schrift-basis: 1.125rem; /* 18px */
  --schrift-klein: 0.9375rem; /* 15px – Minimum, nie kleiner */
  --schrift-gross: 1.3125rem;
  --schrift-h3: 1.375rem;
  --schrift-h2: 1.75rem;
  --schrift-h1: 2.375rem;

  --zeilenhoehe-text: 1.65;
  --zeilenhoehe-eng: 1.3;
  --textbreite-max: 68ch;

  /* ── Textabstände (WCAG 1.4.12) ──────────────────────────────────────
     Ab Werk null: Die Vorgabe ist die gewohnte Darstellung. Die weiteren
     Stufen setzen sie weiter unten – siehe `shared/textabstand.ts` für die
     Herkunft der Werte. Sie stehen hier als eigene Variablen, damit die
     Stufen nur diese drei Zeilen überschreiben müssen.

     `0em` und nicht das naheliegende `normal`: Der Wert geht in `global.css`
     durch ein `max()`, und `normal` ist keine Länge – die ganze Angabe wäre
     dort ungültig, und der Feinsatz der Überschriften fiele stillschweigend
     aus. `0em` ist mit `normal` gleichbedeutend und rechenbar. */
  --wortabstand: 0em;
  --zeichenabstand: 0em;
  --absatzabstand: 0rem;

  --schriftstaerke-normal: 400;
  --schriftstaerke-mittel: 550;
  --schriftstaerke-fett: 680;

  /* ── Abstände (8px-Raster, großzügig) ───────────────────────────── */
  --abstand-2xs: 0.25rem;
  --abstand-xs: 0.5rem;
  --abstand-s: 0.75rem;
  --abstand-m: 1.25rem;
  --abstand-l: 2rem;
  --abstand-xl: 3rem;
  --abstand-2xl: 4.5rem;

  /* ── Form ───────────────────────────────────────────────────────── */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --rahmenbreite: 1px;
  --rahmenbreite-stark: 2px;

  /* ── Fokusindikator ─────────────────────────────────────────────────
     Zweifarbiger Ring: eine kräftige Innenlinie plus ein heller/dunkler
     Außenring. So bleibt der Fokus auf JEDEM Untergrund erkennbar und
     erfüllt WCAG 2.2 (2.4.11 Focus Appearance) mit >= 3:1 Kontrast.    */
  --fokus-breite: 3px;
  --fokus-abstand: 2px;
  --fokus-kontur-breite: 2px;

  /* ── Bewegung ───────────────────────────────────────────────────── */
  --uebergang-dauer: 140ms;
  --uebergang-kurve: cubic-bezier(0.2, 0, 0.2, 1);

  /* ── Interaktionsflächen (WCAG 2.2 – 2.5.8 Target Size) ─────────── */
  --klickflaeche-min: 44px;
}

/* =====================================================================
   SEHR SCHMALE ANZEIGE (WCAG 2.2 – 1.4.10 Reflow)
   ---------------------------------------------------------------------
   Der Prüffall sind 320 CSS-Pixel: 400 Prozent Anzeigegröße auf einem
   1280 Pixel breiten Fenster. Nachgemessen an einem Messstand mit diesen
   Stilblättern blieben davon nach Seitenpolster (2 × --abstand-l) und
   Kartenpolster (2 × --abstand-l) nur 192 Pixel für den Text übrig; der
   Fragetext lief um 268 Pixel aus seinem Kasten, die Anwendungs-
   überschrift um 56.

   Zwei Stellschrauben, beide hier und nicht verstreut: Die großen
   Abstände werden zurückgenommen, und die Überschriftenskala rückt auf
   die Größen, die bei 320 Pixeln noch in eine Zeile passen. Der
   Fließtext (--schrift-basis, --schrift-klein) bleibt unangetastet – er
   ist die Lesegröße und darf nicht schrumpfen, nur weil das Fenster
   schmal ist.

   Die Schwelle liegt bei 30rem (480 px) und damit unter der bereits
   vorhandenen 40rem-Grenze, an der die zweispaltigen Listen einspaltig
   werden. Zwei Stufen statt einer: Bei 480 bis 640 Pixeln fehlt Platz
   für Spalten, bei unter 480 fehlt Platz für Polster.
   ===================================================================== */
@media (width <= 30rem) {
  :root {
    --abstand-l: 1rem;
    --abstand-xl: 1.5rem;
    --abstand-2xl: 2rem;

    --schrift-gross: 1.1875rem;
    --schrift-h3: 1.25rem;
    --schrift-h2: 1.4375rem;
    --schrift-h1: 1.75rem;
  }
}

/* =====================================================================
   THEME: HELL (Vorgabe)
   ---------------------------------------------------------------------
   Gemessene Kontraste gegen --farbe-grund (#f7f7f5) – nachgerechnet und
   festgehalten in tests/token-kontraste.test.ts:
     --farbe-text        #16181d  ≈ 16,6:1   (AAA)
     --farbe-text-leise  #4a4f58  ≈  7,7:1   (AAA)
     --farbe-akzent      #17505f  ≈  8,3:1   (AAA)
     --farbe-erfolg      #1c5c33  ≈  7,45:1  (AAA)
     --farbe-warnung     #784906  ≈  7,1:1   (AAA)
     --farbe-fehler      #a01423  ≈  7,5:1   (AAA)
     --farbe-rahmen      #b9bcc2  ≈  1,8:1   (nur dekorativ)
     --farbe-rahmen-kraeftig #6c727c ≈ 4,5:1 (UI-Kontrast erfüllt)

   „Nur dekorativ" ist keine Absichtserklärung, sondern eine Bedingung:
   --farbe-rahmen darf Karten begrenzen, Abschnitte trennen und
   Tabellenzeilen unterlegen – aber nie die Grenze eines Bedienelements
   zeichnen, denn dort verlangt WCAG 1.4.11 3:1. Derselbe Test geht dafür
   alle Stilblätter durch und schlägt jede Klasse im JSX nach.
   ===================================================================== */
:root,
:root[data-thema='hell'] {
  color-scheme: light;

  --farbe-grund: #f7f7f5;
  --farbe-grund-versetzt: #eeeeea;
  --farbe-flaeche: #ffffff;
  --farbe-flaeche-erhoben: #ffffff;

  --farbe-text: #16181d;
  --farbe-text-leise: #4a4f58;
  --farbe-text-invers: #ffffff;

  --farbe-akzent: #17505f;
  --farbe-akzent-stark: #0d3b47;
  --farbe-akzent-leise: #e3eef1;
  --farbe-akzent-text: #ffffff;

  --farbe-rahmen: #b9bcc2;
  --farbe-rahmen-kraeftig: #6c727c;

  --farbe-erfolg: #1c5c33;
  /* Bis 0.20.0 #7a4a06 – das erreichte nur 6,97:1 und verfehlte damit
     knapp das 7:1-Ziel. Minimal nachgedunkelt bei gleichem Farbton. */
  --farbe-warnung: #784906;
  --farbe-fehler: #a01423;

  --farbe-fokus: #0d3b47;
  --farbe-fokus-kontur: #ffffff;

  --schatten-flaeche: 0 1px 2px rgb(22 24 29 / 6%), 0 4px 16px rgb(22 24 29 / 5%);
}

/* =====================================================================
   THEME: DUNKEL
   ---------------------------------------------------------------------
   Gemessene Kontraste gegen --farbe-grund (#14161a) – nachgerechnet und
   festgehalten in tests/token-kontraste.test.ts:
     --farbe-text        #eceef2  ≈ 15,6:1   (AAA)
     --farbe-text-leise  #a8afba  ≈  8,2:1   (AAA)
     --farbe-akzent      #6fc3d6  ≈  9,0:1   (AAA)
     --farbe-erfolg      #7fd39a  ≈ 10,1:1   (AAA)
     --farbe-warnung     #e5b567  ≈  9,6:1   (AAA)
     --farbe-fehler      #ff9a9a  ≈  8,9:1   (AAA)
     --farbe-rahmen-kraeftig #7d8593 ≈ 4,9:1 (UI-Kontrast erfüllt)
   Kein reines Schwarz/Weiß: reduziert Halation und Nachbilder bei
   längerem Lesen.
   ===================================================================== */
:root[data-thema='dunkel'] {
  color-scheme: dark;

  --farbe-grund: #14161a;
  --farbe-grund-versetzt: #0e1013;
  --farbe-flaeche: #1d2026;
  --farbe-flaeche-erhoben: #252932;

  --farbe-text: #eceef2;
  --farbe-text-leise: #a8afba;
  --farbe-text-invers: #14161a;

  --farbe-akzent: #6fc3d6;
  --farbe-akzent-stark: #9ad9e7;
  --farbe-akzent-leise: #1b3038;
  --farbe-akzent-text: #08161b;

  --farbe-rahmen: #3a4049;
  --farbe-rahmen-kraeftig: #7d8593;

  --farbe-erfolg: #7fd39a;
  --farbe-warnung: #e5b567;
  --farbe-fehler: #ff9a9a;

  --farbe-fokus: #9ad9e7;
  --farbe-fokus-kontur: #08161b;

  --schatten-flaeche: 0 1px 2px rgb(0 0 0 / 45%), 0 6px 20px rgb(0 0 0 / 35%);
}

/* Systemvorgabe „dunkel“, solange nicht manuell übersteuert wurde. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema='hell']):not([data-thema='hochkontrast']) {
    color-scheme: dark;

    --farbe-grund: #14161a;
    --farbe-grund-versetzt: #0e1013;
    --farbe-flaeche: #1d2026;
    --farbe-flaeche-erhoben: #252932;

    --farbe-text: #eceef2;
    --farbe-text-leise: #a8afba;
    --farbe-text-invers: #14161a;

    --farbe-akzent: #6fc3d6;
    --farbe-akzent-stark: #9ad9e7;
    --farbe-akzent-leise: #1b3038;
    --farbe-akzent-text: #08161b;

    --farbe-rahmen: #3a4049;
    --farbe-rahmen-kraeftig: #7d8593;

    --farbe-erfolg: #7fd39a;
    --farbe-warnung: #e5b567;
    --farbe-fehler: #ff9a9a;

    --farbe-fokus: #9ad9e7;
    --farbe-fokus-kontur: #08161b;

    --schatten-flaeche: 0 1px 2px rgb(0 0 0 / 45%), 0 6px 20px rgb(0 0 0 / 35%);
  }
}

/* =====================================================================
   THEME: HOHER KONTRAST
   ---------------------------------------------------------------------
   Reines Schwarz als Grund, Weiß als Text (21:1). Akzent Bernsteingelb
   (#ffd400 ≈ 14,7:1). Alle Ränder werden sichtbar und kräftig, damit
   Bedienelemente auch ohne Farbwahrnehmung als solche erkennbar sind.
   ===================================================================== */
:root[data-thema='hochkontrast'] {
  color-scheme: dark;

  --farbe-grund: #000000;
  --farbe-grund-versetzt: #000000;
  --farbe-flaeche: #000000;
  --farbe-flaeche-erhoben: #101010;

  --farbe-text: #ffffff;
  --farbe-text-leise: #ffffff;
  --farbe-text-invers: #000000;

  --farbe-akzent: #ffd400;
  --farbe-akzent-stark: #ffe866;
  --farbe-akzent-leise: #1a1600;
  --farbe-akzent-text: #000000;

  --farbe-rahmen: #ffffff;
  --farbe-rahmen-kraeftig: #ffffff;

  --farbe-erfolg: #4cff9a;
  --farbe-warnung: #ffd400;
  --farbe-fehler: #ff6b6b;

  --farbe-fokus: #ffd400;
  --farbe-fokus-kontur: #000000;

  --rahmenbreite: 2px;
  --rahmenbreite-stark: 3px;
  --schatten-flaeche: none;
}

/* =====================================================================
   TEXTABSTÄNDE (WCAG 1.4.12)
   ---------------------------------------------------------------------
   In einer ausgelieferten Electron-Anwendung gibt es keine nutzereigenen
   Stilblätter und keine Entwicklerwerkzeuge – der Einzige, der Zeilen-,
   Wort- und Zeichenabstand ändern kann, ist die Anwendung selbst. Die
   Werte der weiten Stufe sind die aus dem Kriterium: Zeilenhöhe das
   1,5-fache, Wortabstand 0,16 em, Zeichenabstand 0,12 em. Weil die
   Anwendung schon bei 1,65 anfängt, liegt „weit“ darüber – das Kriterium
   nennt Mindestwerte.

   Die Überschriften sind ausdrücklich mitgenommen: Ihr negativer
   Zeichenabstand steht hart in `global.css` und ginge sonst gegen die
   Einstellung. Ein Nutzer, der mehr Luft braucht, braucht sie in der
   Überschrift erst recht.
   ===================================================================== */
:root[data-textabstand='weit'] {
  --zeilenhoehe-text: 1.9;
  --zeilenhoehe-eng: 1.45;
  --wortabstand: 0.16em;
  --zeichenabstand: 0.06em;
  --absatzabstand: 0.5rem;
}

:root[data-textabstand='sehr-weit'] {
  --zeilenhoehe-text: 2.2;
  --zeilenhoehe-eng: 1.6;
  --wortabstand: 0.24em;
  --zeichenabstand: 0.12em;
  --absatzabstand: 1rem;
}

/* Systemvorgabe „mehr Kontrast“, solange nicht manuell übersteuert. */
@media (prefers-contrast: more) {
  :root:not([data-thema='hell']):not([data-thema='dunkel']) {
    --farbe-text-leise: var(--farbe-text);
    --farbe-rahmen: var(--farbe-rahmen-kraeftig);
    --rahmenbreite: 2px;
    --schatten-flaeche: none;
  }
}

/* =====================================================================
   ERZWUNGENE FARBEN (Windows-Kontrastdesign)
   ---------------------------------------------------------------------
   Hier bestimmt das Betriebssystem die Palette. Wir geben die Kontrolle
   vollständig ab und mappen nur noch auf CSS-Systemfarben, damit keine
   eigene Farbe die Nutzereinstellung überschreibt.

   **Der Selektor trägt das Attribut mit, und das ist kein Schmuck.** Bei
   erzwungenen Farben setzt `themeAufloesen` das Thema unbedingt auf
   `hochkontrast` (`shared/theme.ts`), und `:root[data-thema='hochkontrast']`
   hat die Spezifität (0,1,1) gegen (0,0,1) eines blossen `:root`. Bis
   Fassung 0.24.1 stand hier nur `:root` – der ganze Block war damit
   wirkungslos, und sämtliche Token behielten die hausgemachten Werte
   (`--farbe-fokus: #ffd400` statt `Highlight`). Aufgefallen ist es nicht,
   weil die beiden Regeln mit `forced-color-adjust: none` ihre Systemfarben
   von Hand setzen; jede weitere Regel dieser Art bekäme stillschweigend die
   falsche Palette.
   ===================================================================== */
@media (forced-colors: active) {
  :root,
  :root[data-thema] {
    --farbe-grund: Canvas;
    --farbe-grund-versetzt: Canvas;
    --farbe-flaeche: Canvas;
    --farbe-flaeche-erhoben: Canvas;

    --farbe-text: CanvasText;
    --farbe-text-leise: CanvasText;
    --farbe-text-invers: Canvas;

    --farbe-akzent: LinkText;
    --farbe-akzent-stark: LinkText;
    --farbe-akzent-leise: Canvas;
    --farbe-akzent-text: Canvas;

    --farbe-rahmen: CanvasText;
    --farbe-rahmen-kraeftig: CanvasText;

    --farbe-erfolg: CanvasText;
    --farbe-warnung: CanvasText;
    --farbe-fehler: CanvasText;

    --farbe-fokus: Highlight;
    --farbe-fokus-kontur: Canvas;

    --rahmenbreite: 2px;
    --schatten-flaeche: none;
  }
}

/* =====================================================================
   REDUZIERTE BEWEGUNG
   ---------------------------------------------------------------------
   Alle Übergänge werden praktisch abgeschaltet (nicht auf 0s, damit
   `transitionend`-Ereignisse weiterhin feuern).
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --uebergang-dauer: 0.01ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
