/* ============================================================= themes.css — the customization system ------------------------------------------------------------- Every visual choice is a CSS custom property. The settings panel just rewrites these values live, which is why customization is instant and needs no page reload. Presets set a whole block at once; the custom sliders override individual properties on top via inline style on . ============================================================= */ :root { /* --- structural, shared by every theme --- */ --radius: 18px; --radius-sm: 10px; --speed: 260ms; --ease: cubic-bezier(.22, 1, .36, 1); --font-display: 'Orbitron', 'Rajdhani', system-ui, sans-serif; --font-body: 'Rajdhani', 'Inter', system-ui, -apple-system, sans-serif; /* --- knobs the settings panel writes to --- */ --glow-strength: 1; /* 0 = flat, 2 = heavy bloom */ --grain: 0.03; /* film-grain opacity */ --corner: 18px; /* mirrored into --radius */ --bg-motion: 1; /* 0 pauses background animation */ } /* ============================================================= PRESET: NEON GRID (default -- cyan/magenta on deep navy) ============================================================= */ :root, :root[data-theme="neon-grid"] { --bg: #05070f; --bg-2: #0a1024; --surface: rgba(18, 26, 51, .72); --surface-2: rgba(28, 38, 70, .85); --border: rgba(120, 200, 255, .18); --text: #e8f4ff; --text-dim: #7f95b8; --accent: #22d3ee; --accent-2: #f0f; --ok: #34d399; --warn: #fbbf24; --danger: #fb7185; --vinyl-base: #0b0b0f; --vinyl-sheen: rgba(140, 220, 255, .5); --backdrop: grid; } /* ============================================================= PRESET: DEEP SPACE (violet/ice, calm, good for focus work) ============================================================= */ :root[data-theme="deep-space"] { --bg: #04030c; --bg-2: #120a2e; --surface: rgba(30, 20, 60, .70); --surface-2: rgba(46, 32, 84, .85); --border: rgba(170, 150, 255, .20); --text: #efe9ff; --text-dim: #9b8fc7; --accent: #a78bfa; --accent-2: #38bdf8; --ok: #4ade80; --warn: #fcd34d; --danger: #f87171; --vinyl-base: #0a0812; --vinyl-sheen: rgba(190, 170, 255, .45); --backdrop: stars; } /* ============================================================= PRESET: SYNTHWAVE (hot pink/orange, high energy) ============================================================= */ :root[data-theme="synthwave"] { --bg: #10001f; --bg-2: #2d063f; --surface: rgba(58, 12, 74, .72); --surface-2: rgba(82, 20, 100, .86); --border: rgba(255, 120, 220, .24); --text: #ffe9fb; --text-dim: #c98fc0; --accent: #ff2d95; --accent-2: #ffb800; --ok: #3ddc97; --warn: #ffd166; --danger: #ff5c7a; --vinyl-base: #12030f; --vinyl-sheen: rgba(255, 140, 220, .5); --backdrop: sunset; } /* ============================================================= PRESET: AURORA (teal/green, softer, lower contrast) ============================================================= */ :root[data-theme="aurora"] { --bg: #02110f; --bg-2: #062b26; --surface: rgba(10, 48, 43, .70); --surface-2: rgba(16, 70, 62, .85); --border: rgba(110, 255, 220, .18); --text: #e4fff8; --text-dim: #77b3a6; --accent: #2dd4bf; --accent-2: #a3e635; --ok: #4ade80; --warn: #facc15; --danger: #fb7185; --vinyl-base: #04100e; --vinyl-sheen: rgba(130, 255, 230, .45); --backdrop: aurora; } /* ============================================================= PRESET: MONO (near-greyscale -- the quiet one, for test days or when a projector washes colour out) ============================================================= */ :root[data-theme="mono"] { --bg: #0a0a0b; --bg-2: #17171a; --surface: rgba(32, 32, 36, .78); --surface-2: rgba(48, 48, 54, .88); --border: rgba(255, 255, 255, .13); --text: #f4f4f5; --text-dim: #8e8e96; --accent: #e4e4e7; --accent-2: #a1a1aa; --ok: #86efac; --warn: #fde047; --danger: #fca5a5; --vinyl-base: #0d0d0f; --vinyl-sheen: rgba(255, 255, 255, .35); --backdrop: none; --glow-strength: .35; } /* ============================================================= PRESET: EMBER (warm amber/red -- high visibility, reads well in a bright room with the lights on) ============================================================= */ :root[data-theme="ember"] { --bg: #100603; --bg-2: #2a1006; --surface: rgba(58, 24, 12, .74); --surface-2: rgba(84, 36, 18, .86); --border: rgba(255, 170, 100, .22); --text: #fff1e4; --text-dim: #c69a7c; --accent: #fb923c; --accent-2: #fbbf24; --ok: #4ade80; --warn: #fcd34d; --danger: #f87171; --vinyl-base: #120704; --vinyl-sheen: rgba(255, 190, 130, .48); --backdrop: sunset; }