/* * themes.css * Alle Farb-Variablen für Dark, Light und Retro Theme. * Das Theme wird per data-theme Attribut am Tag gesetzt. * * TODO: Google Fonts (siehe index.html) für DSGVO-Konformität * selbst hosten. Fonts herunterladen und in /assets/fonts/ ablegen. */ /* ── DARK (Standard) ──────────────────────────────── */ [data-theme="dark"] { --bg: #08080f; --bg-card: #0e0e1a; --bg-card-alt: #111120; --text: #f0ede4; --text-muted: #a0a0b8; --text-subtle: #5a5a72; --accent: #6ee7b7; --accent-dim: rgba(110,231,183,0.12); --accent-text: #0f6e56; --li-color: #4da6d8; --border: rgba(255,255,255,0.08); --border-hover: rgba(255,255,255,0.16); --shadow: 0 4px 24px rgba(0,0,0,0.4); --radius: 14px; --radius-sm: 8px; color-scheme: dark; } /* ── LIGHT ────────────────────────────────────────── */ [data-theme="light"] { --bg: #f2ede4; --bg-card: #faf8f4; --bg-card-alt: #f0ebe0; --text: #1a1a28; --text-muted: #888070; --text-subtle: #bbb5a8; --accent: #0f6e56; --accent-dim: rgba(15,110,86,0.08); --accent-text: #0f6e56; --li-color: #0077b5; --border: rgba(0,0,0,0.07); --border-hover: rgba(0,0,0,0.15); --shadow: 0 4px 20px rgba(0,0,0,0.07); --radius: 14px; --radius-sm: 8px; color-scheme: light; } /* ── RETRO (90s) ──────────────────────────────────── */ [data-theme="retro"] { --bg: #c0c0c0; --bg-card: #d4d0c8; --bg-card-alt: #bdb9b1; --text: #000000; --text-muted: #444444; --text-subtle: #888888; --accent: #000080; --accent-dim: rgba(0,0,128,0.1); --accent-text: #000080; --li-color: #0000cc; --border: rgba(0,0,0,0.5); --border-hover: rgba(0,0,0,0.8); --shadow: 2px 2px 0px #000, inset 1px 1px 0px #fff; --radius: 0px; --radius-sm: 0px; color-scheme: light; }