/* ============================================================
Chat Tower — geteilte Design-Tokens (web-162)
Einzige Definitionsquelle für alle CSS-Custom-Properties,
die viewer.html 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)
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). 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-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);
/* web-138: T5-Kartenfarbe (Off-White); Companion-only.
JS-Seite cards.js nutzt Literal (kein triviales CSS-Var-Lookup in JS). */
--card-color-t5: #f4f7ff;
/* === 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) */
--mag-a40: rgba(255,69,181,.40); /* == var(--magenta) @ 40% — Pakt-Personal-Reward-Border (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).
============================================================ */
--fs-caption: clamp(0.6667rem, 0.6505rem + 0.0676vw, 0.7rem); /* 10.0 → 10.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 */
}