/* ========================================================================== Endless Hybrids — Themes (v1.1.0) Remaps ONLY the semantic role tokens. Components read semantic tokens, so setting data-theme on any container reskins everything beneath it with zero component-CSS changes. Load AFTER tokens.css. Usage: ...

...

(scoped is fine) Light is the default (defined in tokens.css); no data-theme needed for it. v1.1.0: cream-on-dark text alphas brightened + new semantic tokens (surface-sink, on-invert, muted-strong) mapped per theme. ========================================================================== */ /* Any element carrying data-theme paints its own surface + text, so a themed region "just works" without extra rules. (background-color, not background, so a hero image set separately is preserved.) */ [data-theme] { background-color: var(--eh-surface-page); color: var(--eh-body); } /* Dark / Navy — the focus-banner panel mood: structural, editorial. */ [data-theme="dark-navy"] { --eh-surface-page: #263444; --eh-surface-raised: #2E3D4F; --eh-surface-sink: #21303F; --eh-surface-invert: var(--eh-cream-card); --eh-on-invert: var(--eh-navy); --eh-heading: rgba(255, 248, 230, 0.96); --eh-body: rgba(255, 248, 230, 0.90); --eh-muted: rgba(255, 248, 230, 0.66); --eh-muted-strong: rgba(255, 248, 230, 0.78); --eh-border: rgba(255, 248, 230, 0.14); --eh-accent: var(--eh-red); } /* Dark / Cinematic — the splash mood: warm near-black, amber accent. */ [data-theme="dark-cinematic"] { --eh-surface-page: #28261C; --eh-surface-raised: #3D3726; --eh-surface-sink: #211F17; --eh-surface-invert: var(--eh-cream-card); --eh-on-invert: var(--eh-cinematic); --eh-heading: rgba(255, 248, 230, 0.92); --eh-body: rgba(255, 248, 230, 0.88); --eh-muted: rgba(255, 248, 230, 0.58); --eh-muted-strong: rgba(255, 248, 230, 0.72); --eh-border: rgba(255, 248, 230, 0.10); --eh-accent: rgba(var(--eh-amber), 0.95); }