/* ============================================================ Farbpalette als CSS-Variablen (RGB-Tripel) — für die Tailwind- Seiten (Start, Safe Room, Admin, Modal). tailwind.config liest rgb(var(--ink-900) / ) → Opazitäts-Klassen wie bg-ink-900/70 funktionieren in beiden Themes. Dunkel = Standard. Hell über (theme.js). ============================================================ */ :root { --ink-900: 10 6 6; --ink-800: 18 10 10; --ink-700: 26 15 15; --ink-600: 35 20 20; --ink-500: 44 26 26; --ink-400: 58 36 36; --bone-50: 251 248 243; --bone-100: 245 241 234; --bone-200: 235 229 216; --bone-300: 216 207 185; --bone-400: 168 156 131; --bone-500: 122 111 90; --wine: 139 13 40; --wine-light: 181 23 55; --wine-deep: 87 8 23; --wine-glow: 212 38 79; --gold: 201 161 74; --gold-light: 230 200 121; --gold-deep: 138 111 45; --shadow: 0 0 0; color-scheme: dark; } html[data-theme="light"] { /* „Pergament" — warmes Papier, tiefes Bordeaux, dunkles Altgold */ --ink-900: 248 244 237; --ink-800: 241 234 222; --ink-700: 233 223 206; --ink-600: 222 209 188; --ink-500: 207 192 168; --ink-400: 186 169 143; --bone-50: 24 14 14; --bone-100: 40 27 25; --bone-200: 58 42 37; --bone-300: 84 66 58; --bone-400: 110 92 82; --bone-500: 138 121 108; --wine: 139 13 40; --wine-light: 158 20 50; --wine-deep: 96 9 26; --wine-glow: 170 22 52; --gold: 138 101 24; --gold-light: 160 120 36; --gold-deep: 104 76 18; --shadow: 90 60 40; color-scheme: light; } html, body { background: rgb(var(--ink-900)); color: rgb(var(--bone-100)); } ::selection { background: rgb(var(--wine)); color: #fbf8f3; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: rgb(var(--ink-900)); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgb(var(--wine-deep)), rgb(var(--wine))); border-radius: 10px; } /* Theme-Wechsel weich, aber nicht beim ersten Laden */ html.theme-anim, html.theme-anim * { transition: background-color .35s ease, border-color .35s ease, color .35s ease !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }