/* ============================================================ moosehaus.io — theme palette (light / dark) Semantic tokens that flip with the theme. The raw palette in tokens.css never changes; component styles should reference these vars for anything that must adapt (surfaces, text, outlines, shadows). Invariant brand colors (orange, mustard, cream-on-orange, the forest band internals) keep using the raw vars. js/theme.js resolves the user's preference (light | dark | system) and stamps data-theme="light|dark" on before first paint. The media query below is only a no-JS fallback. ============================================================ */ :root { color-scheme: light; /* surfaces */ --bg: #F4EDDD; /* page background (cream) */ --surface: #FBF6EA; /* cards, panels (paper) */ --surface-deep: #EAE0C8; /* code bg, tag fills, ghost hover */ /* text */ --text: #33302A; /* body copy (ink) */ --text-secondary: #4C463C; /* ledes, supporting text */ --heading: #3B2F24; /* headings, wordmark (walnut) */ /* lines & block shadows */ --outline: #3B2F24; /* heavy 2px borders, hairpin legs */ --shadow-tint: #EAE0C8; /* card offset shadows */ --shadow-ink: #3B2F24; /* button offset shadows */ /* themed accents */ --accent-deep: #B85C3A; /* eyebrows, link hovers, room subs */ --link-green: #2E4437; /* card links */ --label: #8A9B7C; /* room numbers, muted labels */ /* bands */ --band-forest: #2E4437; --band-forest-deep: #24362C; --footer-bg: #3B2F24; --roofline-opacity: 0.12; } /* ---- dark theme ---- Elevation gets lighter as it rises; terracotta and mustard stay invariant; hovers lighten instead of darken. Keep this block and the no-JS fallback below in sync. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #201F1A; --surface: #2B2A24; --surface-deep: #33312A; --text: #F4EDDD; --text-secondary: #B8B2A2; --heading: #F4EDDD; --outline: #4C4A3E; --shadow-tint: #14130F; --shadow-ink: #14130F; --accent-deep: #E48A6C; --link-green: #A3B29B; --label: #A3B29B; --band-forest: #24362C; --band-forest-deep: #182420; --footer-bg: #211B14; --roofline-opacity: 0.3; } /* no-JS fallback: follow the OS when theme.js never ran */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #201F1A; --surface: #2B2A24; --surface-deep: #33312A; --text: #F4EDDD; --text-secondary: #B8B2A2; --heading: #F4EDDD; --outline: #4C4A3E; --shadow-tint: #14130F; --shadow-ink: #14130F; --accent-deep: #E48A6C; --link-green: #A3B29B; --label: #A3B29B; --band-forest: #24362C; --band-forest-deep: #182420; --footer-bg: #211B14; --roofline-opacity: 0.3; } }