/* ============================================================ Themes — Sudoku Sagax (Phase 0.2) Dark ist die Basis (tokens.css). Hier: Light-Overrides. js/theme.js löst die Nutzerwahl (auto|dark|light) auf und setzt data-theme="light" bzw. "dark" auf — daher genügt EIN Light-Block (kein doppelter @media-Block, kein FOUC). Wärmere Creme-/Pergament-Optik, Gold-Identität bleibt (dunkler, damit auf hellem Grund lesbar). ============================================================ */ :root[data-theme="light"] { /* Surfaces */ --color-bg-base: #f3ead9; --color-bg-surface: #ece0c9; --color-bg-surface-raised: #fbf5ea; --color-bg-overlay: rgba(60, 34, 22, 0.42); /* Panels (Glas) */ --color-panel: rgba(92, 52, 30, 0.055); --color-panel-border: rgba(92, 52, 30, 0.15); --color-accent-deep: #a8202b; /* Overlays & Linien: auf hell dunkle statt weiße Alphas */ --surface-1: rgba(60, 34, 22, 0.05); --surface-2: rgba(60, 34, 22, 0.08); --surface-3: rgba(60, 34, 22, 0.12); --hairline: rgba(60, 34, 22, 0.18); --hairline-soft: rgba(60, 34, 22, 0.08); --hairline-strong: rgba(60, 34, 22, 0.24); --star-empty: rgba(60, 34, 22, 0.2); --scrim: rgba(40, 22, 14, 0.35); --scrim-panel: rgba(243, 234, 217, 0.86); /* Primary (Gold, dunkler für Kontrast auf hell) */ --color-primary: #a9762a; /* Als Flaeche taugt #a9762a, als Schrift auf Creme nicht: 2,79:1. Dieser Ton ergibt 4,87:1 und traegt damit auch den Fokusring (WCAG 1.4.11). */ --color-primary-text: #7a5218; --color-primary-hover: #c08f38; --color-primary-active: #8a5f20; --color-primary-muted: #b8a074; /* Auf Creme traegt das helle Gold keine Kante mehr, deshalb hier der dunklere Ton mit etwas mehr Deckung. */ --gold-soft: rgba(150, 108, 40, 0.42); /* PASSEPARTOUT FUER DIE MOTIVE. Gemessen, nicht gewaehlt. Die Bilder haben eine mittlere Luminanz von 0,04 bis 0,06 (warme, fast schwarze Brauntoene, etwa #4a332d). Auf dem dunklen Grund (#1c0c0f, Luminanz 0,005) ergibt das 1,6 bis 1,9:1 -- Bild und Seite verschmelzen, und genau so ist es gedacht. Auf Creme (#f3ead9, Luminanz 0,829) sind es 8,2 bis 9,8:1: Das Bild trifft die Seite mit demselben Kontrast, mit dem schwarze Schrift auf Papier trifft. Deshalb wirkten die Kacheln wie Loecher, die jemand in die Seite geschnitten hat. #a68868 liegt fast genau dazwischen: 2,77:1 zum Creme, 3,52:1 zum Motiv. Aus einem Sprung werden zwei Stufen, und das Bild liest sich als gerahmtes Bild. Wer den Ton aendert, sollte die Rechnung noch einmal machen -- Block 289a haelt ihn deshalb fest. */ --motiv-rahmen: #a68868; /* Semantik */ --color-success: #3f8a4e; --color-error: #c33a4f; --color-warning: #b5751f; --color-info: #3a6ea5; /* Text */ --color-text-primary: #2c1c14; --color-text-secondary: #5c4638; --color-text-muted: #8a7360; --color-text-disabled: #b3a390; /* Board-Grundflaeche (Light): Zellen heller als Body/Board-Padding, alternierend leicht angetoent fuer die 3x3-Bloecke. */ --board-cell-base: #fdf7ec; /* helles Creme, heller als Body (#f3ead9) */ --board-cell-alt: #f6ecd7; /* leicht Richtung Peach fuer ungerade Bloecke */ --grid-line: rgba(139, 74, 40, 0.25); --grid-line-block: rgba(139, 74, 40, 0.65); --board-frame: rgba(139, 74, 40, 0.6); --board-highlight-line: rgba(139, 74, 40, 0.1); /* Board-Zellzustände */ --cell-selected: rgba(169, 118, 42, 0.28); --cell-peer: rgba(169, 118, 42, 0.10); --cell-same-number: rgba(169, 118, 42, 0.18); --cell-conflict: rgba(195, 58, 79, 0.20); --cell-success: rgba(63, 138, 78, 0.18); --cell-hint: rgba(181, 117, 31, 0.20); /* Ziffernfarben */ --num-given: #2c1c14; --num-user: #8a5f20; --num-pencil: #8a7360; --num-error: #c33a4f; /* Killer-Summen-Chip im hellen Theme: heller Chip + dunkle Zahl, damit die (dunkle) Ziffer im Anker-Feld nicht mehr dunkel-auf-dunkel verschwindet. */ --killer-sum-bg: rgba(247, 240, 227, 0.95); --killer-sum-fg: #5f3f16; /* Elevation */ --shadow-sm: 0 1px 2px rgba(80, 50, 30, 0.12); --shadow-md: 0 4px 16px rgba(80, 50, 30, 0.14); /* Der rote Glow des Hauptknopfes ist ein Mittel fuer dunklen Grund. Auf Creme wird daraus staubiges Rosa. Gleiche Hoehe, aber warm-neutral. */ --shadow-primary: 0 6px 18px -8px rgba(80, 50, 30, 0.45); --shadow-primary-hover: 0 10px 26px -10px rgba(80, 50, 30, 0.55); --shadow-lg: 0 16px 40px rgba(80, 50, 30, 0.18); --shadow-glow-primary: 0 0 24px rgba(169, 118, 42, 0.3); --shadow-glow-success: 0 0 24px rgba(63, 138, 78, 0.3); /* Nicht-Token-Variablen aus styles.css (per höherer Spezifität überschrieben) */ --shadow: 0 20px 60px -15px rgba(80, 50, 30, 0.25); --ctrl: linear-gradient(180deg, #fbf5ea, #efe4d0); --ctrl-hover: linear-gradient(180deg, #ffffff, #f4ead6); --ctrl-brd: color-mix(in srgb, var(--accent) 34%, rgba(92, 52, 30, 0.12)); --ctrl-sh: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 8px -4px rgba(80, 50, 30, 0.2); --ctrl-sh-hover: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 20px -8px color-mix(in srgb, var(--accent) 40%, transparent); } /* Deko-Ausnahmen (Body-Glow, Orbs) für Light-Mode anpassen — warme, helle Atmosphäre statt Wein/Braun auf Creme. */ :root[data-theme="light"] body { /* Dieselben festen Laengen wie im dunklen Thema (siehe den Kommentar bei `body` in styles.css). Diese Haelfte ist die, die man vergisst: Die Kurzform `background:` setzt Groesse und Wiederholung zurueck, also muessen beide hier mitkommen -- sonst sehen die Glows im dunklen Thema richtig aus und im hellen nicht. */ background: radial-gradient(1200px 800px at 20% -76px, rgba(169, 118, 42, 0.10) 0%, transparent 55%), radial-gradient(1000px 700px at 100% 76px, rgba(150, 90, 50, 0.08) 0%, transparent 50%), linear-gradient(160deg, var(--bg), var(--bg2)); background-repeat: no-repeat; background-size: auto, auto, 100% 100vh; background-color: var(--bg2); } :root[data-theme="light"] .orb { opacity: 0.16; } /* Die Motive im hellen Thema: gerahmt statt eingeklebt. NUR HIER, nicht in styles.css. Im dunklen Thema soll das Bild mit dem Grund verschmelzen; ein Rahmen dort waere eine Kante, die abschneidet, was sich gerade fortsetzt. Genau diese Haelfte vergisst man leicht. Der Abstand ist so wichtig wie der Rahmen: Ohne ihn liefe das Bild bis an die Kartenkante, und der Rahmen waere nur eine Linie am Rand statt eines Passepartouts. Mit ihm steht ringsum ein Streifen Kartenfarbe -- die Zwischenstufe, an der es vorher fehlte. */ :root[data-theme="light"] .diff-img, /* Der Startbildschirm der App ist der haerteste Fall: das Logo-Motiv liegt bei 11,15:1 zum Creme, Nonas Portraet bei 12,75:1. Genau diese Kachel hat Korbi im Emulator gesehen. Mit Rahmen werden daraus 2,77 und 4,02. */ :root[data-theme="light"] .as-logo { margin: 8px 8px 0; width: calc(100% - 16px); /* `height: auto` ist hier Pflicht, nicht Kosmetik -- dieselbe Begruendung wie in der Grundregel: Das traegt width/height-Attribute, damit der Platz vor dem Laden reserviert ist. Wer die Breite neu setzt und die Hoehe offen laesst, nimmt dem Browser das Seitenverhaeltnis, und die Seite springt beim Laden. Pruefung 196b2 faengt genau das. */ height: auto; border: 2px solid var(--motiv-rahmen); border-radius: 12px; /* Der Schatten hebt das Bild eine Spur von der Karte ab, damit es aufliegt statt eingelassen zu wirken. Warm getoent, kein neutrales Grau. */ box-shadow: 0 6px 16px -8px rgba(92, 52, 30, 0.55); } /* Die Kacheln der Werbeseite tragen das Bild randlos (`object-fit: cover`), der Rahmen gehoert deshalb an die Kachel selbst. Sie HATTEN schon einen -- `--panel-brd`, im hellen Thema rgba(92, 52, 30, 0.15). Ueber einem fast schwarzen Motiv ist das unsichtbar, und meine erste Sonde hat sie deshalb faelschlich als "gerahmt" gezaehlt: Sie fragte nach der Rahmenbreite, nicht danach, ob man ihn sieht. Ein Rahmen, der nicht traegt, ist kein Rahmen. Ausgerechnet diese Kacheln sind die wichtigsten: Auf der Werbeseite landet bezahlter Verkehr. */ :root[data-theme="light"] .land-tile { border: 2px solid var(--motiv-rahmen); box-shadow: 0 6px 16px -8px rgba(92, 52, 30, 0.55); } /* Dieselbe Behandlung fuer die runden Portraets (Rang auf der Fortschrittskarte, Rangkopf). Sie sind kleiner, deshalb ein duennerer Rahmen -- zwei Pixel um ein 60px-Bild waeren ein Reifen, kein Rahmen. */ :root[data-theme="light"] .lc-badge, :root[data-theme="light"] .rankhead-img, :root[data-theme="light"] .profile-avatar { border: 1px solid var(--motiv-rahmen); }