/* ══════════════════════════════════════════════════════════════ TOKENS.CSS — Shared design tokens for every page. Load this FIRST in , before the page's own stylesheet, so the page's rules can reference these custom properties. This file only adds new tokens (spacing scale, container widths) and the two brand-color variants that measurably drifted between pages (--gold-dim, --gold-faint) — it does not attempt to rename or consolidate every color variable already in use, since most of that apparent drift lives in each file's unused legacy dark-theme :root block (always overridden by a later "WARM THEME" block) and touching it has no visible effect but real risk of breaking the override chain. ══════════════════════════════════════════════════════════════ */ :root { /* ── Spacing scale — 4px step, px-based (not rem) so a section's physical size stays identical across pages regardless of each page's own root font-size, which currently varies 16-19px via independent fluid-type rules. ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ── Container widths — replaces the ad hoc per-page max-width values found in the audit (900px/820px/900px/undefined/1200px for conceptually the same "page content column"). ── */ --content-narrow: 640px; /* forms, auth-style single-column content */ --content-base: 900px; /* menu/order lists, standard page body */ --content-wide: 1200px; /* gallery grids, wide card layouts */ /* ── Brand color variants that measurably drift in live (rendered) CSS across pages — canonicalized to their most common value. ── */ --gold-dim: rgba(201, 168, 76, 0.32); --gold-faint: rgba(201, 168, 76, 0.1); } /* ── Root font-size — unified across every page. ── Bug fix: 8 pages set html { font-size: 112.5% } (18px root) in their own stylesheet, 6 pages left the browser default (16px root). Every rem-based value — including the shared nav's own padding/height and .nav-logo font-size — therefore rendered ~12.5% smaller on the six pages that opted out (audit measured the shared nav's padding at 32px on gallery/membership vs 36px on events/home, and its logo at 13.6px vs 15.3px — same rules, different root, different pixels). Setting it here in tokens.css (loaded first on every page) unifies the base so anything expressed in rem, in the shared nav or in any page CSS, renders at the same size everywhere without each page having to remember to opt in. Individual pages can still override this by redeclaring html { font-size } later in their own file. */ html { font-size: 112.5%; } /* ── Standard breakpoints — documentation, not enforceable ── CSS custom properties can't be substituted inside an @media query (`@media (max-width: var(--x))` isn't valid CSS — no build step/ preprocessor exists on this site to work around that), so this is a convention, not a token: every new @media rule on any page should use one of these four widths, not a nearby-but-different number. Found drifting independently per page during a responsive audit — e.g. site-nav.v2.css's own 640px nav-shrink rule silently never applied on any page due to a specificity bug (fixed separately) — and page CSS had picked up not just different breakpoint numbers, but sometimes 3-4 numbers doing the job one would. 1024px — tablet: hamburger nav takes over, links hide 768px — small tablet / large phone landscape 640px — nav padding/height shrink, single-column layouts 420px — phone: drop non-essential chrome (e.g. checkout title) */