/* ═══════════════════════════════════════════════════════════════════ Für Streamer – Vice-City Dark Tokens Quelle der Wahrheit für Farben, Radien, Schatten und Schriften. Siehe docs/streamer/05-style-guide.md ═══════════════════════════════════════════════════════════════════ */ :root { /* Surfaces */ --fs-bg: #0a0612; --fs-bg-deep: #050108; --fs-surface: #16091f; --fs-surface-2: #1f0c2d; --fs-surface-3: #2a1142; --fs-border: #3c1156; --fs-border-soft: #2a0e3f; /* Akzente */ --fs-magenta: #ff2d8a; --fs-magenta-deep: #d4126e; --fs-pink: #ff5cc4; --fs-pink-soft: #ff9fd9; --fs-purple: #a855f7; --fs-purple-deep: #7b2cf5; --fs-cyan: #25e7ff; --fs-cyan-soft: #7ef0ff; --fs-orange: #ffae3a; --fs-yellow: #ffe66d; --fs-green: #4cf3a5; --fs-red: #ff5277; /* Text */ --fs-text: #f6e8ff; --fs-text-strong: #ffffff; --fs-text-mute: #b08fd6; --fs-text-faint: #6c4d8c; /* Effekte */ --fs-glow-mag: 0 0 32px rgba(255, 45, 138, .55); --fs-glow-cy: 0 0 28px rgba( 37, 231, 255, .45); --fs-glow-pur: 0 0 32px rgba(168, 85, 247, .55); --fs-glow-soft: 0 0 18px rgba(255, 92, 196, .35); --fs-shadow: 0 18px 48px rgba(5, 1, 8, .55); --fs-shadow-sm: 0 6px 18px rgba(5, 1, 8, .45); --fs-sunset: linear-gradient(135deg, #ff2d8a 0%, #ff5cc4 30%, #a855f7 65%, #25e7ff 100%); --fs-sunset-soft: linear-gradient(135deg, rgba(255,45,138,.18) 0%, rgba(168,85,247,.18) 65%, rgba(37,231,255,.18) 100%); --fs-sunset-vert: linear-gradient(180deg, #ff2d8a 0%, #a855f7 100%); --fs-vice-sky: linear-gradient(180deg, #1c0539 0%, #420c5e 40%, #ff2d8a 90%, #ffae3a 100%); --fs-noise: url("data:image/svg+xml;utf8,"); /* Radii */ --fs-radius: 18px; --fs-radius-sm: 12px; --fs-radius-lg: 28px; --fs-radius-pill: 9999px; /* Typografie */ --fs-font-display: 'Sora', 'Quicksand', sans-serif; --fs-font-body: 'Inter', 'Quicksand', system-ui, sans-serif; --fs-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* Layout */ --fs-container: 1240px; --fs-header-h: 68px; /* Animationen */ --fs-easing: cubic-bezier(.2, .8, .2, 1); --fs-easing-out: cubic-bezier(.16, 1, .3, 1); /* Theme-Marker (vom JS gesetzt) */ color-scheme: dark; } /* ─────────────────────────────────────────────────────────────────── Light-Variante (Miami-Beach-Day): pastellige Cream-Surfaces, dunkler Lila/Magenta-Text. Markenfarben (Pink/Purple/Cyan) bleiben, sind aber leicht angepasst, damit der Kontrast auf hellem Grund passt. Aktiv via . ─────────────────────────────────────────────────────────────────── */ .fs-html[data-fs-theme="light"] { color-scheme: light; --fs-bg: #fff5fb; --fs-bg-deep: #ffe9f5; --fs-surface: #ffffff; --fs-surface-2: #fbe6f1; --fs-surface-3: #f4d0e6; --fs-border: #f0b6dc; --fs-border-soft: #f9d6e9; --fs-magenta: #d4126e; --fs-magenta-deep: #a30c52; --fs-pink: #e63995; --fs-pink-soft: #ff7bbf; --fs-purple: #7b2cf5; --fs-purple-deep: #5c1cc4; --fs-cyan: #0a8fa8; --fs-cyan-soft: #2db8d4; --fs-orange: #d97706; --fs-yellow: #b45309; --fs-green: #047857; --fs-red: #dc2626; --fs-text: #2a0e3f; --fs-text-strong: #0a0612; --fs-text-mute: #6c4d8c; --fs-text-faint: #a37cc5; --fs-glow-mag: 0 0 28px rgba(212, 18, 110, .25); --fs-glow-cy: 0 0 24px rgba( 10, 143, 168, .22); --fs-glow-pur: 0 0 28px rgba(123, 44, 245, .25); --fs-glow-soft: 0 0 16px rgba(230, 57, 149, .20); --fs-shadow: 0 18px 48px rgba(60, 17, 86, .18); --fs-shadow-sm: 0 6px 18px rgba(60, 17, 86, .12); --fs-sunset-soft: linear-gradient(135deg, rgba(255,45,138,.10) 0%, rgba(168,85,247,.10) 65%, rgba(37,231,255,.10) 100%); --fs-vice-sky: linear-gradient(180deg, #ffeaf6 0%, #fbcfe8 45%, #ff9fd9 90%, #ffd29f 100%); }