/* ── XERIC / SPRYZA — SHARED THEME TOKENS ──────────────────────── Light = default (no attribute needed). Dark = opt-in via , set by theme.js. Every page should link this ONE file instead of redeclaring :root locally — that duplication is what caused the tokens to drift out of sync across index/recipes/nutrient-guide/etc. ─────────────────────────────────────────────────────────────── */ :root { /* page chrome — NOT themed. The page background was always light parchment in both versions of the site; only the full-bleed band sections (nav / hero / how-it-works / usage / cta / footer) go dark or light. Body text color never needs to invert. */ --ink: #1C1A18; --page-bg: #F7F4EE; --parchment: #F4F0E8; --stone: #EDEAE3; --rule: #C8C4BC; --muted: #7A7570; --warm-grey: #8A8078; --sand: #CEB47E; --brown: #5C3D31; --green: #13322B; /* founder / brand-anchor sections — fixed, not a "dark mode" concern */ /* aliases for generic naming used elsewhere */ --text-primary: var(--ink); --text-secondary: var(--muted); --text-muted: var(--warm-grey); --surface-page: var(--page-bg); --surface-card: #FFFFFF; --surface-stone: var(--stone); --border: var(--rule); /* ── THEMED: only these change with the toggle ─────────────── */ --surface-band: #F4F0E8; /* nav / hero / how / usage / cta / footer bg */ --border-inverse: rgba(0,0,0,0.08); --text-inverse: #2A231D; /* primary text on --surface-band */ --text-inverse-secondary: #5C5346; --text-inverse-muted: #8A8078; /* blend accents — deepened so they still pass ~3:1 on a light band and on white cards, where the original values (#C4884A etc.) sit around 2.6:1 and fail even large-text contrast */ --kvb: #B06A2E; --kpb: #3E6B4E; --kebi: #6B4F79; --kebii: #2F6664; } [data-theme="dark"] { /* this is your current live site, unchanged, except inverse text opacity is fixed to solid colors that clear WCAG AA instead of the previous rgba(255,255,255,0.35–0.55) values */ --surface-band: #1C1A18; --border-inverse: rgba(255,255,255,0.08); --text-inverse: rgba(255,255,255,0.92); --text-inverse-secondary: rgba(255,255,255,0.68); --text-inverse-muted: rgba(255,255,255,0.45); --kvb: #C4884A; --kpb: #4A7A5C; --kebi: #7A5C8A; --kebii: #3A7A78; } /* transition only on the properties that change, not everything — avoids the janky "whole page shudders" feel some toggles have */ body, nav, .band, .card { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } /* ── THEME TOGGLE CONTROL ─────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0.5px solid var(--border); color: var(--text-inverse-secondary); font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: var(--text-inverse); border-color: var(--text-inverse-secondary); } /* variant for placing the toggle on an always-light surface (e.g. recipes.html's white pill nav) where the inverse tokens would be unreadable in dark mode */ .theme-toggle.on-light { color: var(--muted); border-color: var(--rule); } .theme-toggle.on-light:hover { color: var(--ink); border-color: var(--muted); }