/* ═══════════════════════════════════════════════ THEMES — variants overlay over main.css Activated via Default: dark (no attr needed — uses main.css tokens) ═══════════════════════════════════════════════ */ /* ── OLED true-black ── */ html[data-theme="oled"] { --bg-base: #000000; --bg-elevated: #050508; --bg-card: rgba(255,255,255,0.025); --bg-card-hover: rgba(255,255,255,0.045); --border: rgba(255,255,255,0.05); --border-strong: rgba(255,255,255,0.09); } /* ── Accent: Purple ── */ html[data-accent="purple"] { --accent: #a855f7; --accent-dim: rgba(168,85,247,0.13); --accent-border: rgba(168,85,247,0.32); } /* ── Accent: Gold ── */ html[data-accent="gold"] { --accent: #f5c842; --accent-dim: rgba(245,200,66,0.14); --accent-border: rgba(245,200,66,0.34); } /* ── Accent: Pink ── */ html[data-accent="pink"] { --accent: #ec4899; --accent-dim: rgba(236,72,153,0.14); --accent-border: rgba(236,72,153,0.34); } /* ── Theme picker UI (floating chip bottom-left) ── */ #theme-picker { position: fixed; bottom: 24px; left: 24px; z-index: 90; display: flex; align-items: center; gap: 6px; padding: 6px; background: rgba(9,9,18,0.92); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 99px; box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5); transition: width 0.3s cubic-bezier(0.16,1,0.3,1); overflow: hidden; } #theme-picker.collapsed { width: 38px; cursor: pointer; } #theme-picker .tp-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; transition: transform 0.18s; border: 2px solid transparent; flex-shrink: 0; } #theme-picker .tp-swatch:hover { transform: scale(1.15); } #theme-picker .tp-swatch.active { border-color: rgba(255,255,255,0.7); transform: scale(1.1); } #theme-picker .tp-toggle { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--text-faint, rgba(255,255,255,0.22)); cursor: pointer; font-size: 0.72rem; transition: color 0.2s; flex-shrink: 0; } #theme-picker .tp-toggle:hover { color: var(--accent); } @media (max-width: 768px) { #theme-picker { bottom: 88px; left: 12px; padding: 4px; } #theme-picker.collapsed { width: 32px; } #theme-picker .tp-swatch { width: 18px; height: 18px; } #theme-picker .tp-toggle { width: 20px; height: 20px; font-size: 0.65rem; } }