/* === Flüsterfeder — Theme-Definitionen === * * Gesteuert über data-theme="..." auf . * Fantasy (Default) ist in :root (style.css) definiert. * Schriftarten über data-font="..." auf . */ /* ─── Light — Pergament & Tinte ────────────────────────────────────────────── */ [data-theme="light"] { --ff-bg-primary: #faf8f5; --ff-bg-secondary: #f0ece6; --ff-bg-tertiary: #e8e2d8; --ff-bg-card: #ede8e0; --ff-bg-primary-rgb: 250, 248, 245; --ff-bg-secondary-rgb: 240, 236, 230; --ff-bg-tertiary-rgb: 232, 226, 216; --ff-text-primary: #2c2416; --ff-text-light: #3a3228; --ff-text-soft: #4a3e32; --ff-text-secondary: #5a4a3a; --ff-text-subdued: #6a5a4a; --ff-text-muted: #8a7a6a; --ff-text-dim: #a09080; --ff-text-faint: #b8a898; --ff-text-quote: #5a4030; --ff-accent: #a0334d; --ff-accent-hover: #8a2840; --ff-accent-dark: #7a2038; --ff-accent-darker: #6a1830; --ff-accent-rgb: 160, 51, 77; --ff-gold: #8b6d45; --ff-gold-light: #a08058; --ff-gold-dark: #6a5234; --ff-gold-rgb: 139, 109, 69; --ff-border: rgba(139, 109, 69, 0.2); --ff-border-strong: rgba(139, 109, 69, 0.35); --ff-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); --ff-glow-gold: rgba(139, 109, 69, 0.2); --ff-scrollbar-track: #e8e2d8; --ff-scrollbar-thumb: #8b6d45; --ff-purple: #7a5a90; --ff-purple-light: #8a6aa0; --ff-purple-rgb: 100, 70, 120; --ff-user-bubble-rgb: 120, 100, 80; --ff-user-strong: rgba(90, 60, 110, 1); --ff-ai-memory-rgb: 100, 70, 130; --ff-thinking-rgb: 80, 50, 110; --ff-lore-rgb: 120, 90, 60; --ff-code-border-rgb: 100, 90, 80; --ff-white-rgb: 255, 255, 255; --ff-black-rgb: 0, 0, 0; --ff-success: #2e8b3e; --ff-success-rgb: 46, 139, 62; --ff-success-dark: #1e7a30; --ff-success-dark-rgb: 30, 122, 48; } /* ─── Dark — Reines Schwarz ────────────────────────────────────────────────── */ [data-theme="dark"] { --ff-bg-primary: #050508; --ff-bg-secondary: #0a0a10; --ff-bg-tertiary: #12121a; --ff-bg-card: #18182a; --ff-bg-primary-rgb: 5, 5, 8; --ff-bg-secondary-rgb: 10, 10, 16; --ff-bg-tertiary-rgb: 18, 18, 26; --ff-text-primary: #f0f0f0; --ff-text-light: #d8d8d8; --ff-text-soft: #c0c0c0; --ff-text-secondary: #b0b0b0; --ff-text-subdued: #909090; --ff-text-muted: #707070; --ff-text-dim: #505050; --ff-text-faint: #404040; --ff-text-quote: #d0d0d8; --ff-accent: #ff3a55; --ff-accent-hover: #e82a45; --ff-accent-dark: #c02038; --ff-accent-darker: #a01830; --ff-accent-rgb: 255, 58, 85; --ff-gold: #c0c0c8; --ff-gold-light: #d8d8e0; --ff-gold-dark: #909098; --ff-gold-rgb: 192, 192, 200; --ff-border: rgba(192, 192, 200, 0.12); --ff-border-strong: rgba(192, 192, 200, 0.25); --ff-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); --ff-glow-gold: rgba(192, 192, 200, 0.15); --ff-scrollbar-track: #0a0a10; --ff-scrollbar-thumb: #c0c0c8; --ff-purple: #a090b8; --ff-purple-light: #b0a0c8; --ff-purple-rgb: 140, 120, 170; --ff-user-bubble-rgb: 130, 120, 140; --ff-user-strong: rgba(180, 160, 200, 1); --ff-ai-memory-rgb: 120, 100, 160; --ff-thinking-rgb: 90, 70, 130; --ff-lore-rgb: 130, 120, 140; --ff-code-border-rgb: 80, 80, 100; } /* ─── Pink — Rosa & Magenta ────────────────────────────────────────────────── */ [data-theme="pink"] { --ff-bg-primary: #1a0a14; --ff-bg-secondary: #2a1020; --ff-bg-tertiary: #351530; --ff-bg-card: #3a1a38; --ff-bg-primary-rgb: 26, 10, 20; --ff-bg-secondary-rgb: 42, 16, 32; --ff-bg-tertiary-rgb: 53, 21, 48; --ff-text-primary: #f5e0ea; --ff-text-light: #e8d0dd; --ff-text-soft: #d8bece; --ff-text-secondary: #d4a0b8; --ff-text-subdued: #b888a0; --ff-text-muted: #a07088; --ff-text-dim: #805868; --ff-text-faint: #604050; --ff-text-quote: #f0d8e4; --ff-accent: #ff4d8a; --ff-accent-hover: #e8407a; --ff-accent-dark: #c83068; --ff-accent-darker: #a82858; --ff-accent-rgb: 255, 77, 138; --ff-gold: #e8a0b0; --ff-gold-light: #f0b8c8; --ff-gold-dark: #c08090; --ff-gold-rgb: 232, 160, 176; --ff-border: rgba(232, 160, 176, 0.2); --ff-border-strong: rgba(232, 160, 176, 0.4); --ff-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); --ff-glow-gold: rgba(255, 77, 138, 0.2); --ff-scrollbar-track: #2a1020; --ff-scrollbar-thumb: #e8a0b0; --ff-purple: #d090c0; --ff-purple-light: #e0a0d0; --ff-purple-rgb: 200, 120, 180; --ff-user-bubble-rgb: 180, 110, 150; --ff-user-strong: rgba(230, 150, 200, 1); --ff-ai-memory-rgb: 170, 80, 140; --ff-thinking-rgb: 140, 60, 120; --ff-lore-rgb: 180, 120, 140; --ff-code-border-rgb: 120, 80, 100; } /* ─── Purple — Mystisch & Magisch ──────────────────────────────────────────── */ [data-theme="purple"] { --ff-bg-primary: #0d0816; --ff-bg-secondary: #1a1030; --ff-bg-tertiary: #251845; --ff-bg-card: #2a1e4a; --ff-bg-primary-rgb: 13, 8, 22; --ff-bg-secondary-rgb: 26, 16, 48; --ff-bg-tertiary-rgb: 37, 24, 69; --ff-text-primary: #e8ddf5; --ff-text-light: #d8ccee; --ff-text-soft: #c8b8dd; --ff-text-secondary: #baa8d4; --ff-text-subdued: #a090b8; --ff-text-muted: #8a78a0; --ff-text-dim: #685880; --ff-text-faint: #504068; --ff-text-quote: #e0d4f0; --ff-accent: #9b59d0; --ff-accent-hover: #8a48c0; --ff-accent-dark: #7838a8; --ff-accent-darker: #682890; --ff-accent-rgb: 155, 89, 208; --ff-gold: #d4a8e0; --ff-gold-light: #e0bef0; --ff-gold-dark: #b888c8; --ff-gold-rgb: 212, 168, 224; --ff-border: rgba(212, 168, 224, 0.2); --ff-border-strong: rgba(212, 168, 224, 0.4); --ff-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); --ff-glow-gold: rgba(155, 89, 208, 0.25); --ff-scrollbar-track: #1a1030; --ff-scrollbar-thumb: #d4a8e0; --ff-purple: #c090e0; --ff-purple-light: #d0a0f0; --ff-purple-rgb: 180, 130, 210; --ff-user-bubble-rgb: 150, 110, 180; --ff-user-strong: rgba(200, 160, 240, 1); --ff-ai-memory-rgb: 140, 90, 190; --ff-thinking-rgb: 110, 60, 160; --ff-lore-rgb: 150, 110, 180; --ff-code-border-rgb: 100, 80, 130; } /* ─── Blue — Ozean & Frost ─────────────────────────────────────────────────── */ [data-theme="blue"] { --ff-bg-primary: #060d18; --ff-bg-secondary: #0c1828; --ff-bg-tertiary: #122540; --ff-bg-card: #182e4a; --ff-bg-primary-rgb: 6, 13, 24; --ff-bg-secondary-rgb: 12, 24, 40; --ff-bg-tertiary-rgb: 18, 37, 64; --ff-text-primary: #e0eaf5; --ff-text-light: #c8d8e8; --ff-text-soft: #b0c8dd; --ff-text-secondary: #90b0d0; --ff-text-subdued: #78a0c0; --ff-text-muted: #608098; --ff-text-dim: #486878; --ff-text-faint: #385060; --ff-text-quote: #d0e0f0; --ff-accent: #2d9cdb; --ff-accent-hover: #2088c8; --ff-accent-dark: #1878b0; --ff-accent-darker: #106898; --ff-accent-rgb: 45, 156, 219; --ff-gold: #90c0e0; --ff-gold-light: #a8d0ee; --ff-gold-dark: #6898b8; --ff-gold-rgb: 144, 192, 224; --ff-border: rgba(144, 192, 224, 0.2); --ff-border-strong: rgba(144, 192, 224, 0.35); --ff-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); --ff-glow-gold: rgba(45, 156, 219, 0.2); --ff-scrollbar-track: #0c1828; --ff-scrollbar-thumb: #90c0e0; --ff-purple: #8098c8; --ff-purple-light: #90a8d8; --ff-purple-rgb: 100, 120, 180; --ff-user-bubble-rgb: 90, 110, 150; --ff-user-strong: rgba(130, 170, 230, 1); --ff-ai-memory-rgb: 80, 100, 170; --ff-thinking-rgb: 60, 80, 140; --ff-lore-rgb: 100, 130, 170; --ff-code-border-rgb: 70, 90, 120; } /* ─── Green — Wald & Natur ─────────────────────────────────────────────────── */ [data-theme="green"] { --ff-bg-primary: #081208; --ff-bg-secondary: #0f1e0f; --ff-bg-tertiary: #182818; --ff-bg-card: #1e3220; --ff-bg-primary-rgb: 8, 18, 8; --ff-bg-secondary-rgb: 15, 30, 15; --ff-bg-tertiary-rgb: 24, 40, 24; --ff-text-primary: #e0f0e0; --ff-text-light: #c8e0c8; --ff-text-soft: #b0d0b0; --ff-text-secondary: #90c090; --ff-text-subdued: #78a878; --ff-text-muted: #609060; --ff-text-dim: #487848; --ff-text-faint: #386038; --ff-text-quote: #d0e8d0; --ff-accent: #27ae60; --ff-accent-hover: #1e9a50; --ff-accent-dark: #188840; --ff-accent-darker: #107830; --ff-accent-rgb: 39, 174, 96; --ff-gold: #b8a060; --ff-gold-light: #c8b070; --ff-gold-dark: #908048; --ff-gold-rgb: 184, 160, 96; --ff-border: rgba(184, 160, 96, 0.2); --ff-border-strong: rgba(184, 160, 96, 0.35); --ff-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); --ff-glow-gold: rgba(39, 174, 96, 0.2); --ff-scrollbar-track: #0f1e0f; --ff-scrollbar-thumb: #b8a060; --ff-purple: #80a880; --ff-purple-light: #90b890; --ff-purple-rgb: 100, 140, 100; --ff-user-bubble-rgb: 100, 130, 90; --ff-user-strong: rgba(130, 200, 130, 1); --ff-ai-memory-rgb: 80, 130, 80; --ff-thinking-rgb: 60, 110, 60; --ff-lore-rgb: 110, 130, 80; --ff-code-border-rgb: 80, 100, 70; } /* ═══════════════════════════════════════════════════════════════════════════════ SCHRIFTARTEN — Gesteuert über data-font="..." auf ═══════════════════════════════════════════════════════════════════════════════ */ /* Default (kein Selektor) — Segoe UI / Georgia, bereits in :root */ [data-font="modern"] { --ff-font-body: 'Inter', -apple-system, sans-serif; --ff-font-heading: 'Inter', -apple-system, sans-serif; } [data-font="serif"] { --ff-font-body: 'Merriweather', Georgia, serif; --ff-font-heading: 'Merriweather', Georgia, serif; } [data-font="medieval"] { --ff-font-body: 'Crimson Text', Georgia, serif; --ff-font-heading: 'MedievalSharp', cursive; } [data-font="futuristic"] { --ff-font-body: 'Inter', -apple-system, sans-serif; --ff-font-heading: 'Orbitron', sans-serif; } [data-font="mono"] { --ff-font-body: 'Fira Code', 'Consolas', monospace; --ff-font-heading: 'Fira Code', 'Consolas', monospace; }