/* ============================================================================ Game Design Tokens ============================================================================ Gemeinsame Design-Tokens für alle Spiele. Ein Spiel bindet diese Datei VOR seinem eigenen Stylesheet ein und benutzt danach ausschließlich `var(--…)`. REGEL: Keine Hex- oder rgba()-Literale in Game-CSS. Wenn ein Wert fehlt, kommt er hier rein — nicht ins Game-CSS. --------------------------------------------------------------------------- Warum es zu jeder Farbe ein `--*-rgb` gibt --------------------------------------------------------------------------- `rgba(var(--green), 0.24)` funktioniert NICHT — die klassische Komma-Syntax akzeptiert keine Variable für die Kanäle. Deshalb liegt jede Basisfarbe zusätzlich als Kanal-Tripel vor, das mit der modernen Schrägstrich-Syntax beliebige Deckkraft erlaubt: border-color: rgb(var(--green-rgb) / 0.24); box-shadow: 0 0 24px rgb(var(--green-rgb) / 0.24); Das `--x` (fertige Farbe) benutzt man für volle Deckkraft, das `--x-rgb` wenn Alpha gebraucht wird. Beide zeigen immer auf denselben Farbwert. --------------------------------------------------------------------------- Themes --------------------------------------------------------------------------- `:root` trägt das dunkle Standard-Theme (Matrix-Look). Weitere Themes werden als Klasse auf ergänzt und überschreiben nur die Werte, nie die Namen. ========================================================================= */ :root { /* ---------- Flächen ---------- */ --bg: #020704; --bg-rgb: 2 7 4; --bg-soft: #06120b; --bg-soft-rgb: 6 18 11; /* Panel-Basis: wird meist mit Alpha verwendet, daher beide Formen */ --panel-base: #04160c; --panel-base-rgb: 4 22 12; --panel-strong-base: #062312; --panel-strong-base-rgb: 6 35 18; --panel: rgb(var(--panel-base-rgb) / 0.82); --panel-strong: rgb(var(--panel-strong-base-rgb) / 0.92); /* ---------- Linien ---------- */ --line-base: #4aff7c; --line-base-rgb: 74 255 124; --line: rgb(var(--line-base-rgb) / 0.38); --line-hot-base: #91ffa8; --line-hot-base-rgb: 145 255 168; --line-hot: rgb(var(--line-hot-base-rgb) / 0.82); /* ---------- Text ---------- */ --text: #d9ffe2; --text-rgb: 217 255 226; --muted: #77c98b; --muted-rgb: 119 201 139; /* ---------- Primärakzent (Grün) ---------- */ --green: #37ff75; --green-rgb: 55 255 117; --green-hot: #b8ffc8; --green-hot-rgb: 184 255 200; --green-dark: #0d7f3a; --green-dark-rgb: 13 127 58; --green-dim: #0a7f3a; --green-dim-rgb: 10 127 58; /* ---------- Semantische Akzente ---------- Diese fünf müssen in JEDEM Theme klar voneinander unterscheidbar bleiben — Spieler lesen daran ab, um welches System es geht. */ --prestige: #d197ff; --prestige-rgb: 209 151 255; --prestige-hot: #f1d5ff; --prestige-hot-rgb: 241 213 255; --prestige-deep: #341046; --prestige-deep-rgb: 52 16 70; --prestige-shadow: #260d35; --prestige-shadow-rgb: 38 13 53; --prestige-ink: #14061b; --achievement: #7dd3ff; --achievement-rgb: 125 211 255; --achievement-hot: #d7f3ff; --achievement-hot-rgb: 215 243 255; --achievement-deep: #14435f; --achievement-deep-rgb: 20 67 95; --building: #ff8f45; --building-rgb: 255 143 69; --building-hot: #ffc18a; --building-hot-rgb: 255 193 138; --building-line: rgb(var(--building-rgb) / 0.46); --building-deep: #421d08; --building-deep-rgb: 66 29 8; --building-deeper: #3f1c08; --building-deeper-rgb: 63 28 8; --gold: #ffd95a; --gold-rgb: 255 217 90; --gold-hot: #fff3ac; --gold-hot-rgb: 255 243 172; --gold-pale: #fff0a6; --gold-pale-rgb: 255 240 166; --gold-sand: #f4ea8d; --gold-sand-rgb: 244 234 141; --gold-bright: #ffc83c; --gold-bright-rgb: 255 200 60; --gold-amber: #ffc33c; --gold-amber-rgb: 255 195 60; --gold-deep: #9e7f05; --gold-deep-rgb: 158 127 5; --gold-shadow: #434802; --gold-shadow-rgb: 67 72 2; --gold-umber: #433002; --gold-umber-rgb: 67 48 2; --gold-ink: #171000; --gold-ink-rgb: 23 16 0; --red-event: #ff536d; --red-event-rgb: 255 83 109; --red-event-hot: #ff4f72; --red-event-hot-rgb: 255 79 114; --red-event-bright: #ff3c60; --red-event-bright-rgb: 255 60 96; --red-event-pale: #ffc8d0; --red-event-pale-rgb: 255 200 208; --red-event-blush: #ffb0bb; --red-event-blush-rgb: 255 176 187; --red-event-rose: #ffd7df; --red-event-rose-rgb: 255 215 223; --red-event-ink: #24030a; --red-event-ink-rgb: 36 3 10; --danger: #ff4f72; --danger-rgb: 255 79 114; --pink: #ff5ec8; --pink-rgb: 255 94 200; /* ---------- Dunkle Ink-Töne (Text auf hellen Buttons, Gradient-Enden) ---------- */ --ink-deep: #020a06; --ink-deep-rgb: 2 10 6; --ink-black: #01100800; --ink-1: #010905; --ink-1-rgb: 1 9 5; --ink-2: #011008; --ink-2-rgb: 1 16 8; --ink-3: #000402; --ink-3-rgb: 0 4 2; --ink-warm-1: #140c00; --ink-warm-1-rgb: 20 12 0; --ink-warm-2: #100f07; --ink-warm-2-rgb: 16 15 7; --ink-warm-3: #100b02; --ink-warm-3-rgb: 16 11 2; --ink-warm-4: #1d1905; --ink-warm-4-rgb: 29 25 5; --ink-warm-5: #1a1404; --ink-warm-5-rgb: 26 20 4; /* ---------- Schatten ---------- */ --shadow-rgb: 0 0 0; --shadow: 0 0 24px rgb(var(--green-rgb) / 0.24), inset 0 0 26px rgb(var(--green-rgb) / 0.06); /* ---------- Form & Typo ---------- */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; --font-game: "Cascadia Mono", "Consolas", "SFMono-Regular", ui-monospace, monospace; color-scheme: dark; } /* KaktusGarden: 16px-Pixelwelt auf Basis des Cozy-Tokenvertrags. */ .theme-cozy.theme-pixel-garden { --bg: #d8e99a; --bg-rgb: 216 233 154; --bg-soft: #f3d68b; --bg-soft-rgb: 243 214 139; --panel-base: #f7f0df; --panel-base-rgb: 247 240 223; --panel-strong-base: #fffaf0; --panel-strong-base-rgb: 255 250 240; --panel: rgb(var(--panel-base-rgb) / 0.98); --panel-strong: rgb(var(--panel-strong-base-rgb) / 0.99); --line-base: #7b5548; --line-base-rgb: 123 85 72; --line: rgb(var(--line-base-rgb) / 0.92); --line-hot-base: #4e3a32; --line-hot-base-rgb: 78 58 50; --line-hot: rgb(var(--line-hot-base-rgb) / 0.96); --text: #382f2b; --text-rgb: 56 47 43; --muted: #705b4e; --muted-rgb: 112 91 78; --green: #71ab31; --green-rgb: 113 171 49; --green-hot: #28633a; --green-hot-rgb: 40 99 58; --green-dark: #1f4d34; --green-dark-rgb: 31 77 52; --green-dim: #c9df85; --green-dim-rgb: 201 223 133; --gold: #eea160; --gold-rgb: 238 161 96; --gold-hot: #9b552f; --gold-hot-rgb: 155 85 47; --gold-pale: #f6ca70; --gold-pale-rgb: 246 202 112; --gold-ink: #503222; --gold-ink-rgb: 80 50 34; --building: #b56d56; --building-rgb: 181 109 86; --building-hot: #86494b; --building-hot-rgb: 134 73 75; --building-deep: #efd0a7; --building-deep-rgb: 239 208 167; --achievement: #3c87a5; --achievement-rgb: 60 135 165; --achievement-hot: #225b73; --achievement-hot-rgb: 34 91 115; --achievement-deep: #d4edf0; --achievement-deep-rgb: 212 237 240; --prestige: #8e5aa2; --prestige-rgb: 142 90 162; --prestige-hot: #653e78; --prestige-hot-rgb: 101 62 120; --prestige-deep: #eadcf0; --prestige-deep-rgb: 234 220 240; --red-event: #ca594f; --red-event-rgb: 202 89 79; --red-event-hot: #8f3b37; --red-event-hot-rgb: 143 59 55; --red-event-pale: #f4d2c5; --red-event-pale-rgb: 244 210 197; --danger: #a83f3f; --danger-rgb: 168 63 63; --on-accent: #fff8e8; --on-accent-rgb: 255 248 232; --garden-grass: #71ab31; --garden-grass-rgb: 113 171 49; --garden-grass-dark: #367c42; --garden-grass-dark-rgb: 54 124 66; --garden-soil: #b56d56; --garden-soil-rgb: 181 109 86; --radius-sm: 0.125rem; --radius: 0.25rem; --radius-lg: 0.375rem; --radius-pill: 0.25rem; --shadow-soft: 0 4px 0 rgb(var(--line-base-rgb) / 0.28); --shadow-raise: 0 6px 0 rgb(var(--line-hot-base-rgb) / 0.42); --shadow-button: 0 4px 0 var(--line-hot); --shadow-button-press: 0 1px 0 var(--line-hot); --shadow-inset-top: inset 0 3px 0 rgb(var(--on-accent-rgb) / 0.52); } /* ============================================================================ THEME: COZY — creamy, pastel, soft, hand-drawn ============================================================================ Aktivieren mit . Überschreibt nur Werte, nie Namen. Grundsätzlicher Unterschied zum Default: helle Fläche, dunkle Schrift. Alles was im dunklen Theme "leuchtet" (Glow, Neon-Linien) wird hier zu weichem Schatten und sanfter Kante — Glow auf Creme sieht schmutzig aus. --------------------------------------------------------------------------- Achtung bei den Suffixen --------------------------------------------------------------------------- Im dunklen Theme heißt `-hot` / `-pale` "heller, damit es auf Schwarz lesbar ist". Auf Creme dreht sich das um: --x Grundfarbe, für Flächen und Rahmen --x-hot KRÄFTIGER und DUNKLER — für Text und starke Kanten --x-pale/-deep HELLER Tönungs-Ton — nur als Hintergrundfläche Konsequenz fürs Game-CSS: Text nimmt `-hot`, Flächen nehmen `-pale`/`-deep`. Ein aus dem dunklen Theme übernommenes `color: var(--gold-pale)` wäre hier unlesbar. Das gehört beim Umstellen geprüft, nicht blind übertragen. ========================================================================= */ .theme-cozy { /* ---------- Flächen ---------- */ --bg: #fdf4dc; --bg-rgb: 253 244 220; --bg-soft: #f7e8bf; --bg-soft-rgb: 247 232 191; --panel-base: #fff5dc; --panel-base-rgb: 255 245 220; --panel-strong-base: #fffbec; /* angehobene Karte / Hover — heller als --panel */ --panel-strong-base-rgb: 255 251 236; --panel: rgb(var(--panel-base-rgb) / 0.96); --panel-strong: rgb(var(--panel-strong-base-rgb) / 0.99); /* ---------- Linien: goldbraune Kontur statt Neon ---------- */ --line-base: #dcc79a; --line-base-rgb: 220 199 154; --line: rgb(var(--line-base-rgb) / 0.9); --line-hot-base: #a9772e; --line-hot-base-rgb: 169 119 46; --line-hot: rgb(var(--line-hot-base-rgb) / 0.85); /* ---------- Text ---------- */ --text: #3e4026; --text-rgb: 62 64 38; --muted: #716242; --muted-rgb: 113 98 66; /* ---------- Primärakzent (Pastellgrün) ---------- */ --green: #93ab52; --green-rgb: 147 171 82; --green-hot: #52682d; /* dunkler als --green: auf Creme ist "hot" = kräftiger */ --green-hot-rgb: 82 104 45; --green-dark: #3f5122; --green-dark-rgb: 63 81 34; --green-dim: #d6e1ad; /* helles Pastellgrün — Flächen, aktive Tabs */ --green-dim-rgb: 214 225 173; /* ---------- Semantische Akzente ---------- Müssen klar unterscheidbar bleiben; Pastelltöne, die auf Dunkel gehen, verschwinden auf Creme. Für Text und Rahmen zählt Kontrast, nicht Zartheit. */ --prestige: #8a63c7; --prestige-rgb: 138 99 199; --prestige-hot: #6b4aa0; --prestige-hot-rgb: 107 74 160; --prestige-deep: #efe6fb; --prestige-deep-rgb: 239 230 251; --prestige-shadow: #e2d4f5; --prestige-shadow-rgb: 226 212 245; --prestige-ink: #fffbf0; /* Text AUF Violett */ --achievement: #4e92c4; --achievement-rgb: 78 146 196; --achievement-hot: #2e6e9e; --achievement-hot-rgb: 46 110 158; --achievement-deep: #e1eef8; --achievement-deep-rgb: 225 238 248; /* Gebäude = Terrakotta, wie die Töpfe in den Illustrationen */ --building: #c98248; --building-rgb: 201 130 72; --building-hot: #a9622f; --building-hot-rgb: 169 98 47; --building-line: rgb(var(--building-rgb) / 0.45); --building-deep: #f7e3d0; --building-deep-rgb: 247 227 208; --building-deeper: #f2d6bc; --building-deeper-rgb: 242 214 188; --gold: #e4b54b; --gold-rgb: 228 181 75; --gold-hot: #a9772e; /* dunkles Gold — Textfarbe */ --gold-hot-rgb: 169 119 46; --gold-pale: #f4d36c; /* helles Gold — Fläche, NICHT Text */ --gold-pale-rgb: 244 211 108; --gold-sand: #efdca6; --gold-sand-rgb: 239 220 166; --gold-bright: #f4d36c; --gold-bright-rgb: 244 211 108; --gold-amber: #d9a63f; --gold-amber-rgb: 217 166 63; --gold-deep: #8c6224; --gold-deep-rgb: 140 98 36; --gold-shadow: #f7e8bf; --gold-shadow-rgb: 247 232 191; --gold-umber: #6e4b18; --gold-umber-rgb: 110 75 24; --gold-ink: #4a3210; --gold-ink-rgb: 74 50 16; /* Blütenrot — sparsam, nur als kleiner Akzent */ --red-event: #d95b49; --red-event-rgb: 217 91 73; --red-event-hot: #b8412f; --red-event-hot-rgb: 184 65 47; --red-event-bright: #e4674f; --red-event-bright-rgb: 228 103 79; --red-event-pale: #fbe3de; --red-event-pale-rgb: 251 227 222; --red-event-blush: #f5c9c1; --red-event-blush-rgb: 245 201 193; --red-event-rose: #fdefec; --red-event-rose-rgb: 253 239 236; --red-event-ink: #6b2418; --red-event-ink-rgb: 107 36 24; --danger: #b8412f; --danger-rgb: 184 65 47; --pink: #d95b49; /* Kaktusblüte trägt dasselbe Blütenrot */ --pink-rgb: 217 91 73; /* ---------- "Ink"-Namen tragen im Cozy-Theme helle Flächen ---------- Im dunklen Theme sind das Fast-Schwarz-Töne für Gradient-Enden und Text auf hellen Buttons. Hier ist die Fläche hell, also werden daraus Cremestufen. Für Text AUF einer farbigen Fläche gibt es --on-accent (siehe unten). */ --ink-deep: #fffbf0; --ink-deep-rgb: 255 251 240; --ink-black: #fffbf000; --ink-1: #fff5dc; --ink-1-rgb: 255 245 220; --ink-2: #fdf4dc; --ink-2-rgb: 253 244 220; --ink-3: #f7e8bf; --ink-3-rgb: 247 232 191; --ink-warm-1: #f7e8bf; --ink-warm-1-rgb: 247 232 191; --ink-warm-2: #f4ecd4; --ink-warm-2-rgb: 244 236 212; --ink-warm-3: #faeed2; --ink-warm-3-rgb: 250 238 210; --ink-warm-4: #f2e2b6; --ink-warm-4-rgb: 242 226 182; --ink-warm-5: #f8ecd2; --ink-warm-5-rgb: 248 236 210; /* ---------- Cozy-eigene Tokens ---------- */ /* Text auf gefüllten Akzentflächen (grüner Button, Gold-Badge, aktiver Tab). Bewusst NICHT --bg: Creme auf Pastellgrün kommt nur auf ~2,9:1 Kontrast. */ --on-accent: #fffbf0; --on-accent-rgb: 255 251 240; /* Terrakotta als eigene Farbe, unabhängig von --building — die Töpfe und Bodenelemente sollen auch dann stimmen, wenn --building mal umgefärbt wird. */ --terracotta: #c98248; --terracotta-rgb: 201 130 72; --terracotta-deep: #a9622f; --terracotta-deep-rgb: 169 98 47; /* Papierkorn: wird als Alpha auf die Cremefläche gelegt (siehe --texture-paper). */ --paper-rgb: 110 75 24; /* ---------- Schatten: weich und nach unten, kein Glow ---------- */ --shadow-rgb: 110 88 52; --shadow: 0 6px 18px rgb(var(--shadow-rgb) / 0.10), 0 1px 3px rgb(var(--shadow-rgb) / 0.07); /* Karte in Ruhe */ --shadow-soft: 0 4px 12px rgb(var(--shadow-rgb) / 0.09); /* Angehobenes Element (Hover, offenes Panel) */ --shadow-raise: 0 10px 26px rgb(var(--shadow-rgb) / 0.14), 0 2px 5px rgb(var(--shadow-rgb) / 0.08); /* Plastischer Button in Ruhe: harte Unterkante + weicher Abwurf */ --shadow-button: 0 4px 0 rgb(var(--shadow-rgb) / 0.22), 0 7px 14px rgb(var(--shadow-rgb) / 0.16); /* Derselbe Button gedrückt — Versatz kommt aus dem CSS (translateY) */ --shadow-button-press: 0 1px 0 rgb(var(--shadow-rgb) / 0.22), 0 2px 6px rgb(var(--shadow-rgb) / 0.14); /* Innere Aufhellung an der Oberkante, gibt Karten Volumen */ --shadow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.65); /* ---------- Form: deutlich runder ---------- */ --radius-sm: 12px; --radius: 18px; --radius-lg: 26px; --radius-pill: 999px; --font-game: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif; color-scheme: light; }