/* ════════════════════════════════════════════════════════════════════ theme-light.css — Typewriter (paper) Hell-Theme. Aktiv wenn `html.light-theme` gesetzt ist. Überschreibt die Defaults aus theme-dark.css. Design-Sprache: warmer Papier-Grund + Tinten-Schwarz, mit Zinnober als einzigem Akzent. Gepaart wird das Ganze mit Courier Prime als Schreibmaschinen-Schrift (siehe style.css body) und der getilten Papier-Textur public/paper-light.png als Hintergrundbild. WICHTIG: Variablen-Namen müssen identisch zu theme-dark.css bleiben, sonst fällt eine Regel im falschen Theme auf den Walnuss-Wert zurück. ════════════════════════════════════════════════════════════════════ */ html.light-theme { /* ── Flächen ──────────────────────────────────────────────────────── Drei Stufen helles Papiergrau, leicht entsättigt mit einem Hauch Wärme. Die Papier-Textur ist mit dieser Basisfarbe multipliziert → das fertige Bild liegt etwas dunkler als die Basisfarbe; Basis daher recht hell wählen, damit das Endergebnis nach hellem Papier aussieht. */ --bg: #E1E0DC; --surface: #ECEBE7; --surface2: #C7C6C2; /* ── Papier-Textur ────────────────────────────────────────────────── Fertig mit --bg multipliziertes Bild (scripts/make-paper-textures.js); im CSS wird bewusst NICHT geblendet — siehe theme-dark.css. Wer --bg ändert, muss das Skript neu laufen lassen. */ --paper: url('../paper-light.png'); /* In-Game-Buchstabentasten: im Hell-Theme unverändert die Surface-Fläche. */ --hex-key: var(--surface); --hex-key-hover: var(--surface2); /* ── Akzent ───────────────────────────────────────────────────────── Terrakotta/Ziegelrot — die zweite Markenfarbe aus dem Logo (orange Kacheln) und dem „Beitreten"-Button. Löst das frühere Gold-Gelb ab; ein warmer, satter Ton, der den Required-Letter-Knopf und die Akzentflächen aus dem Papier hebt. --accent-d ist der dunklere Hover-/Gradient-Endpunkt. */ --accent: #B55A2E; --accent-d: #974A22; /* `--accent` ist Fläche/Stroke, NIE Vordergrund-Text (Terrakotta auf Creme ≈ 3.5:1, unter WCAG AA für Fließtext). Hervorgehobene Texte (Score-Zahlen, Code-Tag, Pangram-Hinweise) nutzen `--accent-text`. Im Hell-Theme fällt die Akzentfarbe als Text weg und die Tinte trägt die Prominenz über Bold+Größe. Im Dunkel-Theme darf `--accent-text` auf `--accent` fallen. Siehe CLAUDE.md → „Theme colors — never use `--accent` as text color". */ --accent-text: var(--text); /* ── Brand-Grün ───────────────────────────────────────────────────── Das Waldgrün der grünen Logo-Kacheln und des „Neuen Raum erstellen"- Buttons. Erste Markenfarbe neben dem Terrakotta-Akzent. Trägt IMMER weißen Text. (Variablenname historisch `--violet`; hält jetzt Grün.) */ --violet: #395031; --violet-d: #2B3D25; /* Themenunabhängige warme Marken-Fläche (Timer, Countdown-Ring, Required- Letter im Dunkel-Theme). Früher Gold-Gelb, jetzt Terrakotta — passend zum Akzent. Trägt helle (cremefarbene/weiße) Schrift. Name historisch `--gold`. */ --gold: #B55A2E; --gold-d: #974A22; /* ── Text ─────────────────────────────────────────────────────────── --text: warmes Schwarz, kein reines Schwarz (passt zum Papier). Etwas dunkler gestellt (#28241E → #14110A), damit Fließtext auf Start-Screen und Game-Settings besser lesbar steht; bleibt warm-dunkel statt reinem #000. --muted: verblasste Tinte für sekundäre Texte / Labels. --section-title geerbt aus theme-dark.css (dort als #d1d1da gesetzt); im Hell-Theme nicht eigens nötig, weil Section-Titles auf hellem Grund einfach in --muted gehen. Bei Bedarf hier ergänzen. */ --text: #060503; /* Sekundär-Tinte (Labels, Untertitel, Fließtext in Modals/Prosa). Bewusst dunkler gestellt (#595444 → #3C3728), damit der Lesetext im Hell-Theme kräftiger/dunkler wirkt; bleibt warm und noch klar unter --text. */ --muted: #3C3728; /* Fläche der editierbaren Werte im Lobby-Fließtext (.prose-val-box). Nicht --surface: das liegt nur eine Nuance über --bg, und halbtransparent über der Papier-Textur blieb von der Aufhellung kaum etwas übrig. Statt dessen ein warmes Fast-Weiß — heller als jede Flächenstufe des Themes, aber weiterhin durchscheinend, damit die Papierstruktur sichtbar bleibt (deckendes Weiß wäre ein aufgeklebter Zettel). */ --prose-val-bg: color-mix(in srgb, #FBFAF6 62%, transparent); /* ── Status-Farben ────────────────────────────────────────────────── Etwas gedeckter als die Defaults, damit sie zur Papier-Palette passen. --red bewusst nicht-Zinnober, weil Status-Rot und Akzent sonst kollidieren würden. */ --green: #2A4818; --red: #A03B2E; /* Grün für kleine Symbolflächen (Daumen an der Bedeutungs-Bewertung). --green ist als Textfarbe gesetzt und wirkt auf 15 px Fläche fast schwarz — und deutlich schwerer als das gleich große Rot daneben. Etwas heller gestellt liegt es im selben Kontrastbereich wie --red (≈4,8:1 auf --bg, klar über den 3:1 für grafische Elemente). */ --green-soft: #3E6B22; /* ── Krebsworträtsel, allein gespielt ─────────────────────────────── Auf der Ergebnisseite sagt die Fläche dort nicht, WER das Wort hatte (es gibt nur einen), sondern was damit war: gelöst, angesehen und nicht gelöst, nie aufgeschlagen. Drei Stufen, alle hell genug für die normale Tinte darauf — „nie aufgeschlagen" ist weißer als das Papier ringsum und liest sich damit als leer gebliebenes Feld. */ --crab-solo-solved: #A9D6A0; --crab-solo-seen: #CFCCC4; --crab-solo-unseen: #FFFFFF; --blue: #2C5566; /* Pangram-Hervorhebung. Früher Lila (#6B3A6B); jetzt ein tiefes Petrol/Teal als kühler Gegenpol zu Grün (Erfolg) und Terrakotta (Akzent) — bleibt klar unterscheidbar und enthält kein Lila/Gelb mehr. Name historisch `--purple`. */ --purple: #1F6E66; /* ── Rahmen ───────────────────────────────────────────────────────── Halbtransparente Tinte — auf paper.png-Hintergrund noch deutlich genug, ohne dass jede Linie schreit. */ --border: rgba(40, 36, 30, 0.20); /* Links: auf Papier bleibt es beim vertrauten Browser-Blau — hier steht es nur explizit, damit beide Themes denselben Regelweg nehmen (siehe `a, a:visited` in style.css) und ein besuchter Link nicht violett ausschert. */ --link: #0000EE; /* ── Wörter-Grid: gefundene Wörter ───────────────────────────────── Drei Stufen Verdunkelung pro Found-Status: single finder → voll gesättigte Spielerfarbe (per JS; nicht hier) multi-finder → dunkles Warmgrau (kein Spielerbezug mehr, Wort ist „geteilt") all-found → fast Schwarz, damit endgültig erledigte Wörter klar als geschlossene Box lesbar werden. Text auf beiden dunklen Hintergründen + auf der Spielerfarbe → das gemeinsame --grid-found-text in Cream-Weiß (genauso wie .revealed- Buchstaben in CSS). */ --grid-found-bg-multi: #555049; --grid-found-bg-all: #28241E; --grid-found-text: #F2EBDA; }