/*
 * Fünf Themes, je ein festes Set aus Farbpalette und Schriftpaarung —
 * keine freie Kombination, siehe SPEC.md Abschnitt 6 und 6a.
 *
 * Ausgewählt über [data-theme-name] (wald|meer|glut|stein|nebel) und
 * [data-color-mode] (light|dark) auf <html>, gesetzt vom Einstellungs-
 * Skript aus dem localStorage — nie vom Server, keine Kontosynchronisation.
 * Ohne gesetztes data-color-mode entscheidet prefers-color-scheme.
 *
 * Jedes Ink/Paper-, Muted/Paper- und Accent-Paar ist gegen WCAG 2.2 AA
 * geprüft (mindestens 4.5:1) — siehe LOG-Eintrag zum Bau vom
 * 2026-09-05, die Werte stehen nicht zur freien Verhandlung, ohne die
 * Prüfung zu wiederholen.
 *
 * Kerze, Icons und Stockfotos bleiben von dieser Datei unberührt — sie
 * ist reine Farbe und Schrift, keine Bildauswahl.
 *
 * ---------------------------------------------------------------------
 *
 * **Jedes Theme trägt beide Fälle, und nur die Zuordnung schaltet um**
 * (Ybug 49). Bis zum 2026-09-08 stand die Dunkelfassung eines Themes in
 * einer eigenen Regel `:root[data-theme-name="X"][data-color-mode="dark"]`.
 * Zwei Wege dorthin fehlten damit, und beide kommen im Alltag vor:
 *
 *   1. **Theme gewählt, Darstellung auf „System", System steht dunkel.**
 *      Es gab keine Regel dafür — die Seite blieb hell, obwohl das
 *      Gerät dunkel verlangte.
 *   2. **Kein Theme gewählt, Darstellung auf „Dunkel".** Die Vorgabe
 *      (Stein hell) hatte keine Dunkelfassung außerhalb der
 *      Medienabfrage. Wer im Menü auf Dunkel stellte, ohne vorher ein
 *      Theme zu wählen, sah nichts geschehen. Genau das war die
 *      Beobachtung „auf Dunkel stellen funktioniert nicht immer".
 *
 * Jetzt hält jedes Theme seine Dunkelwerte als `--d-*` vor, und zwei
 * Regeln am Ende dieser Datei legen sie auf die Arbeitsnamen um: eine
 * für die ausdrückliche Wahl, eine für „System steht dunkel". Die
 * Werte stehen dadurch genau einmal je Theme, und ein neuer Weg in den
 * Dunkelmodus braucht keine fünf neuen Blöcke.
 *
 * **Die Reihenfolge in der Datei trägt die Entscheidung.** Umlegen und
 * Themeblock wiegen gleich viel (beide `:root` plus ein Attribut) — was
 * später steht, gewinnt. Die beiden Umlegeregeln müssen deshalb hinter
 * allen Themeblöcken stehen.
 *
 * **`[data-theme-probe]` neben jedem Hell-Selektor.** Damit trägt auch
 * ein einzelnes Element die Farben eines Themes, ohne dass es die ganze
 * Seite umstellt: die Theme-Auswahl in der Einstellungsleiste zeigt je
 * Option einen Punkt in deren Akzent (static/core.css, `.theme-punkt`).
 * Eine zweite Liste mit fünf Hexwerten irgendwo sonst liefe
 * auseinander, sobald hier eine Farbe nachgeprüft wird — die Werte
 * bleiben an dieser einen Stelle.
 *
 * Nur an den Hell-Fassungen: der Punkt ist ein Erkennungszeichen des
 * Themes und nicht eine Vorschau des gerade geltenden Modus. Das
 * Umlegen fasst ausschließlich `:root` an und lässt ihn deshalb in
 * Ruhe, auch wenn die Seite dunkel steht.
 */

:root {
  --font-heading: "Work Sans", sans-serif;
  --font-body: "Work Sans", sans-serif;
}

/* Wald — Braun-Pastell und Grün-Pastell gemischt, ruhige Serifenschrift.
   Grund und Akzent tragen die Mischung getrennt statt als ein
   verwaschener Zwischenton: Pastellgrün als Grund (Waldboden, Licht
   durchs Blätterdach), warmes Braun als Akzent (Rinde, Erde) — beide
   Farben bleiben lesbar, wo ein einzelner Mischton stumpf würde. */
:root[data-theme-name="wald"],
[data-theme-probe="wald"] {
  --font-heading: "Source Serif 4", serif;
  --font-body: "Work Sans", sans-serif;
  --paper: #eef1e6;
  --surface: #e2e8d3;
  --ink: #33281c;
  --muted: #5f5138;
  --line: #cdd3b8;
  --accent: #5b6b42;
  --accent-ink: #f5f7ee;
  --d-paper: #1c2015;
  --d-surface: #262b1c;
  --d-ink: #e8ecd9;
  --d-muted: #b9c19e;
  --d-line: #3d4530;
  --d-accent: #9db06e;
  --d-accent-ink: #1c2015;
}

/* Meer — kühle, gedeckte Blau- und Grautöne, klare serifenlose Schrift */
:root[data-theme-name="meer"],
[data-theme-probe="meer"] {
  --font-heading: "Work Sans", sans-serif;
  --font-body: "Work Sans", sans-serif;
  --paper: #eef2f4;
  --surface: #e0e8eb;
  --ink: #1c2b33;
  --muted: #4d6672;
  --line: #c3d2d7;
  --accent: #2f5d62;
  --accent-ink: #f5fbfb;
  --d-paper: #121b1f;
  --d-surface: #1a2529;
  --d-ink: #e7eff0;
  --d-muted: #a8c0c8;
  --d-line: #2f4247;
  --d-accent: #5fa3aa;
  --d-accent-ink: #0d1417;
}

/* Glut — der Grund trägt das Weinrot.
 *
 * **Dritter Anlauf am 2026-09-14** (Ybug 134), und der erste, der die
 * Helligkeit aufgibt. Die beiden davor suchten den Fehler im Farbton
 * und in der Sättigung: #f7ece3 war rechnerisch Orange, #fbeae6
 * Ziegelrot, und der Stand vom 2026-09-08 lag mit #f7f0f1 bei 30 %
 * Sättigung und 95 % Helligkeit — ein fast weisses Blatt. Alle drei
 * wurden im Bild als Altrosa gelesen, und der dritte Bericht dazu
 * trug drei Ausrufezeichen.
 *
 * **Der Grund dafür ist die Helligkeit, nicht der Farbton.** Weinrot
 * ist eine dunkle Farbe; hellt man sie auf, entsteht Rosa, und zwar
 * bei jedem Farbton zwischen 340° und 10°. Ein helles Blatt kann
 * deshalb kein Weinrot tragen — es kann nur ein Weinrot andeuten, und
 * genau diese Andeutung heisst Rosa.
 *
 * Also trägt jetzt das Blatt selbst die Farbe: #4a1622 bei 19 %
 * Helligkeit, der Text hell darauf. **Glut ist damit das eine Theme,
 * das auch in der Hell-Darstellung dunkel steht** — die Wahl
 * „Darstellung: Hell" heisst hier glühendes Wein, „Dunkel" das fast
 * schwarze Wein der `--d-*` unten. Die Beitragsleinwand bleibt davon
 * unberührt: sie ist weiss, weil der Beitrag darauf gestaltet wird,
 * und hebt sich vom Grund jetzt deutlicher ab als vorher.
 *
 * Nachgerechnet gegen WCAG 2.2 AA, hell und dunkel: Ink/Paper 12,2:1,
 * Muted/Paper 7,6:1, Accent/Paper 9,6:1, Accent-Ink/Accent 10,8:1,
 * Ink/Surface 10,3:1 — dunkel 14,8:1, 7,3:1, 5,5:1, 5,5:1, 13,6:1.
 *
 * **#f7ece3, #fbeae6 und #f7f0f1 sind verbrannt.** Orange, Ziegel,
 * Beinahe-Weiss; keiner von ihnen soll wiederkommen, und
 * config/tests_stumme_fehler.py hält das fest. */
:root[data-theme-name="glut"],
[data-theme-probe="glut"] {
  --font-heading: "Work Sans", sans-serif;
  --font-body: "Work Sans", sans-serif;
  --paper: #4a1622;
  --surface: #5d1f2d;
  --ink: #f7e6e9;
  --muted: #e0aeb7;
  --line: #7a3040;
  --accent: #e8c9cf;
  --accent-ink: #3a1019;
  --d-paper: #1c1013;
  --d-surface: #2a161b;
  --d-ink: #f4e1e5;
  --d-muted: #cf929c;
  --d-line: #48272e;
  --d-accent: #cf6e83;
  --d-accent-ink: #1c1013;
}

/* Stein — neutrale Grau- und Beigetöne */
:root[data-theme-name="stein"],
[data-theme-probe="stein"] {
  --font-heading: "Work Sans", sans-serif;
  --font-body: "Work Sans", sans-serif;
  --paper: #f0ede7;
  --surface: #e4dfd6;
  --ink: #2c2a26;
  --muted: #5c584f;
  --line: #cfc7ba;
  --accent: #55524a;
  --accent-ink: #f7f5f0;
  --d-paper: #1e1c19;
  --d-surface: #29261f;
  --d-ink: #ece8e0;
  --d-muted: #b3ac9e;
  --d-line: #43403a;
  --d-accent: #a39a88;
  --d-accent-ink: #1e1c19;
}

/* Nebel — helle Silber- und Grautöne */
:root[data-theme-name="nebel"],
[data-theme-probe="nebel"] {
  --font-heading: "Work Sans", sans-serif;
  --font-body: "Work Sans", sans-serif;
  --paper: #f5f6f7;
  --surface: #e9ebec;
  --ink: #26282b;
  --muted: #585c60;
  --line: #d3d6d8;
  --accent: #3f4750;
  --accent-ink: #f7f8f9;
  --d-paper: #1b1d1f;
  --d-surface: #242628;
  --d-ink: #eceeef;
  --d-muted: #a8adb2;
  --d-line: #3a3d40;
  --d-accent: #8b95a0;
  --d-accent-ink: #1b1d1f;
}

/* Ohne getroffene Wahl: Stein als Vorgabe. Die Dunkelwerte stehen hier
   genauso als `--d-*` — nur so greift „Dunkel" auch bei dem, der nie
   ein Theme gewählt hat. */
:root:not([data-theme-name]) {
  --font-heading: "Work Sans", sans-serif;
  --font-body: "Work Sans", sans-serif;
  --paper: #f0ede7;
  --surface: #e4dfd6;
  --ink: #2c2a26;
  --muted: #5c584f;
  --line: #cfc7ba;
  --accent: #55524a;
  --accent-ink: #f7f5f0;
  --d-paper: #1e1c19;
  --d-surface: #29261f;
  --d-ink: #ece8e0;
  --d-muted: #b3ac9e;
  --d-line: #43403a;
  --d-accent: #a39a88;
  --d-accent-ink: #1e1c19;
}

/* --- Und hier wird umgelegt ------------------------------------------
 *
 * Zwei Regeln, ein Satz Werte je Theme. Sie stehen am Ende der Datei,
 * weil sie genauso viel wiegen wie ein Themeblock — die Reihenfolge
 * entscheidet, und diese muss gewinnen.
 *
 * `--d-*` bleiben dabei stehen und werden nicht geleert: sie sind das
 * Vorratsfach, nicht der Arbeitswert. */

/* Ausdrücklich gewählt: „Dunkel" im Menü. */
:root[data-color-mode="dark"] {
  --paper: var(--d-paper);
  --surface: var(--d-surface);
  --ink: var(--d-ink);
  --muted: var(--d-muted);
  --line: var(--d-line);
  --accent: var(--d-accent);
  --accent-ink: var(--d-accent-ink);
}

/* „System" — und das System steht dunkel. `:not([data-color-mode="light"])`
   und nicht `:not([data-color-mode])`: wer ausdrücklich Hell gewählt
   hat, bleibt hell, auch wenn das Gerät dunkel steht. Das ist der Sinn
   der Wahl. */
@media (prefers-color-scheme: dark) {
  :root:not([data-color-mode="light"]) {
    --paper: var(--d-paper);
    --surface: var(--d-surface);
    --ink: var(--d-ink);
    --muted: var(--d-muted);
    --line: var(--d-line);
    --accent: var(--d-accent);
    --accent-ink: var(--d-accent-ink);
  }
}

/* **Der Browser soll seine eigenen Teile mitdrehen** — Rollbalken,
   Textfelder, Auswahllisten. Ohne diese Angabe stand ein helles
   Eingabefeld in einer dunklen Seite. */
:root[data-color-mode="dark"] {
  color-scheme: dark;
}

:root[data-color-mode="light"] {
  color-scheme: light;
}

:root:not([data-color-mode]) {
  color-scheme: light dark;
}