/* ════════════════════════════════════════════════════════════════════
   theme-dark.css — Typewriter (Walnut) Dunkel-Theme. Default ohne
   Bedingung auf :root; theme-light.css überschreibt bei html.light-theme.

   Design-Sprache: tiefes Nussbaum-Braun + warmes Cream als Tinte, mit
   Zinnober als einzigem Akzent (identisch zum Hell-Theme — der Akzent
   wechselt nicht beim Theme-Toggle).

   Jede Variable muss namensgleich in theme-light.css existieren.
   Rohe Hex-/RGBA-Werte gehören NICHT in style.css.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Flächen ─────────────────────────────────────────────────────────
     Drei Stufen warmes Dunkel: --bg ist die Seitenfläche (Body), darauf
     liegt die Papier-Textur → bleibt nahezu schwarz mit leichter
     Holzkorn-Variation. --surface und --surface2 setzen Karten bzw.
     erhöhte Container leicht heller ab. */
  --bg:        #242019;
  --surface:   #2F2B25;
  --surface2:  #25211C;
  /* ── Papier-Textur ───────────────────────────────────────────────────
     Das Bild ist die Textur BEREITS mit --bg multipliziert (offline von
     scripts/make-paper-textures.js aus image-sources/paper.png erzeugt) —
     im CSS wird nicht mehr geblendet, weil iOS Safari
     `background-blend-mode` ignorierte und die helle Rohtextur deckend
     malte (helle Seite + cremefarbene Schrift = unlesbar).
     Wer --bg ändert, muss das Skript neu laufen lassen. */
  --paper:     url('../paper-dark.png');
  /* In-Game-Buchstabentasten: neutrales Grau statt der warmen Surface-Fläche. */
  --hex-key:        #5A5A5A;
  --hex-key-hover:  #707070;

  /* ── Akzent ──────────────────────────────────────────────────────────
     Terrakotta — die warme Marken-Akzentfarbe aus dem Logo (orange Kacheln,
     „Beitreten"). Etwas heller als im Hell-Theme, damit sie auf Walnuss
     herauskommt. Wird auf Akzentflächen, Pangram-Highlights und Borders
     genutzt. Auf --accent steht IMMER cremefarbener Text. */
  --accent:    #C4642F;
  --accent-d:  #A4501F;
  /* Hervorgehobene Texte (Score-Zahlen, Code-Tag, Pangram-Hinweise) nutzen
     `--accent-text`. Auf Walnuss liegt Terrakotta über WCAG AA für Bold/Große
     Schrift, deshalb hier identisch zu `--accent`; im Hell-Theme fällt der Wert
     auf `--text` zurück. Siehe CLAUDE.md → „Theme colors — never use `--accent`
     as text color". */
  --accent-text: var(--accent);

  /* ── Brand-Grün ──────────────────────────────────────────────────────
     Das Waldgrün der grünen Logo-Kacheln und des „Neuen Raum erstellen"-
     Buttons; etwas aufgehellt für Walnuss-Hintergrund. Trägt IMMER weißen
     Text. (Variablenname historisch `--violet`; hält jetzt Grün.) */
  --violet:    #587B36;
  --violet-d:  #45602A;

  /* Themenunabhängige warme Marken-Fläche (Timer, Countdown-Ring, Required-
     Letter). Früher Gold-Gelb, jetzt Terrakotta wie der Akzent. Trägt helle
     Schrift. Name historisch `--gold`. */
  --gold:      #C4642F;
  --gold-d:    #A4501F;

  /* ── Text ────────────────────────────────────────────────────────────
     --text:           warmes Cream auf Walnuss — maximaler Kontrast.
     --muted:          verblasste Tinte für sekundäre Texte.
     --section-title:  zwischen --text und --muted, eigener Ton für
                       Sektionsüberschriften. */
  --text:           #ECE7DA;
  --muted:          #B2AB9C;
  --section-title:  #968F81;

  /* Fläche der editierbaren Werte im Lobby-Fließtext (.prose-val-box).
     Halbtransparent, damit die Papier-Textur durchscheint. Auf Walnuss reicht
     die eine Stufe Surface — heller wäre hier schon ein Kasten statt einer
     angedeuteten Fläche (das Hell-Theme setzt einen eigenen Wert). */
  --prose-val-bg: color-mix(in srgb, var(--surface) 50%, transparent);

  /* ── Status-Farben ───────────────────────────────────────────────────
     Klassisches Ampel-Vokabular, gedeckt damit es zur Papier-Tinten-
     Palette passt. */
  --green:   #6B8B3E;
  --red:     #C7563E;
  /* Grün für kleine Symbolflächen (siehe theme-light.css). Auf Walnuss ist
     --green ohnehin schon hell genug — hier keine eigene Stufe nötig. */
  --green-soft: var(--green);

  /* ── Krebsworträtsel, allein gespielt ────────────────────────────────
     Siehe theme-light.css. Auf Walnuss geht die Reihe andersherum: das nie
     aufgeschlagene Feld ist die unberührte Feldfläche (--hex-key), das
     angesehene eine Stufe gedämpfter, das gelöste grün. Alle drei dunkel
     genug für die cremefarbene Tinte darauf. */
  --crab-solo-solved: #3F5E2B;
  --crab-solo-seen:   #46423C;
  --crab-solo-unseen: var(--hex-key);
  --blue:    #4A7382;
  /* Pangram-Hervorhebung. Früher Lila (#8A5A8A); jetzt helles Petrol/Teal als
     kühler Gegenpol zu Grün und Terrakotta — kein Lila/Gelb mehr.
     Name historisch `--purple`. */
  --purple:  #3E9E94;

  /* ── Rahmen ──────────────────────────────────────────────────────────
     Halbtransparentes Cream als universeller Border-Ton — funktioniert
     sowohl auf --bg als auch auf --surface durch die paper-Textur. */
  --border:  rgba(216, 211, 196, 0.18);

  /* Links (Kontakt-Mail im Impressum, Quellen-/Lizenzzeilen). Das Browser-
     Standardblau (#0000EE, und als besuchter Link ein noch dunkleres Violett)
     ist auf Walnuss praktisch unlesbar — hier ein aufgehelltes, leicht
     entsättigtes Blau, das zum warmen Grundton passt und klar über AA liegt
     (~7:1 auf --bg). */
  --link:    #8FBAE0;

  /* ── Wörter-Grid: gefundene Wörter ──────────────────────────────────
     Siehe theme-light.css für die Semantik (drei Stufen). Walnuss-
     Pendants: multi-finder gerade noch heller als --bg (sichtbarer
     Kontrast gegen Walnuss-Grund), all-found nahezu schwarz. Text auf
     beiden dunklen Hintergründen in Cream-Weiß. */
  --grid-found-bg-multi:  #4A4438;
  --grid-found-bg-all:    #0F0D0A;
  --grid-found-text:      #F2EBDA;
}