:root { --bg: #070B14; --bg2: #0F1623; --bg3: #1a2233; --accent: #00C896; --accent-dk: #00a07a; --text: #e2e8f0; --text-muted: #94a3b8; /* Betont/hell hervorgehobener Text (frueher hartkodiertes #fff auf Karten). Im Hellmodus wird daraus ein dunkler Ton, damit er lesbar bleibt. */ --text-strong: #ffffff; /* Textfarbe AUF der Akzentflaeche (Buttons/Badges) – bewusst in beiden Modi dunkel, damit der Kontrast auf Gruen stimmt. Nicht ueberschreiben. */ --on-accent: #070B14; --border: #1e2d45; --danger: #ef4444; --warn: #f59e0b; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow: 0 4px 24px rgba(0,0,0,.4); --font-display: 'Syne', sans-serif; --font-body: 'Inter', sans-serif; } /* ── Hell-Modus ───────────────────────────────────────────────────────────── Wird ueber data-theme="light" am -Element aktiviert (per Umschalter, in localStorage gemerkt). Standard bleibt der Dunkelmodus (ohne Attribut). Es werden nur die Farb-Tokens gekippt – alle Komponenten ziehen automatisch nach, weil sie durchgaengig var(--…) nutzen. Der Akzent wird fuer besseren Kontrast auf Weiss etwas abgedunkelt. */ :root[data-theme="light"] { --bg: #f3f6fb; --bg2: #ffffff; --bg3: #eaeff7; --accent: #00795b; --accent-dk: #005f47; --text: #253044; --text-muted: #5a6b83; --text-strong: #0b1220; --border: #d6deea; --shadow: 0 4px 24px rgba(20,35,65,.12); }