/* ============================================================================= Hambone — Themes ----------------------------------------------------------------------------- Each theme redefines ONLY the semantic token layer. Applied via [data-theme="…"] on . The default (no attribute / "neon") is the fallback so the page is styled before JS runs. Semantic contract every theme MUST define: --bg, --bg-elev, --surface, --surface-2, --ink, --ink-dim, --ink-faint, --accent, --accent-2, --accent-ink (text on accent), --line, --focus, --font-display, --font-body, --display-transform, --display-tracking, --display-weight, --grain (0|1), --glow (0|1), --shadow-color. ========================================================================== */ /* --------------------------------------------------------------------------- NEON PREMIERE (default — matches the app's midnight-plum + gold palette) Night-of-the-premiere: deep midnight, glowing gold marquee. ------------------------------------------------------------------------- */ :root, [data-theme="neon"] { --bg: #14102b; --bg-elev: #1c1438; --surface: #2d1f52; --surface-2: #3a2a66; --ink: #f4effb; --ink-dim: #b9a8e0; --ink-faint: #7c6ba8; --accent: #f5c542; --accent-2: #ffd970; --accent-ink:#241640; --line: rgba(245, 197, 66, 0.22); --focus: #ffd970; --shadow-color: 10 6 32; --font-display: "Bricolage Grotesque", "Georgia", serif; --font-body: "Inter", system-ui, sans-serif; --display-transform: none; --display-tracking: var(--tracking-tight); --display-weight: var(--weight-bold); --grain: 0.4; --glow: 1; } /* --------------------------------------------------------------------------- GOLDEN-AGE HOLLYWOOD Art-deco marquee: gold on near-black, warm cream, classic film-title serif. ------------------------------------------------------------------------- */ [data-theme="golden"] { --bg: #0b0a08; --bg-elev: #141210; --surface: #1c1813; --surface-2: #2a231a; --ink: #f6ecd4; --ink-dim: #c9b892; --ink-faint: #8a7a58; --accent: #d4af37; --accent-2: #f0d67a; --accent-ink:#0b0a08; --line: rgba(212, 175, 55, 0.3); --focus: #f0d67a; --shadow-color: 8 6 2; --font-display: "Playfair Display", "Georgia", serif; --font-body: "Cormorant Garamond", "Georgia", serif; --display-transform: uppercase; --display-tracking: var(--tracking-wide); --display-weight: var(--weight-black); --grain: 0.55; --glow: 1; } /* --------------------------------------------------------------------------- MODERN A24 / INDIE Editorial, restrained, generous negative space, one bold accent, grain. ------------------------------------------------------------------------- */ [data-theme="a24"] { --bg: #0f0f0f; --bg-elev: #161616; --surface: #1a1a1a; --surface-2: #242424; --ink: #f2f0ec; --ink-dim: #9a9691; --ink-faint: #5c5854; --accent: #ff5c39; --accent-2: #ff7e5f; --accent-ink:#0f0f0f; --line: rgba(242, 240, 236, 0.12); --focus: #ff5c39; --shadow-color: 0 0 0; --font-display: "Archivo", "Helvetica Neue", sans-serif; --font-body: "Inter", system-ui, sans-serif; --display-transform: uppercase; --display-tracking: var(--tracking-tighter); --display-weight: var(--weight-black); --grain: 0.7; --glow: 0; } /* --------------------------------------------------------------------------- CINEMA NOIR High-contrast monochrome, single amber accent, hard shadow, film-grain. ------------------------------------------------------------------------- */ [data-theme="noir"] { --bg: #050505; --bg-elev: #0d0d0d; --surface: #121212; --surface-2: #1c1c1c; --ink: #ededed; --ink-dim: #8f8f8f; --ink-faint: #545454; --accent: #e6a437; --accent-2: #ffc766; --accent-ink:#050505; --line: rgba(237, 237, 237, 0.14); --focus: #ffc766; --shadow-color: 0 0 0; --font-display: "Oswald", "Impact", sans-serif; --font-body: "Inter", system-ui, sans-serif; --display-transform: uppercase; --display-tracking: var(--tracking-wider); --display-weight: var(--weight-semibold); --grain: 0.85; --glow: 0; }