/* ══════════════════════════════════════════════════════════════════════════ ChillBot — Design-Tokens „Eisgeist" (Single Source of Truth) Farben, Motion, Form, Typografie. Wird von community.css (@import) und dashboard.css referenziert. NUR hier Tokens definieren. Fonts self-hosted via fonts.css (latin + latin-ext). ══════════════════════════════════════════════════════════════════════════ */ @import url("/static/css/fonts.css"); :root{ /* ── Flächen ── */ --bg:#0a0c15; --bg-2:#0c0e1a; --void:#07080e; --card:rgba(255,255,255,.028); --card-2:rgba(255,255,255,.045); --glass:rgba(148,168,255,.05); --stroke:rgba(255,255,255,.09); --stroke-2:rgba(255,255,255,.16); --stroke-glow:rgba(120,180,255,.34); /* ── Text ── Kontrast gegen die Kartenfläche (#11131c = --card über --bg) geprüft: --text #eaeef8 → 15,95:1 (AAA) --muted #96a2bd → 7,23:1 (AAA) --dim #727e9b → 4,56:1 (AA) ← war #606b86 mit 3,48:1 und damit unter der AA-Schwelle für Fließtext. Aufgehellt, bis es passt; die Hierarchie muted > dim bleibt klar. */ --text:#eaeef8; --muted:#96a2bd; --dim:#727e9b; /* ── Signatur: Eis → Indigo → Violett ── */ --ice:#38d6f5; --ice-2:#3b9bff; --indigo:#6366f1; --violet:#a855f7; --grad:linear-gradient(120deg,var(--ice) 0%,var(--ice-2) 34%,var(--indigo) 66%,var(--violet) 100%); --grad-soft:linear-gradient(135deg,rgba(56,214,245,.16),rgba(99,102,241,.13) 55%,rgba(168,85,247,.14)); /* ── Akzente ── */ --gold:#fbbf24; --green:#34d399; --red:#fb7185; --twitch:#9147ff; --discord:#5865f2; /* ── Motion: eine Easing-Kurve, drei Dauern ── */ --e:cubic-bezier(.22,.61,.36,1); --e-io:cubic-bezier(.65,0,.35,1); --t1:.15s; --t2:.30s; --t3:.60s; /* ── Form ── */ --r-lg:24px; --r-md:18px; --r-sm:13px; --r-pill:999px; --shadow:0 30px 70px -28px rgba(0,0,0,.85); --shadow-glow:0 20px 50px -18px rgba(99,102,241,.5); --f-display:'Space Grotesk','Segoe UI',sans-serif; --f-ui:'Inter','Segoe UI',sans-serif; --f-mono:'JetBrains Mono','Consolas',monospace; /* ══════════════════════════════════════════════════════════════════════ Erweiterung „Premium" — additiv, bestehende Tokens bleiben unberührt. ══════════════════════════════════════════════════════════════════════ */ /* ── Tiefe / Elevation (Schatten-Stapel) ── */ --elev-0:0 1px 0 rgba(255,255,255,.04) inset; --elev-1:0 2px 8px -2px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) inset; --elev-2:0 14px 34px -14px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.06) inset; --elev-3:0 30px 70px -22px rgba(0,0,0,.82), 0 1px 0 rgba(255,255,255,.07) inset; /* ── Glas / Blur ── */ --glass-strong:rgba(148,168,255,.085); --blur:blur(14px) saturate(1.25); --blur-strong:blur(24px) saturate(1.4); /* ── Fokus- & Glow-Ring ── */ --ring:0 0 0 3px rgba(99,102,241,.45); --ring-ice:0 0 0 3px rgba(56,214,245,.4); --glow-ice:0 0 0 1px rgba(56,214,245,.3), 0 8px 26px -8px rgba(56,214,245,.45); /* ── Getönte Akzent-Flächen (Dim) — für Chips/Badges, viewer + dashboard ── */ --ice-dim:rgba(56,214,245,.14); --indigo-dim:rgba(99,102,241,.15); --violet-dim:rgba(168,85,247,.15); --gold-dim:rgba(251,191,36,.15); --green-dim:rgba(52,211,153,.15); --red-dim:rgba(251,113,133,.15); --twitch-dim:rgba(145,71,255,.16); --discord-dim:rgba(88,101,242,.16); /* ── Typo-Skala (modular) ── */ --fs-1:.6875rem; /* 11 — Micro-Label */ --fs-2:.75rem; /* 12 */ --fs-3:.8125rem; /* 13 */ --fs-4:.875rem; /* 14 — Body */ --fs-5:1rem; /* 16 */ --fs-6:1.25rem; /* 20 */ --fs-7:1.5rem; /* 24 */ --fs-8:2rem; /* 32 — Section-Heading */ --fs-display:clamp(2.4rem,6vw,4rem); /* Hero */ --lh-tight:1.15; --lh-normal:1.55; --tracking-tight:-.02em; --tracking-normal:0; --tracking-wide:.06em; /* ── Space-Skala (4/8-Raster) ── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; /* ── Radius (konsolidiert) ── */ --r-xs:8px; --r-xl:30px; --r-2xl:36px; /* ── Motion: Micro-Bounce für Press/Pop ── */ --e-spring:cubic-bezier(.5,1.6,.4,1); --t0:.08s; /* ══════════════════════════════════════════════════════════════════════ Rollen-Tokens („was ist das", nicht „welche Farbe ist das") ───────────────────────────────────────────────────────────────────── Die Tokens oben sind nach Farbe benannt (--ice, --indigo). Das ist beim Bauen praktisch, beim Ändern aber gefährlich: wer `--ice` umfärbt, färbt auch jeden Fortschrittsbalken um. Diese Ebene benennt die ROLLE. Neuer Code nimmt die Rollen, bestehender Code darf bleiben wo er ist — beide zeigen auf dieselben Werte, es gibt keine zweite Wahrheit. ══════════════════════════════════════════════════════════════════════ */ /* ── Flächen: eine Leiter, kein Zufall ── Jede Stufe liegt optisch eine Ebene höher als die darunter. Wer eine Karte in eine Karte legt, nimmt die nächste Stufe — nicht dieselbe. */ --surface-0:var(--void); /* tiefer als der Hintergrund (Gruben, Inputs) */ --surface-1:var(--bg); /* der Seitenhintergrund selbst */ --surface-2:var(--card); /* Karte auf der Seite */ --surface-3:var(--card-2); /* Karte auf einer Karte, Hover-Fläche */ --surface-4:rgba(255,255,255,.07); /* Menüs, Popover, Modal-Kopf */ --surface-glass:var(--glass); /* getönte Auswahl-/Aktivfläche */ /* ── Absicht ── */ --primary:var(--indigo); --primary-soft:var(--indigo-dim); --secondary:var(--ice-2); --secondary-soft:rgba(59,155,255,.15); --accent:var(--ice); --accent-soft:var(--ice-dim); --success:var(--green); --success-soft:var(--green-dim); --warning:var(--gold); --warning-soft:var(--gold-dim); --danger:var(--red); --danger-soft:var(--red-dim); --info:var(--ice-2); --info-soft:rgba(59,155,255,.15); /* Textfarbe AUF einer gefüllten Fläche. Die hellen Marken-Farben tragen dunkle Schrift — weiß auf Eisblau ist unter 3:1 und damit unlesbar. */ --on-primary:#f4f5ff; --on-accent:#04121a; --on-warning:#2a1c00; --on-success:#04231a; --on-danger:#2b0d13; /* ── Text ── */ --text-primary:var(--text); --text-secondary:var(--muted); --text-muted:var(--dim); --text-inverse:#07080e; /* ── Linien & Zustände ── `--hover`/`--active` sind Auflagen (weiß mit Alpha), keine Volltonfarben: so funktionieren sie über jeder Fläche, ohne dass man pro Ort eine eigene Hover-Farbe erfinden muss. */ --border:var(--stroke); --border-strong:var(--stroke-2); --border-accent:var(--stroke-glow); --hover:rgba(255,255,255,.055); --active:rgba(255,255,255,.09); /* ── Anheben beim Überfahren ── Es gab vier Stufen (1, 2, 3 und 4 px), und welche ein Bauteil bekam, war Zufall — dieselbe Kachel hob sich auf zwei Seiten unterschiedlich weit. Drei Stufen reichen, und jede hat eine Begründung: Steuerelement 1 px — bestätigt die Berührung, mehr nicht Karte 2 px — hebt sich sichtbar aus der Fläche Aushängeschild 4 px — die eine große Kachel, die den Blick will Die 3-px-Stufe hatte keine eigene Aussage und ist zur Karte geworden. */ --lift-control:-1px; --lift-card:-2px; --lift-feature:-4px; /* ── Schatten: vier Stufen, benannt nach Abstand zur Seite ── */ --sh-subtle:var(--elev-1); --sh-elevated:var(--elev-2); --sh-floating:0 22px 48px -18px rgba(0,0,0,.75), 0 2px 8px -2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.06) inset; --sh-modal:0 44px 92px -28px rgba(0,0,0,.88), 0 0 0 1px rgba(255,255,255,.06); /* ── Radius: eine Skala, nach Bauteil benannt ── Der zweite Wert ist immer der bestehende Token — es gibt keine neuen Größen, nur Namen für die, die schon da sind. */ --r-input:var(--r-sm); /* 13 */ --r-btn:var(--r-sm); /* 13 */ --r-card:var(--r-md); /* 18 */ --r-modal:var(--r-lg); /* 24 */ --r-menu:var(--r-md); /* 18 */ --r-nav:var(--r-sm); /* 13 */ --r-tile:var(--r-xs); /* 8 */ /* ── Typografie-Hierarchie ── Größe UND Gewicht UND Laufweite gehören zusammen; wer nur die Größe kopiert, bekommt nicht dieselbe Stimme. Deshalb sind die drei hier gebündelt (siehe .tDisplay … .tLabel in panel.css). */ --ty-display-s:var(--fs-display); --ty-display-w:800; --ty-h1-s:var(--fs-8); --ty-h1-w:800; --ty-h2-s:var(--fs-7); --ty-h2-w:700; --ty-h3-s:var(--fs-6); --ty-h3-w:700; --ty-sect-s:var(--fs-3); --ty-sect-w:800; /* Abschnittsmarke, versal */ --ty-body-s:var(--fs-4); --ty-body-w:400; --ty-small-s:var(--fs-3);--ty-small-w:400; --ty-cap-s:var(--fs-2); --ty-cap-w:500; --ty-label-s:var(--fs-1);--ty-label-w:700; }