/* ════════════════════════════════════════════════════════════════════════ Design System — theme tokens Two-tier: primitive palette → semantic tokens. Components reference ONLY the semantic tokens (never a raw hex). Add a palette later by adding another :root[data-theme="…"] block with the same semantic token names — no component CSS changes required. Active theme is chosen with . ════════════════════════════════════════════════════════════════════════ */ :root[data-theme="midnight"] { /* ---------- primitive palette ---------- */ --indigo-950:#12102A; --indigo-900:#191534; --indigo-850:#20204A; --indigo-800:#2A2352; --indigo-750:#262247; --indigo-700:#2E2A56; --violet-500:#6C5CE0; --violet-400:#7D6EE8; --violet-600:#5B4CCB; --gilt-400:#E4C36A; --rose-400:#E0748C; --rec-500:#E5514C; --white:#FFFFFF; --tint-strong:#F1EEFC; --tint:#EFECFB; --tint-muted:#B4ADD6; --tint-subtle:#A6A0CE; --tint-faint:rgba(230,225,255,.56); /* nudged lighter: ≥4.5:1 on --surface-raised too */ /* ---------- surfaces & background ---------- */ --app-bg: linear-gradient(160deg, var(--indigo-850) 0%, var(--indigo-800) 55%, var(--indigo-900) 100%); --surface: var(--indigo-750); --surface-raised: var(--indigo-700); --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.16); --shadow-card: 0 8px 24px rgba(0,0,0,.40); --shadow-pop: 0 12px 30px rgba(0,0,0,.50); /* ---------- text ---------- */ --text-strong: var(--tint-strong); --text: var(--tint); --text-muted: var(--tint-muted); --text-subtle: var(--tint-subtle); --text-on-accent: var(--white); /* ---------- accent + states ---------- */ --accent: var(--violet-500); --accent-hover: var(--violet-400); --accent-press: var(--violet-600); --accent-soft: rgba(108,92,224,.16); --focus-ring: rgba(124,110,232,.55); /* ---------- special / status ---------- */ --gilt: var(--gilt-400); --gilt-soft: rgba(206,154,87,.20); --danger: var(--rose-400); --danger-soft: rgba(224,116,140,.16); --rec: var(--rec-500); /* camera "recording" dot (Layer 1) */ /* ---------- nav & tabs ---------- */ --nav-border: var(--border); --logo: var(--tint-strong); --tab-idle: var(--tint-faint); --tab-active-bg: rgba(255,255,255,.14); --tab-active-fg: var(--white); --tab-sidecar: rgba(230,225,255,.42); /* SightReadle — extra-muted, secondary */ /* ---------- buttons ---------- */ --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-hover); --btn-primary-fg: var(--text-on-accent); --btn-ghost-fg: var(--text); --btn-ghost-border: var(--border-strong); /* ---------- cards ---------- */ --card-bg: var(--surface); --card-bg-hover: var(--surface-raised); --card-border: var(--border); --card-shadow: var(--shadow-card); --card-title: var(--text-strong); --card-meta: var(--text-muted); --card-foot: var(--text-subtle); --card-icon: var(--text-subtle); --card-icon-hover: var(--text); --card-divider: var(--border); /* ---------- thumbnail + badge ---------- */ --thumb-from:#3A3470; --thumb-to:#2B2758; --thumb-staff: rgba(255,255,255,.13); --thumb-note: rgba(220,214,255,.80); --badge-bg: rgba(0,0,0,.42); --badge-fg: var(--tint-strong); /* ---------- tag pills ---------- */ --tag-catalog-bg: rgba(255,255,255,.08); --tag-catalog-fg:#B9B2E0; --tag-playable-bg: var(--gilt-soft); --tag-playable-fg: var(--gilt); /* ---------- hands-free / gesture UI (Layer 1) ---------- */ --hands-bg: var(--accent); --hands-fg: var(--text-on-accent); /* ---------- reader (immersive) ---------- */ --reader-surround: var(--indigo-950); /* darkest surface in the app */ --reader-page: var(--white); --reader-page-shadow: 0 6px 30px rgba(0,0,0,.55); --reader-toolbar-bg: rgba(18,16,42,.72); /* translucent, floats over the page */ --reader-toolbar-fg: var(--text); --reader-index: var(--text-muted); /* restrained page indicator */ --reader-tapzone: rgba(255,255,255,.04); /* faint edge affordance */ /* ---------- component extensions (semantic tokens the spec list didn't enumerate but themed components need; kept token-driven for swappability) --- */ --nav-bg: rgba(18,16,42,.55); /* frosted app bar over --app-bg */ --scrim: rgba(0,0,0,.55); /* modal / overlay backdrop */ --toast-bg: rgba(18,16,42,.94); /* page-turn toast */ --trace-bg: var(--indigo-900); /* gesture tuning canvas */ --input-bg: var(--surface); /* modal form fields */ --info-soft: var(--accent-soft); /* calibration info message */ --success: var(--gilt); /* "calibrated ✓" positive state */ } /* ════════════════════════════════════════════════════════════════════════ NOCTURNE — warm candlelit-room theme (supersedes Midnight). Same semantic token names as the Midnight block above, remapped to the Nocturne palette (canonical values from nocturne-final-clayrose.html, §3a). Components change nothing; swapping swaps the whole skin. The extra clay-book, page, ink, sr-page and motion tokens below are Nocturne primitives the ambient system, matte book, and reading surfaces reference. ════════════════════════════════════════════════════════════════════════ */ :root[data-theme="nocturne"] { /* ---------- Nocturne primitives (canonical, §3a) ---------- */ --bg:#19110D; /* warm brown-black room */ --amber:#ECB25E; /* candle amber */ --gold-p:#EBD09A; --good:#7FBE6E; /* collected green */ --c1:#B67A56; --c2:#B07452; --c3:#875240; /* clay-rose matte book */ --note:#F7ECDA; --bink:#FBF1E4; /* note ink / title ink on book */ --page:#FBF3E5; --page-line:#D8CFBA; --ink:#2A2016; /* reading surfaces */ --reader-bg:#140C08; --sr-page:#F4EAD6; /* SightReadle: warm SOFTENED cream, NOT white */ /* type + motion (canonical) */ --font-display: Georgia,"Iowan Old Style","Palatino Linotype",serif; --font-mono: ui-monospace,Menlo,monospace; --dur:600ms; --ease:cubic-bezier(.38,0,.14,1); --ease-bounce:cubic-bezier(.34,1.5,.64,1); /* book bounce */ --ease-wobble:cubic-bezier(.34,1.56,.64,1); /* note wobble/squash */ /* ---------- surfaces & background ---------- */ --app-bg: radial-gradient(120% 90% at 50% -10%, #241811 0%, #1B120D 45%, #140C08 100%); --surface: rgba(60,44,32,.46); --surface-raised: rgba(74,54,39,.66); --border: rgba(255,222,180,.11); --border-strong: rgba(255,222,180,.20); --shadow-card: 0 10px 26px rgba(0,0,0,.46); --shadow-pop: 0 16px 40px rgba(0,0,0,.55); /* ---------- text ---------- */ --text-strong:#FBF3E5; --text:#F6EDE1; --text-muted:#C3AC94; --text-subtle:#A08A72; --text-on-accent:#241408; /* dark ink on amber — contrast-safe (mockup --on-accent) */ /* ---------- accent + states ---------- */ --accent: var(--amber); --accent-hover:#F3C079; --accent-press:#D89A46; --accent-soft: rgba(236,178,94,.16); --focus-ring: rgba(236,178,94,.62); /* ---------- special / status ---------- */ --gilt: var(--gold-p); --gilt-soft: rgba(235,208,154,.20); --danger:#DB7B6A; --danger-soft: rgba(219,123,106,.18); --rec:#E5514C; /* ---------- nav & tabs ---------- */ --nav-border: var(--border); --logo: var(--text-strong); --tab-idle: var(--text-muted); --tab-active-bg: rgba(236,178,94,.18); /* amber wash */ --tab-active-fg:#FBF3E5; --tab-sidecar: rgba(243,224,196,.42); /* ---------- buttons ---------- */ --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-hover); --btn-primary-fg: var(--text-on-accent); --btn-ghost-fg: var(--text); --btn-ghost-border: var(--border-strong); /* ---------- cards ---------- */ --card-bg: var(--surface); --card-bg-hover: var(--surface-raised); --card-border: var(--border); --card-shadow: var(--shadow-card); --card-title: var(--text-strong); --card-meta: var(--text-muted); --card-foot: var(--text-subtle); --card-icon: var(--text-subtle); --card-icon-hover: var(--text); --card-divider: var(--border); /* ---------- thumbnail + badge ---------- */ --thumb-from: var(--c1); --thumb-to: var(--c2); --thumb-staff: rgba(255,255,255,.13); --thumb-note: var(--note); --badge-bg: rgba(28,17,10,.52); --badge-fg: var(--note); /* ---------- tag pills ---------- */ --tag-catalog-bg: rgba(255,222,180,.09); --tag-catalog-fg:#D8C0A2; --tag-playable-bg: var(--gilt-soft); --tag-playable-fg: var(--gilt); /* ---------- hands-free / gesture UI ---------- */ --hands-bg: var(--accent); --hands-fg: var(--text-on-accent); /* ---------- reader (immersive) ---------- */ --reader-surround: var(--reader-bg); /* warm-dark room */ --reader-page: var(--page); /* bright warm page */ --reader-page-shadow: 0 22px 70px rgba(236,178,94,.26), 0 12px 34px rgba(0,0,0,.6); /* warm candle glow (mockup) */ --reader-toolbar-bg: rgba(28,17,10,.74); --reader-toolbar-fg: var(--text); --reader-index: var(--text-muted); --reader-tapzone: rgba(255,222,180,.05); /* ---------- component extensions ---------- */ --nav-bg: rgba(25,17,13,.55); --scrim: rgba(10,6,3,.62); --toast-bg: rgba(30,18,10,.94); --trace-bg:#20140D; --input-bg: var(--surface); --info-soft: var(--accent-soft); --success: var(--good); }