/* ============================================================
THE SOUND — DESIGN TOKENS · v1.1
Source of truth for color, type, space, radius, motion.
Import this file; reference the variables. Never hard-code a
one-off hex or px — add a token here first, then use it.
DEFAULT SURFACE = DEEP NIGHT. :root is the dark, cinematic default.
Opt into the light editorial surface per-section with data-theme="light"
(long-form / journal only). (Flipped from light-default in v1.1.)
Fonts — add to :
Display face = Bodoni Moda (rational didone) — LARGE DISPLAY ONLY, never small.
To adopt the licensed serif (Canela / Ogg / PP Editorial New), swap
--font-display below — nothing else changes.
============================================================ */
:root{
/* — color · primitives — */
--bone:#EBE3D1; --paper:#F4EEE0; --paper-2:#E3DAC5;
--ink:#1B1D18; --ink-soft:#4A4E45; --ink-muted:#7C7A6E;
--line:#D8CFBA;
--forest:#35453A; --forest-deep:#26332B; --forest-soft:#6E846F;
--night:#131511; --concrete:#2A2A25;
--brass:#B08D57; --brass-soft:#C9A873;
--cedar:#8B6242; --rust:#A15A38;
--success:#4E6B4F; --danger:#8A3B32;
/* — color · semantic (DEEP NIGHT — default surface) — */
--bg:var(--night); --surface:var(--concrete); --surface-2:#34332C;
--text:var(--bone); --text-soft:#C7C1B0; --text-muted:#8E8B7C;
--brand:var(--forest-soft); --accent:var(--brass-soft);
--border:#3A392F; --focus:var(--brass-soft);
/* — type — */
--font-display:'Bodoni Moda', Georgia, 'Times New Roman', serif; /* didone · display only */
--font-sans:'Barlow', system-ui, -apple-system, sans-serif;
--font-label:'Barlow Condensed', 'Barlow', sans-serif;
--text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.25rem;
--text-xl:1.5rem; --text-2xl:2rem; --text-3xl:2.75rem; --text-4xl:4rem; --text-5xl:5.5rem;
--leading-tight:1.05; --leading-snug:1.2; --leading-normal:1.55;
--track-label:.18em; --track-tight:-.01em;
/* — space · 4px base — */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
--space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
/* — radius · restrained — */
--radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-pill:999px;
/* — border · shadow (prefer hairlines) — */
--border-hair:1px solid var(--border);
--shadow-card:0 12px 40px -18px rgba(19,21,17,.28);
/* — motion · slow, architectural — */
--dur-fast:180ms; --dur:320ms; --dur-slow:600ms;
--dur-glide:1500ms; /* long choreographed glides (deck cover morph) */
--ease:cubic-bezier(.2,.6,.2,1);
--ease-glide:cubic-bezier(.33,0,.2,1);
/* — layout — */
--container:1180px; --gutter:32px;
}
/* — LIGHT / editorial surface (secondary — opt in with data-theme="light") — */
[data-theme="light"]{
--bg:var(--bone); --surface:var(--paper); --surface-2:var(--paper-2);
--text:var(--ink); --text-soft:var(--ink-soft); --text-muted:var(--ink-muted);
--brand:var(--forest); --accent:var(--brass);
--border:var(--line); --focus:var(--brass);
}