/* ============================================================ Chat Tower — geteilte Design-Tokens (web-162) Einzige Definitionsquelle für alle CSS-Custom-Properties, die BEIDE Viewer (viewer.html, viewer_mobile.html seit ui-456) und Companion (style.css) teilen. Eingebunden per: viewer.html → (absolut: viewer.html wird an /viewer.html serviert, tokens.css nur unter /static/* — bare-relativ 404te, fix-002, web-162-Regression) viewer_mobile.html → (ui-456, P5-Kette Glied 7/10 — Mobile linkte diese Datei zuvor NICHT, hatte stattdessen ein eigenes, teils abweichendes lokales :root-Farb-Set, s. web/client/css/mobile.css-Kopfkommentar für die dokumentierten verbliebenen Abweichungen) style.css → @import "tokens.css"; (relativ ok: style.css liegt selbst unter /static/, @import löst zu /static/tokens.css) Kein Code ausserhalb dieser Datei darf :root-Token-Werte neu setzen oder duplizieren (Ausnahme: lokale Overrides via --card-accent, per-Surface-Slots, ODER dokumentierte Bestands- Abweichungen wie Mobiles --cyan/--bg/--line/--text/--muted, s.o.). Phase-1-Ort: web/public/. Geplanter Phase-2-Move: core/design/tokens.css (Multi-Game). ============================================================ */ :root { /* === Basis-Farben ===================================================== */ --bg: #06080f; --bg2: #0d1322; /* viewer-Name — Companion-Alias: --bg-2 */ --bg-2: #0d1322; /* Companion-Name — identischer Wert (Naming-Split, Drift ui-044) */ --panel: #11162a; /* nur Companion */ --border:#1c2742; /* viewer-Name — Companion-Alias: --line */ --line: #1c2742; /* Companion-Name — identischer Wert (Naming-Split, Drift ui-044) */ --line-2:#2a334e; --text: #d8e0f0; --muted: #838fa7; /* === Marken-Akzente =================================================== */ --cyan: #38e1ff; --cyan-glow: #38e1ff80; --red: #ff4d6e; --red-light: #ff7c92; /* nur Companion */ --magenta: #ff45b5; --magenta-light: #ff7ccb; /* nur Companion */ --yellow: #ffd84a; --green: #5eff8a; --orange: #ffb347; --special: #ff9f43; /* ui-285: Faktoren-Tooltip-Akzent für die "Karten (gesockelt)"-Zeile — eigener Farbkanal, weil --yellow bereits für Waffen-Kontext (Symbol/Pille) belegt ist und der Tooltip Karten/Waffe optisch trennen muss (Design-Lock, Referenz- Prototyp ui-285.html). NICHT mehr exklusiv dieser einen Zeile (Stand ui-364): ui-331s Kalenderwoche-Reward-Board nutzt --gold ebenfalls für „★ Wettbewerb"- Framing (style.css .kw-reward/.kw-reward.past/.kw-title .st/.hs-row.podium, Z.2103-2160) — 5 weitere Verwendungen neben dem ui-285-Ursprungsfall. */ --gold: #f0b350; /* ui-263: Twitch-Marken-Akzent — bewusste Ausnahme zu "Cyan = primär/interaktiv". Nur auf dem Twitch-Sekundär-Button (Hover-Border, Glyph-Fill). Cyan bleibt überall sonst die Primärrolle. */ --twitch: #9146ff; /* ui-623 (Fifty-Entscheid 2026-09-09, Palette B, "nicht dezent"): Währungsfarben — je eine feste Farbe für die vier Meta-Währungen Hexa/Draws/Sockel/Skillpunkt, überall identisch (HUD, Endscreen, Shop, Erfolge, Tech-Tree, Sockel, Täglich), damit sie unterscheidbar sind. Cyan bleibt dabei die reine UI-Interaktionsfarbe (Buttons/aktive Tabs) — keine Währung teilt sie sich mehr (DL-4). Credits (©) bleiben --yellow, unberührt. Kontrast aller vier Farben auf --panel/--bg ≥ 4,5:1 (WCAG AA) gemessen, s. ui-623 Ticket ## Notes. Je Token zwei Alpha-Varianten (Chip-Tint 12 %, Chip-Border 45 %, Rolle "ui-621-Kontostand-Chip", Muster --yellow-a12/-a42 oben) als rgba-Literale (CSS kann var() nicht in rgba() dekomponieren, s. ui-046-Kommentar unten). */ --cur-hexa: var(--magenta); /* Marke/Hexagon-Motiv, unverändert (DL-1) */ --cur-hexa-a12: rgba(255, 69, 181, 0.12); --cur-hexa-a45: rgba(255, 69, 181, 0.45); --cur-draw: #ffb347; /* == --orange-Wert, aber EIGENER Token: Rolle "Draws", nicht "Warnung/Queued" (DL-1) — bewusst kein var(--orange)-Alias, ein späterer Bedeutungswechsel von --orange darf die Draw-Farbe nicht mitziehen. */ --cur-draw-a12: rgba(255, 179, 71, 0.12); --cur-draw-a45: rgba(255, 179, 71, 0.45); --cur-socket: #2fe0a8; /* mint, neu (DL-1) */ --cur-socket-a12: rgba(47, 224, 168, 0.12); --cur-socket-a45: rgba(47, 224, 168, 0.45); --cur-skill: #b48cff; /* violett, neu — klar getrennt von --twitch #9146ff (DL-1) */ --cur-skill-a12: rgba(180, 140, 255, 0.12); --cur-skill-a45: rgba(180, 140, 255, 0.45); /* ui-046: Alpha-Varianten des vor-ui-341 --muted-Werts (#6b7a96 = rgb 107,122,150). CSS kann var() nicht in rgba() dekomponieren → eigene Tokens. ui-341 hat --muted auf #838fa7 aufgehellt (WCAG-AA-Fix, Out-of-Scope-Lock: "genau eine Zeile Produktions-CSS") — diese Alpha-Literale sind dabei BEWUSST unverändert geblieben (Background-/Border-Alpha-Rolle, keine Text-Kontrast-Frage) und weichen seither vom aktuellen --muted-RGB ab. */ --muted-a10: rgba(107, 122, 150, 0.10); --muted-a30: rgba(107, 122, 150, 0.30); /* ui-057: Sonderfarben-Tokens. --rank-1/2/3: Podium-Farben (gold/silber/bronze-Pendants). --text-dim: Sekundär-Blaugrau #8aa0c0 (hr-bd, slot-chip, dmg-pct). --group: Off-White #f4f7ff (Gruppen-Bonus-Panel). --queued: Status-Orange #ff8a3c (queued-Badge) — eigene Rolle, kein --orange-Alias. Alpha-Varianten für --group: CSS kann var() nicht in rgba() → eigene Tokens. */ --rank-1: #5eb8ff; --rank-2: #c0c8d4; --rank-3: #cd7f32; --text-dim: #8aa0c0; --group: #f4f7ff; --group-a06: rgba(244, 247, 255, 0.06); --group-a10: rgba(244, 247, 255, 0.10); --group-a12: rgba(244, 247, 255, 0.12); --group-a14: rgba(244, 247, 255, 0.14); --group-a42: rgba(244, 247, 255, 0.42); --group-a50: rgba(244, 247, 255, 0.50); --group-a55: rgba(244, 247, 255, 0.55); --queued: #ff8a3c; --queued-a10: rgba(255, 138, 60, 0.10); --queued-a40: rgba(255, 138, 60, 0.40); /* ui-611 (2026-09-06): Shiny-Farbleiter T5-T9, Companion-only — ersetzt web-138s Alt-Wert (generisches Off-White #f4f7ff, das gleichzeitig als "irgendein heller Akzent" für Gruppen-Karten-Glyph/-Sub/Karten-Namen/ Upgrade-CTA-Text zweckentfremdet wurde, s. meta-017). Diese fünf Tokens sind jetzt ECHTE Tier-Farben (T5 Silber ... T9 Kosmos) — die o.g. generischen Off-White-Konsumenten sind auf --group umgezogen (identischer #f4f7ff-Wert, korrekte "Shared/Group"-Rolle statt einer Tier-Farbe, s. Glossar-Dev.md "CSS-Token --white / --group"). --card-glow-tN speist Border-Glow + Badge/Text-Shadow je Stufe (components.css Tier-Farben + "Shiny T5+"-Abschnitt). JS-Seite cards.js TIER_CSS_VAR nutzt Literale (kein triviales CSS-Var-Lookup in JS) — MUSS bei jeder Wert-Änderung hier synchron bleiben (kein SSOT-Import möglich). */ --card-color-t5: #dfe6f5; /* Silber */ --card-glow-t5: rgba(223, 230, 245, 0.55); --card-color-t6: #9ff5ff; /* Holo-Eis */ --card-glow-t6: rgba(159, 245, 255, 0.6); --card-color-t7: #c9a3ff; /* Prisma-Violett */ --card-glow-t7: rgba(201, 163, 255, 0.6); --card-color-t8: #7dffd2; /* Aurora-Mint */ --card-glow-t8: rgba(125, 255, 210, 0.6); --card-color-t9: #ffe08a; /* Kosmos-Gold */ --card-glow-t9: rgba(255, 224, 138, 0.65); /* === Tower-Rainbow (ui-007) =========================================== */ --tower-card-scale: 1.5; --tower-color-1: #FF5C5C; --tower-color-2: #FF9933; --tower-color-3: #FFE03A; --tower-color-4: #C2EE3A; --tower-color-5: #3DDC73; --tower-color-6: #2DDBC4; --tower-color-7: #38E1FF; --tower-color-8: #5B9DFF; --tower-color-9: #8B7EFF; --tower-color-10: #C084FC; --tower-color-11: #FF45B5; --tower-color-12: #FF7AA3; --tower-color-13: #FFB5B5; /* ui-080: Kontrast-Text auf Akzent-/Spielerfarben-Flächen (rc-num Badge, gb-num Badge). */ --text-on-accent: #07091a; /* ui-080: Alpha-Varianten — CSS kann var() nicht in rgba() dekomponieren → eigene Tokens. Konvention: ---aNN (NN = Alpha × 100). Werte identisch mit den rgba()-Literalen. */ --special-a12: rgba(255,159,67,.12); /* == var(--special) @ 12% — Special-Bar-BG */ --red-a08: rgba(255,77,110,.08); /* == var(--red) @ 8% — Pakt-Pill-BG (ui-212) */ --red-a12: rgba(255,77,110,.12); /* == var(--red) @ 12% — Pakt-WarnIcon-BG (ui-212) */ --red-a18: rgba(255,77,110,.18); /* == var(--red) @ 18% — Mute-Toggle Track */ --red-a42: rgba(255,77,110,.42); /* == var(--red) @ 42% — Pakt-Pill/WarnIcon-Border (ui-212) */ --red-a45: rgba(255,77,110,.45); /* == var(--red) @ 45% — Mute-Toggle Border */ --red-a55: rgba(255,77,110,.55); /* == var(--red) @ 55% — Pakt-Banner-Border/Glow (ui-212) */ /* ui-212: Magenta-Alpha-Tokens — Pakt-Reward/Double-Dip-Rolle (ui-080-Konvention, #ff45b5) */ --mag-a14: rgba(255,69,181,.14); /* == var(--magenta) @ 14% — Pakt-Personal-Reward-BG (ui-212) */ --green-a75: rgba(94,255,138,.75); /* == var(--green) @ 75% — WiFi connected */ --cyan-a55: rgba(56,225,255,.55); /* == var(--cyan) @ 55% — Rim-Card-Hover-Border */ /* ui-195: Yellow-Alpha-Tokens — Credits-/Income-Rolle (ui-080-Konvention, #ffd84a) */ --yellow-a12: rgba(255,216,74,.12); /* == var(--yellow) @ 12% — Income-Graph BG/Glyph */ --yellow-a42: rgba(255,216,74,.42); /* == var(--yellow) @ 42% — Income-Graph Border/Glyph-Border */ --yellow-a50: rgba(255,216,74,.50); /* == var(--yellow) @ 50% — Income-Graph Glow */ /* ui-201: Mint-Alpha-Tokens — Credits-Balance/Wallet-Rolle (ui-080-Konvention, #4fe3a8) */ --mint: #4fe3a8; --mint-a12: rgba(79,227,168,.12); /* == var(--mint) @ 12% — Balance-Graph BG/Glyph */ --mint-a42: rgba(79,227,168,.42); /* == var(--mint) @ 42% — Balance-Graph Border/Glyph-Border */ --mint-a50: rgba(79,227,168,.50); /* == var(--mint) @ 50% — Balance-Graph Glow */ /* === ui-013: Card-Chrome-Tokens ========================================= Geteiltes Box-Chrome für Karten-Surfaces (RimCard, Enemy-Intro, künftige Karten). Der AKZENT-Border ist ein per-Surface-Slot (--card-accent), NICHT geteilt — jede Karte füllt ihn selbst. */ --card-bg: rgba(13, 19, 34, 0.92); /* == var(--bg2) @ 92% — Karten-Füllung */ --card-radius: 8px; /* 8px = kanonische Box-Stufe (ui-098) */ --card-accent: var(--border); /* Default-Akzent (neutral); Surfaces überschreiben lokal */ --card-border-width: 1px; /* Default; Enemy-Intro hebt lokal auf 1.5px */ --card-shadow: 0 2px 10px rgba(0,0,0,0.45); /* Basis-Drop-Shadow (RimCard-IST) */ /* ============================================================ Fluide Skala (ui-265) — clamp()-basierte Type-/Space-Stufen. Kalibrierung: max-Ende = IST-Desktop (15px-Body-Basis, ui-214-Kanon ab 1100px Viewport-Breite); min-Ende = 360px Viewport. rem-basiert (respektiert Nutzer-Zoom/Browser-Font- Setting, a11y); der vw-Anteil ist klein genug, dass Zoom dominant bleibt. Body-Basis (15px) bleibt bewusst fix (DL-6) — keine fluide Basis in diesem Ticket, keine Migration weiterer Surfaces (Proof-Adoption s. DL-5, style.css .dash-header-/ .catalog-Familie). Design-Locks DL-1..DL-6, Ticket ui-265. Kalibriert auf die 15px-Root der Companion (`html, body { font-size: 15px }` in style.css) — ändert sich die Root-Größe, verschieben sich alle Tokens mit (Faktor 16/15 gegenüber dem Browser-Default 16px eingerechnet; Review R1, ui-265). Der Viewer lädt tokens.css mit, konsumiert die --fs-/--sp-Stufen aber (noch) nicht — bei künftiger Viewer-Adoption dessen Root-Font-Size beachten (dort gilt 16px-Default, nicht 15px). ============================================================ */ /* ui-489/M3 (ui-505): --fs-micro NEU — enge K2-Mikro-Deko-Whitelist (Chevrons, Graph-Achsen-/Endlabel, "hier"-/"Du"-Pillen etc., s. ui-489-audit.md K2 + web/client/README.md). Fixer px-Wert (KEIN clamp) — K2-Elemente sind bewusst NICHT fluide-Lese-Text, sie duerfen 10px, nie darunter. NIE fuer Lese-Text (Labels/Subs/Hints/Warnungen) verwenden — dafuer ist --fs-caption (11px-Boden) da. Jede Konsumenten-Aufnahme wird im jeweiligen Umsetzungs-Ticket einzeln begruendet (ui-505-Notes: Katalog aller K2-Faelle). */ --fs-micro: 10px; /* ui-489/M3 (ui-505): Floor angehoben 10.0→10.5px auf 11.0→11.5px (K1-Lesbarkeits- Boden, ui-489-audit.md K1/K3) — vormals unterschritt --fs-caption den 11px-Boden an JEDEM Viewport (Sonderfall .catalog-tag@360px, s. Audit). Spannweite (0.5px) und vw-Koeffizient unveraendert (reine Parallelverschiebung +1px, gleiche Kalibrierung 360px/1100px-Viewport wie die übrigen --fs-*-Stufen, s.u.). */ --fs-caption: clamp(0.7333rem, 0.7171rem + 0.0676vw, 0.7667rem); /* 11.0 → 11.5px */ --fs-small: clamp(0.8rem, 0.7757rem + 0.1014vw, 0.85rem); /* 12.0 → 12.75px */ --fs-body: clamp(0.9333rem, 0.9009rem + 0.1351vw, 1rem); /* 14.0 → 15.0px */ --fs-h3: clamp(1.0333rem, 1.0009rem + 0.1351vw, 1.1rem); /* 15.5 → 16.5px */ --fs-h2: clamp(1.2rem, 1.1027rem + 0.4054vw, 1.4rem); /* 18.0 → 21.0px */ --fs-h1: clamp(1.6rem, 1.4054rem + 0.8108vw, 2rem); /* 24.0 → 30.0px */ --fs-display: clamp(1.8667rem, 1.6072rem + 1.0811vw, 2.4rem); /* 28.0 → 36.0px */ --sp-2xs: clamp(0.2rem, 0.1676rem + 0.1351vw, 0.2667rem); /* 3 → 4px */ --sp-xs: clamp(0.3333rem, 0.3009rem + 0.1351vw, 0.4rem); /* 5 → 6px */ --sp-s: clamp(0.4rem, 0.3353rem + 0.2703vw, 0.5333rem); /* 6 → 8px */ --sp-m: clamp(0.6rem, 0.5027rem + 0.4054vw, 0.8rem); /* 9 → 12px */ --sp-l: clamp(0.8rem, 0.6703rem + 0.5405vw, 1.0667rem); /* 12 → 16px */ --sp-xl: clamp(1.2rem, 1.0054rem + 0.8108vw, 1.6rem); /* 18 → 24px */ --sp-2xl: clamp(1.6rem, 1.3405rem + 1.0811vw, 2.1333rem); /* 24 → 32px */ }