/* ===================================================================== Craving for Chocolate — SEASONAL THEMES (added 2026-09-20) How it works • styles.css holds the site exactly as designed ("classic"): every seasonal color is a variable in its :root block (the THEME TOKENS group). • Each theme below overrides ONLY those variables under [data-theme="…"]. Nothing in styles.css is edited to add or change a theme. • theme.js puts data-theme on before first paint, from the single CRAVING_THEME setting at the top of that file. Rules for a new theme (copy the fall block, rename it): • Override tokens only. Never restyle components here. • Keep --ink / --ink-soft as they are — the near-black text and the off-white paper are the brand constants; a theme tints the aurora, the accent line, the glows and (gently) the paper. • If you change --bg, change the four --bg-NN companions to match (same RGB, same alphas) so the nav and cart drawer stay in step. • Test on a phone: the --m-* tokens are the mobile aurora. ===================================================================== */ /* --------------------------------------------------------------------- FALL — fallen-leaf palette, quiet: tan, soft russet, clay, olive gold on oatmeal paper with espresso ink. Small leaves fall through the ambient layer on a light breeze (fall-leaves.js). (v6, 2026-09-20) --------------------------------------------------------------------- */ [data-theme="fall"]{ /* paper + ink */ --bg:#f6efe4; --ink:#1c1410; --ink-soft:#5f4a3a; --line:#dfd2bf; --card:#fffaf2; --bg-72:rgba(246,239,228,.72); --bg-86:rgba(246,239,228,.86); --bg-96:rgba(246,239,228,.96); --bg-97:rgba(246,239,228,.97); /* accent line: bronze → muted brick → ochre */ --grad-1:#b98a5c; --grad-2:#9a6a5a; --grad-3:#c9a86a; /* desktop aurora — top-right: tan / soft russet; bottom-left: clay / olive gold */ --aurora-1:conic-gradient(from 200deg,#e0c7a6,#d1a888,#ece0c6,#c9a596,#e0c7a6); --aurora-2:conic-gradient(from 40deg,#c7a998,#d4c79c,#d3b394,#c7a998); --aurora-field:radial-gradient(circle,#e0c8ad 0%,#d4bfae 55%,transparent 75%); /* mobile aurora */ --m-aurora-1:radial-gradient(closest-side,#e0c39d 0%,rgba(224,195,157,.55) 42%,rgba(224,195,157,0) 72%); --m-aurora-2:radial-gradient(closest-side,#c7a998 0%,rgba(199,169,152,.5) 42%,rgba(199,169,152,0) 72%); --m-floor:#eadcc3; --m-floor-0:rgba(234,220,195,0); /* cursor glows — burnished copper */ --logo-glow-a:rgba(185,138,92,.42); --logo-glow-b:rgba(224,199,166,.22); --logo-shadow:rgba(185,138,92,.35); --card-glow-a:rgba(170,120,70,.85); --card-glow-b:rgba(214,184,140,.4); --bm-glow-b:rgba(250,216,178,.75); --bm-glow-shadow:rgba(196,150,100,.7); --bm-hover-shadow:rgba(140,100,64,.4); /* paper note card — a touch of kraft */ --note-a:#f9f0dd; --note-b:#e9d8b9; } /* Falling leaves: drawn by fall-leaves.js on a canvas inside .ambient (loaded by theme.js for this theme only). Nothing to style here; the canvas sits at z-index 0 with the aurora, under every section. */ /* --------------------------------------------------------------------- HOLIDAY — placeholder, not yet designed. Setting CRAVING_THEME to "holiday" before this block is filled in simply renders classic. --------------------------------------------------------------------- */ /* [data-theme="holiday"]{ } */