/* Sleep Studio — design tokens ---------------------------- Direction: "the mastering lounge at 2am, not the dashboard." Two people in a dark, warm room auditioning whether a sleep mix actually sounds right — lamplight-amber against a deep indigo-night, not a void. Ember is the one hot color, spent on the things that deserve attention: the accent word, active transport, an approved pack. A cool moon-silver plays a sparing secondary role. Cards get real depth — soft shadow, a whisper of top-edge highlight, gentle warm bloom — so the room reads as inhabited, not empty. Deliberately NOT: cosmic aurora/nebula gradients (the sleep-app cliché), AI-purple glow, warm cream/paper surfaces, cyan-teal tech default, gradient text, side-stripe accent borders. */ :root { color-scheme: dark; /* ---- surface / void -------------------------------------------------- Hue 264: a considered indigo-night, not flat black and not the old blue-green. Each step up carries a touch more chroma — surfaces feel lit from within rather than just "lighter grey." */ --void: oklch(0.145 0.022 264); /* page ground */ --void-deep: oklch(0.110 0.020 264); /* footer / recessed regions */ --surface: oklch(0.196 0.026 261); /* panel */ --surface-raised: oklch(0.248 0.030 258); /* channel strip / card face */ --surface-raised-2: oklch(0.290 0.032 256); /* hovered / active card face */ --surface-sunken: oklch(0.108 0.020 264); /* meter wells, inputs */ --hairline: oklch(0.340 0.026 260 / 0.7); --hairline-strong: oklch(0.450 0.030 258); /* ---- ink -------------------------------------------------------------- Warm-tinted whites (hue ~75) instead of blue-white — a lamp-lit room, not a monitor glow. */ --ink: oklch(0.955 0.012 75); --ink-muted: oklch(0.745 0.022 68); --ink-faint: oklch(0.530 0.020 64); /* ---- accent: ember (the one hot color) --------------------------------- */ --ember: oklch(0.775 0.168 58); --ember-strong: oklch(0.850 0.175 64); --ember-soft: oklch(0.700 0.150 54); --ember-dim: oklch(0.775 0.168 58 / 0.15); --ember-ring: oklch(0.775 0.168 58 / 0.40); --ember-bloom: oklch(0.775 0.168 58 / 0.16); /* ---- accent: moon (secondary, sparing use only) ------------------------ */ --moon: oklch(0.800 0.045 226); --moon-strong: oklch(0.860 0.045 226); --moon-dim: oklch(0.800 0.045 226 / 0.15); /* ---- semantic ------------------------------------------------------------ Kept clearly distinct from ember on hue alone (green / red), so approve/dislike never reads as "more ember" or "less ember." */ --approve: oklch(0.740 0.148 152); --approve-strong: oklch(0.800 0.155 152); --approve-dim: oklch(0.740 0.148 152 / 0.16); --dislike: oklch(0.665 0.196 24); --dislike-strong: oklch(0.720 0.200 24); --dislike-dim: oklch(0.665 0.196 24 / 0.16); /* flag/caution: distinct hue from ember(58)/approve(152)/dislike(24)/moon(226) -- used for the accents ear-cull "flag for re-record" verdict AND doubles as the amber tier in the studio's compat-pill (green/amber/red). */ --flag: oklch(0.790 0.155 95); --flag-strong: oklch(0.845 0.160 95); --flag-dim: oklch(0.790 0.155 95 / 0.16); /* ---- typography --------------------------------------------------------- Display: Bricolage Grotesque — a warm, slightly unconventional grotesque with real character at large sizes; used only for headings and pack names, never body copy. Body: Hanken Grotesk — humanist, calm at small sizes, the contrast partner to the display face. Mono: Plex Mono — reserved for data (dB, coherence, timecodes), never prose. */ --font-display: 'Display Grotesque', ui-sans-serif, system-ui, 'Segoe UI', sans-serif; --font-body: 'Body Grotesque', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --text-2xs: 0.6875rem; /* 11px — meter labels, timecodes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px — body default */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.4375rem; /* 23px — pack names */ --text-xl: 1.875rem; /* 30px */ --text-2xl: clamp(1.875rem, 3.6vw, 2.75rem); /* hero ceiling */ --leading-tight: 1.12; --leading-normal: 1.5; --leading-relaxed: 1.65; /* ---- space (4px rhythm) ----------------------------------------------*/ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* ---- radius (shape-consistency lock) ---------------------------------- panels/cards: --radius-panel. interactive controls: --radius-control. pills (transport, tags, thumb): --radius-pill. never a fourth value. */ --radius-panel: 16px; --radius-control: 10px; --radius-pill: 999px; /* ---- elevation ----------------------------------------------------------- Every raised surface gets a whisper of top-edge highlight (light catching an edge) plus a warm-tinted ambient shadow (never pure black) — the depth cue that reads as "considered," not "flat + border." */ --shadow-panel: 0 1px 0 0 oklch(1 0.01 80 / 0.04) inset, 0 1px 0 oklch(0.05 0.02 264 / 0.6), 0 16px 36px -20px oklch(0.02 0.02 264 / 0.75); --shadow-raised: 0 1px 0 0 oklch(1 0.01 80 / 0.06) inset, 0 1px 0 oklch(0.06 0.02 264 / 0.7), 0 24px 52px -22px oklch(0.02 0.02 264 / 0.85); --shadow-well: inset 0 2px 5px oklch(0.02 0.02 264 / 0.65); --glow-ember: 0 0 0 1px var(--ember-ring), 0 0 28px -4px oklch(0.775 0.168 58 / 0.55); --glow-ember-soft: 0 0 0 1px oklch(0.775 0.168 58 / 0.22), 0 0 20px -6px oklch(0.775 0.168 58 / 0.35); /* ---- motion -------------------------------------------------------------- Strong ease-out curves only — no default browser ease, no bounce. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entrances / exits */ --ease-out-soft: cubic-bezier(0.23, 1, 0.32, 1); /* hover / color */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* on-screen movement */ --dur-instant: 100ms; --dur-fast: 160ms; --dur-base: 220ms; --dur-slow: 380ms; --dur-ambient: 4200ms; --stagger-step: 45ms; /* ---- z-index scale (semantic, never arbitrary) ----------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-overlay: 40; --z-modal: 50; --z-toast: 60; --z-tooltip: 70; /* ---- layout ----------------------------------------------------------*/ --content-max: 78rem; --gutter: clamp(1.25rem, 4vw, 2.5rem); } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-ambient: 1ms; } }