/* ============================================================ themes.css — Duales Theme-System ------------------------------------------------------------ Dark Mode = "Dark Gallery" (digital, düstere Galerie) Light Mode = "Light Zine" (rohes Editorial / Xerox-Zine) Dark/Light sind KEINE Invertierung, sondern zwei eigen- ständige Markenwelten desselben Brandings. Theme-Auswahl per [data-theme] auf ; Default folgt prefers-color-scheme, kann via JS überschrieben werden. ============================================================ */ /* ---------- Default: Dark Gallery ---------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0b0b; --surface: #141414; --surface-strong: #1f1f1f; --text: #f2f2ee; --text-muted: #9a9a94; --border: #33332f; --accent: #e8acc1; --accent-secondary: #d7ff00; /* Lesbare Textfarbe AUF dem Akzent (Rosé ist hell → dunkler Text) */ --on-accent: #0b0b0b; /* Theme-spezifische Sekundär-Tokens */ --shadow-hard: 4px 4px 0 var(--text); --shadow-hard-hover: 6px 6px 0 var(--text); --noise-opacity: 0.05; --hairline-strong: var(--text); --label-bg: var(--surface-strong); --label-border: var(--border); --media-frame: var(--text); } /* ---------- Light Zine ---------- */ :root[data-theme="light"] { color-scheme: light; --bg: #f2f2ee; --surface: #ffffff; --surface-strong: #e8e8e1; --text: #0b0b0b; --text-muted: #5d5d57; --border: #111111; --accent: #e8acc1; --accent-secondary: #c6ea00; --on-accent: #0b0b0b; --shadow-hard: 4px 4px 0 var(--text); --shadow-hard-hover: 6px 6px 0 var(--text); --noise-opacity: 0.07; --hairline-strong: var(--text); --label-bg: var(--surface); --label-border: var(--text); --media-frame: var(--text); } /* ---------- prefers-color-scheme: light Fallback ---------- Greift nur, wenn JS noch nicht gesetzt hat. JS überschreibt data-theme so früh wie möglich (siehe theme.js, inline-Init). */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #f2f2ee; --surface: #ffffff; --surface-strong: #e8e8e1; --text: #0b0b0b; --text-muted: #5d5d57; --border: #111111; --accent: #e8acc1; --accent-secondary: #c6ea00; --on-accent: #0b0b0b; --shadow-hard: 4px 4px 0 var(--text); --shadow-hard-hover: 6px 6px 0 var(--text); --noise-opacity: 0.07; --hairline-strong: var(--text); --label-bg: var(--surface); --label-border: var(--text); --media-frame: var(--text); } }