/* ============================================================ * Tactics design tokens — v0 EXPLORATORY (NOT LOCKED) * Now with dark-mode pair (2026-05-11) * ============================================================ * * Status: 🔬 Exploring per docs/Brand-Kit.md * * Light is default. Dark mode activates via [data-theme="dark"] on * . Pages set the attribute before paint using a small inline * script in so there's no light-flash for dark-preferring * users. * * Convention: any "card / pill / surface" background should be * var(--surface) so it flips correctly. Page background = var(--paper). * Sub-surfaces (chips inside cards, hover states) = var(--surface-2). * ============================================================ */ :root { /* ── Brand colors (these stay roughly constant across themes) ── */ --chanterelle: #E8833A; /* primary CTA orange */ --evergreen: #294F34; /* in-stock / accent */ --sage: #A5CA8D; --sale: #c23030; /* ── Light theme (default) ─────────────────────────────────── */ --paper: #FAF9F4; --obsidian: #1E1D1A; --stone: #E8E6DA; --surface: #FFFFFF; /* cards, pills, mega menu */ --surface-2: #F4F2EB; /* sub-surface (badges, chip rest) */ --surface-3: #ECEAE0; /* deeper sub-surface (toggle track, off-state pills) */ --line: rgba(30,29,26,0.10); --line-strong: rgba(30,29,26,0.18); --muted: rgba(30,29,26,0.62); --shadow-card: 0 4px 14px -6px rgba(30,29,26,0.10); --shadow-pop: 0 12px 40px -12px rgba(30,29,26,0.18), 0 4px 12px -4px rgba(30,29,26,0.08); /* ── Typography ────────────────────────────────────────────── */ --display: 'Bebas Neue', 'Inter', sans-serif; --mono: 'Overpass Mono', ui-monospace, monospace; --body: 'Inter', system-ui, -apple-system, sans-serif; /* ── Layout ────────────────────────────────────────────────── */ --max: 1320px; --gutter: clamp(14px, 4vw, 32px); --header-h: 64px; --radius: 4px; /* ── Spacing scale ─────────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; } /* ── Dark theme — text/surface colors flip, brand accents stay ── */ [data-theme="dark"] { --paper: #14130F; /* page background — slightly warm-dark, not pure black */ --obsidian: #EFEDE3; /* primary text on dark — flipped from light's #1E1D1A */ --stone: #1A1916; /* on-dark text (e.g., badge backgrounds) — flipped */ --surface: #1F1E1B; /* card surface — first elevation over paper */ --surface-2: #2A2824; /* hover-elevated, chip rest */ --surface-3: #34322C; /* deeper sub-surface, toggle track off-state */ --line: rgba(239,237,227,0.08); --line-strong: rgba(239,237,227,0.16); --muted: rgba(239,237,227,0.60); --shadow-card: 0 4px 14px -6px rgba(0,0,0,0.5); --shadow-pop: 0 12px 40px -12px rgba(0,0,0,0.7), 0 4px 12px -4px rgba(0,0,0,0.4); } /* Respect user system preference when no explicit choice yet */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } /* Always declare color-scheme so form controls/scrollbars match */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* Typography helper classes (used across mocks) */ .display { font-family: var(--display); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; } .mono { font-family: var(--mono); } .eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }