/* ========================================================================= DESIGN TOKENS ========================================================================= */ :root { --bg: #07070a; --surface: #121218; --surface-2: #1a1a22; --surface-3: #22222c; --border: #262632; --text: #f2f2f7; --text-2: #a8a8b3; --text-3: #6b6b78; --accent: #14b8a6; --accent-2: #0d9488; --accent-glow: rgba(20, 184, 166, 0.35); --ok: #34d399; --warn: #fbbf24; --err: #f87171; /* Dynamic player theming (overridden by JS) */ --player-tint: 30, 110, 110; --player-grad: linear-gradient(160deg, rgba(var(--player-tint), 1) 0%, rgba(var(--player-tint), 0.92) 40%, #07070a 100%); --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-xl: 24px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow: 0 4px 16px rgba(0,0,0,0.35); --shadow-lg: 0 16px 48px rgba(0,0,0,0.5); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --header-h: 52px; --nav-h: calc(60px + env(safe-area-inset-bottom)); --mini-h: 64px; } /* ========================================================================= LIGHT THEME OVERRIDES Activated via . Accent stays the same — teal #14b8a6 passes WCAG AA on white. The full-screen player overlay and vinyl record visuals stay dark in both themes (intentional). ========================================================================= */ [data-theme="light"] { --bg: #f5f5f7; --surface: #ffffff; --surface-2: #f0f0f3; --surface-3: #e5e5ea; --border: #d2d2d7; --text: #1d1d1f; --text-2: #6e6e73; --text-3: #a1a1a6; --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 16px 40px rgba(0,0,0,0.12); } /* Header / nav backdrops — translucent light replacements for the dark rgba(7,7,10,0.82) / rgba(10,10,14,0.88) values used in dark mode. */ [data-theme="light"] #app-header { background: rgba(245, 245, 247, 0.82); border-bottom-color: rgba(0,0,0,0.06); } [data-theme="light"] #bottom-nav { background: rgba(245, 245, 247, 0.88); border-top-color: rgba(0,0,0,0.08); } /* iOS standalone uses a black-translucent status bar, which forces WHITE status-bar glyphs (clock/battery) regardless of theme — and that value can't be changed at runtime. In light mode the near-white header renders them invisible, so paint a subtle dark scrim over just the status-bar inset to keep them legible. The scrim sits above the header content's padding-top, so it never overlaps the title or buttons. */ [data-theme="light"] #app-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.16) 70%, transparent); pointer-events: none; } /* Faint white-on-dark borders/hovers vanish on white surfaces — flip to subtle dark equivalents. */ [data-theme="light"] .icon-btn:hover { background: rgba(0,0,0,0.06); } [data-theme="light"] .song-list-row { border-bottom-color: rgba(0,0,0,0.06); } [data-theme="light"] .more-item { border-bottom-color: rgba(0,0,0,0.06); } [data-theme="light"] .song-section-header { background: rgba(245,245,247,0.85); } /* Mini-player sits on the regular shell (not the full overlay) — it should adapt to light theme. The full #player-overlay stays dark intentionally. */ [data-theme="light"] #mini-player { background: rgba(255, 255, 255, 0.82); border-color: rgba(0,0,0,0.08); box-shadow: 0 12px 32px rgba(0,0,0,0.12); } [data-theme="light"] .mini-btn:hover { background: rgba(0,0,0,0.06); } /* Search-screen mesh background — replace dark base gradient with a light one, keep the teal/cyan radials at lower opacity for subtlety. */ [data-theme="light"] .mesh-bg { background: radial-gradient(40% 50% at 20% 30%, rgba(20,184,166,0.35) 0%, transparent 50%), radial-gradient(45% 55% at 80% 40%, rgba(14,165,233,0.30) 0%, transparent 55%), radial-gradient(50% 60% at 50% 80%, rgba(13,148,136,0.30) 0%, transparent 55%), linear-gradient(135deg, #e6fffb 0%, #e0f2fe 100%); background-size: 200% 200%; animation: mesh-drift 16s ease-in-out infinite; } /* Smooth color crossfade on theme toggle. Scoped to color tokens only to avoid janking layout/album-art animations. */ html, body, #app-header, #bottom-nav, #mini-player, .more-list, .more-item, .song-list-row, .region, .icon-btn, .toggle-switch, .toggle-thumb { transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out); }