/* ═══ Vanity Studio design tokens ═══ Every color/size in the app references these. Theme = swap of the token block. data-theme is stamped on by the boot script and settings; "system" mode re-stamps live on prefers-color-scheme changes (js/app.js). Look: macOS-style — neutral near-black dark, hairline strokes, translucent chrome (--glass + backdrop blur), Apple accent blue. */ :root { /* accents are theme-invariant */ --accent: #0a84ff; --accent-soft: rgba(10, 132, 255, .16); --accent-2: #5e5ce6; --accent-grad: linear-gradient(135deg, #0a84ff, #5e5ce6); --good: #30d158; --warn: #ff9f0a; --bad: #ff453a; --track-text: #5e5ce6; /* timeline pill colors */ --track-audio: #30d158; --track-fx: #0a84ff; --radius-s: 7px; --radius-m: 10px; --radius-l: 14px; --dur-fast: .12s; --dur-med: .22s; --z-panel: 40; --z-modal: 100; --z-toast: 200; --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } :root[data-theme="dark"] { color-scheme: dark; --bg-0: #161618; /* page */ --bg-1: #1d1d20; /* panels */ --bg-2: #252528; /* cards, inputs */ --bg-3: #323236; /* raised / hover */ --bg-canvas: #101012; /* stage behind the artwork */ --stroke: #3a3a3f; --stroke-soft: #2a2a2e; --text-1: #f5f5f7; --text-2: #a1a1a8; --text-3: #68686f; --shadow-1: 0 2px 10px rgba(0, 0, 0, .4); --shadow-2: 0 16px 48px rgba(0, 0, 0, .55); --scrim: rgba(0, 0, 0, .55); --thumb-bg: #202023; --glass: rgba(29, 29, 32, .78); } :root[data-theme="light"] { color-scheme: light; --bg-0: #f5f5f7; --bg-1: #ffffff; --bg-2: #f2f2f5; --bg-3: #e6e6ea; --bg-canvas: #e3e3e8; --stroke: #d8d8dd; --stroke-soft: #e8e8ec; --text-1: #1d1d1f; --text-2: #55555a; --text-3: #98989d; --shadow-1: 0 2px 10px rgba(29, 29, 31, .08); --shadow-2: 0 16px 48px rgba(29, 29, 31, .16); --scrim: rgba(29, 29, 31, .4); --thumb-bg: #ececf0; --glass: rgba(255, 255, 255, .78); }