/* ============================================================================= tokens.css — THE colour + surface system (single source of truth). Load this LAST (after styles.css) on every page. It re-declares the brand palette with the same values it has in styles.css, then DERIVES everything else from it with color-mix(). To re-skin the whole site, edit the five --pf-* values (or a category theme) here — nothing else. IMPORTANT (CSS gotcha): the DERIVED, per-page tokens (--cat-soft, --glow, --page-bg …) are declared on `body`, NOT `:root`. A custom property's var()s resolve against the element it's DECLARED on — so a recipe in :root would bake in the :root --cat before a .theme-* class on could change it. Declaring them on `body` (the same element the theme class targets) makes them follow the page's accent correctly. Spirit: keep the hero's deep near-black canvas, but let the brand colour bloom out of it (washes, glows, accents) instead of flat black everywhere. ============================================================================= */ :root { /* ===== BRAND PALETTE — adjust here ===== */ --pf-1: #ff0332; /* brand red */ --pf-2: #f1ba45; /* marigold */ --pf-3: #d0dd47; /* chartreuse */ --pf-4: #4396cd; /* sky blue */ --pf-5: #863f7b; /* plum purple */ --pf-red: var(--pf-1); --pf-amber: var(--pf-2); --pf-lime: var(--pf-3); --pf-cyan: var(--pf-4); --pf-purple: var(--pf-5); --gold: #c9a227; /* live-resin oil accent */ /* Sativa→Indica lean spectrum — "the colour is the map" */ --spectrum: linear-gradient(90deg, var(--pf-1), var(--pf-2), var(--pf-3), var(--pf-4), var(--pf-5)); /* ===== SURFACES — near-black canvas, faint violet (hero spirit) ===== */ --bg: #05040a; --bg-2: #0b0814; --surface: rgba(255, 255, 255, 0.045); --surface-2: rgba(11, 8, 20, 0.55); --surface-light: #f5f3fb; /* clean cool off-white — the "clean/light" treatment */ --ink-dark: #14101c; /* text color used on light surfaces */ /* ===== TEXT / LINES ===== */ --ink: #f7f3ff; --ink-2: rgba(247, 243, 255, 0.66); --ink-3: rgba(247, 243, 255, 0.42); --line: rgba(247, 243, 255, 0.12); --line-2: rgba(247, 243, 255, 0.22); /* primary + per-page accent DEFAULT (a page's .theme-* class overrides --cat) */ --accent: var(--pf-1); --cat: var(--pf-4); /* real fixed-nav height (padding 30+30 top/bottom + ~15 logo line). Anything that docks flush under the nav reads this so there's never a gap. Same on mobile — the nav renders 75px at all widths, so no per-breakpoint override (a 77px guess left a 2px gap under the mobile toolbar). */ --nav-h: 75px; } /* ===== DERIVED, per-page accent tokens — on BODY so they follow --cat ===== */ body { --cat-ink: color-mix(in srgb, var(--cat) 72%, white 28%); /* readable accent text */ --cat-soft: color-mix(in srgb, var(--cat) 16%, transparent); /* surface tint */ --cat-glow: color-mix(in srgb, var(--cat) 45%, transparent); /* glow */ --cat-line: color-mix(in srgb, var(--cat) 45%, var(--line)); /* accented border */ --cat-fill: color-mix(in srgb, var(--cat) 10%, transparent); /* faint fill */ --page-bg: radial-gradient(125% 70% at 50% -8%, var(--cat-soft), transparent 55%), radial-gradient(80% 55% at 100% 2%, color-mix(in srgb, var(--pf-5) 9%, transparent), transparent 50%), radial-gradient(70% 50% at 0% 6%, color-mix(in srgb, var(--pf-1) 6%, transparent), transparent 50%), var(--bg); --glow: radial-gradient(60% 60% at 50% 45%, var(--cat-glow), transparent 70%); } /* ===== CATEGORY THEMES — set --cat on ; one accent per area ===== */ .theme-vapes { --cat: var(--pf-4); } /* sky blue */ .theme-concentrates { --cat: var(--pf-2); } /* marigold */ .theme-flower { --cat: var(--pf-3); } /* chartreuse */ .theme-prerolls { --cat: var(--pf-1); } /* coral red */ .theme-micromist { --cat: var(--pf-5); } /* plum */ .theme-rso { --cat: var(--gold); } /* oil gold */ .theme-clean { --cat: var(--pf-3); } /* clean green*/ .theme-media { --cat: var(--pf-5); } /* plum */ .theme-journal { --cat: var(--pf-2); } /* marigold — the blog/Journal */ .theme-contact { --cat: var(--pf-1); } /* coral red — warm, inviting */ .theme-legal { --cat: var(--pf-4); } /* neutral blue (privacy/terms/accessibility) */ .theme-neutral { --cat: #8a8f99; } /* grey — Product Finder default (no chip) */ /* ===== "CLEAN" / LIGHT treatment — flip a band to a clinical light surface for proof / clean / lab content. Apply .invert to any section; the tokens re-derive (text goes dark, the page's --cat accent darkens for contrast) so everything inside — slots, proof points, headings — adapts automatically. Light = clean. */ .invert { background: var(--surface-light); color: var(--ink-dark); --ink: var(--ink-dark); --ink-2: rgba(20, 16, 28, 0.64); --ink-3: rgba(20, 16, 28, 0.44); --line: rgba(20, 16, 28, 0.14); --line-2: rgba(20, 16, 28, 0.26); --surface: rgba(20, 16, 28, 0.035); --surface-2: rgba(20, 16, 28, 0.04); --cat-ink: color-mix(in srgb, var(--cat) 62%, var(--ink-dark) 38%); /* darker accent for light bg */ --cat-soft: color-mix(in srgb, var(--cat) 14%, transparent); --cat-glow: color-mix(in srgb, var(--cat) 26%, transparent); --cat-line: color-mix(in srgb, var(--cat) 40%, var(--line)); --cat-fill: color-mix(in srgb, var(--cat) 9%, transparent); }