/* =========================================================================== * Occasion themes — admin-curated, site-wide seasonal palettes * --------------------------------------------------------------------------- * Activated by the `data-occasion` attribute on , which the chrome emits * from the `active_theme` site_setting (admin → Site Settings → Appearance). * When the setting is "none" the attribute is absent and NOTHING here applies — * the site renders in its normal palette. This is the whole safety model: the * feature is inert until an admin deliberately selects an occasion. * * DESIGN RULES (keep these when adding occasions): * 1. Override ONLY brand + accent HUE tokens. Never touch --bg-*, --text-*, * or --border-* — leaving those to the base theme is what guarantees text * contrast stays intact in BOTH light and dark mode. * 2. The primary/brand colour is used as a FILLED button/badge background with * white text (--text-inverse: #fff), so it must clear WCAG AA (>= 4.5:1) on * white. Verified values (vs #fff): * Christmas #B0122B red 7.08 · #1E7A46 evergreen 5.35 * Halloween #5B2A86 purple 9.90 · #B4520A pumpkin 5.06 * 3. Selector specificity is 0,1,1 (`body[data-occasion=…]`), which beats both * `:root` (light, 0,1,0) and `[data-theme="dark"]` (0,1,0). One value per * token therefore wins in both light and dark mode — correct because the * brand fill carries white text regardless of page background. * =========================================================================== */ /* ── Christmas — holly red + evergreen ─────────────────────────────────── */ body[data-occasion="christmas"] { --primary: #B0122B; --primary-hover: #8E0E22; --brand-primary: #B0122B; --brand-primary-hover: #8E0E22; --brand-primary-light: #F7D9DE; --brand-primary-subtle: #FCEEF0; --accent: #1E7A46; --accent-color: #1E7A46; } /* ── Halloween — witching purple + burnt pumpkin ───────────────────────── */ body[data-occasion="halloween"] { --primary: #5B2A86; --primary-hover: #47206B; --brand-primary: #5B2A86; --brand-primary-hover: #47206B; --brand-primary-light: #E7DAF0; --brand-primary-subtle: #F3EDF9; --accent: #B4520A; --accent-color: #B4520A; }