/* ============================================================ Kernal Kush — Theme Tokens Two switchable palettes built around the Kernal mascot (olive-green body, espresso-brown limbs, cream highlights). USAGE ----- 1. Link this file in the of EVERY page: 2. Pick the active palette by setting an attribute on : (default — olive + kraft) (toasted popcorn — cream + espresso + gold) Or let theme-switch.js manage it from localStorage. 3. Reference tokens anywhere instead of raw hex: background: var(--kk-bg); color: var(--kk-text); background: var(--kk-cta); color: var(--kk-cta-text); The rgb-triplet tokens are meant for rgba(): box-shadow: 0 0 40px rgba(var(--kk-glow-1), .3); Switching data-theme re-themes the whole page instantly — no per-page color edits needed once everything uses the tokens. ============================================================ */ /* ---------- CLASSIC : Olive + Kraft (default) ---------- */ :root, [data-theme="classic"] { --kk-bg: #e9e1d0; /* page background (kraft) */ --kk-surface: #f4eee0; /* cards / panels (cream) */ --kk-surface-hover: #eae2cf; /* hovered surface */ --kk-ink: #23271c; /* darkest — header, footer, H1s */ --kk-ink-2: #1d2114; /* nav link text, icon buttons */ --kk-text: #2a2820; /* body text */ --kk-text-muted: #6f6852; /* secondary text */ --kk-text-soft: #5c5640; /* large paragraph text */ --kk-label: #7a7158; /* form labels */ --kk-meta: #9a9075; /* product meta / eyebrow on card */ --kk-on-dark-muted: #8a9270; /* muted text on dark bg */ --kk-on-dark: #cdd6ac; /* light text on dark ribbon/nav */ --kk-on-dark-2: #cbd2b4; /* light paragraph on dark band */ --kk-nav: #94a455; /* nav bar background (olive) */ --kk-accent: #7a8a44; /* primary accent (eyebrows, H2) */ --kk-accent-bright: #aebf5a; /* bright accent (links, dots) */ --kk-accent-gold: #9a7d3a; /* AAA grade tag */ --kk-accent-clay: #c4663a; /* concentrate / FECO tag */ --kk-cta: #edc04e; /* call-to-action background */ --kk-cta-text: #241f10; /* text on CTA */ --kk-border: #ddd2ba; /* default card border */ --kk-border-soft: #d9cfb8; /* input borders */ --kk-border-strong: #c9bfa6; /* stronger outline */ --kk-divider: #4a5040; /* divider on dark ribbon */ --kk-footer-border: #383d2c; /* footer hairline */ /* smoky product / hero panel gradient stops */ --kk-panel-1: #33402a; --kk-panel-2: #1b2314; --kk-panel-3: #2f3b26; --kk-panel-4: #1a2113; /* rgb triplets — use inside rgba(var(--token), alpha) */ --kk-glow-1: 174,191,90; /* olive smoke glow */ --kk-glow-2: 120,150,90; /* deep smoke glow */ --kk-puff-1: 212,222,182; /* drifting smoke puffs */ --kk-puff-2: 192,206,150; --kk-puff-3: 222,230,196; --kk-puff-4: 202,214,166; --kk-overlay: 28,33,22; /* age-gate dim overlay */ } /* ---------- TOASTED POPCORN : Cream + Espresso + Gold ---------- */ [data-theme="toasted"] { --kk-bg: #f1e7d0; --kk-surface: #f7efda; --kk-surface-hover: #efe5d0; --kk-ink: #2a2113; --kk-ink-2: #241c0f; --kk-text: #2e2417; --kk-text-muted: #7c7058; --kk-text-soft: #695d42; --kk-label: #877a5e; --kk-meta: #a89a7a; --kk-on-dark-muted: #9a8f6e; --kk-on-dark: #ded3a6; --kk-on-dark-2: #ddd2a6; --kk-nav: #9aa257; --kk-accent: #8c7c34; --kk-accent-bright: #c2a24a; --kk-accent-gold: #b07d2e; --kk-accent-clay: #c4663a; --kk-cta: #e8b94a; --kk-cta-text: #2a2012; --kk-border: #e4d7b6; --kk-border-soft: #e2d5b6; --kk-border-strong: #d8c8a6; --kk-divider: #574b38; --kk-footer-border: #41382a; --kk-panel-1: #3a3220; --kk-panel-2: #1d1509; --kk-panel-3: #352c19; --kk-panel-4: #1c1409; --kk-glow-1: 200,168,86; --kk-glow-2: 158,134,78; --kk-puff-1: 228,214,170; --kk-puff-2: 216,198,140; --kk-puff-3: 232,220,180; --kk-puff-4: 222,206,160; --kk-overlay: 30,23,13; }