/* * WVHM 89.7 — Design Tokens * Single source of truth for color, type, spacing, radius, and shadow. * * Committed choices baked in (no tweak-panel variants): * Accent : Heart Red (#C8242C / #A41C24) * Fonts : Editorial (Newsreader + DM Sans + JetBrains Mono) * Density : Comfy (space-unit = 1.22) * Hero : Editorial (2-col, copy left / image right) * Theme : Light + Dark via .dark on */ :root { /* ── Raw palette ── */ --bone-50: #FAF7F1; --bone-100: #F3EEE3; --bone-200: #E8E1D1; --bone-300: #D6CDB8; --bone-400: #ADA38C; --ink-900: #15120D; --ink-800: #211D17; --ink-700: #2E2A23; --ink-600: #4A4438; --ink-500: #6B6353; --ink-400: #8E8674; --logo-red: #C8242C; /* ── Accent: Heart Red ── */ --accent: #C8242C; --accent-strong: #A41C24; --accent-soft: oklch(0.94 0.04 25); --accent-ink: #FAF7F1; /* ── Role tokens — light theme (default) ── */ --bg: var(--bone-50); --bg-elev: #FFFCF5; --bg-sunken: var(--bone-100); --bg-inverse: var(--ink-900); --surface: #FFFCF5; --surface-2: var(--bone-100); --border: rgba(33,29,23,0.10); --border-strong: rgba(33,29,23,0.22); --text: var(--ink-900); --text-muted: var(--ink-500); --text-soft: var(--ink-600); --text-on-inverse: var(--bone-50); /* ── Typography: Editorial ── */ --font-display: "Newsreader", "Source Serif 4", Georgia, serif; --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* ── Spacing: Comfy (space-unit = 1.22) — values rounded to integers ── */ --s-1: 5px; /* 4 × 1.22 */ --s-2: 10px; /* 8 × 1.22 */ --s-3: 15px; /* 12 × 1.22 */ --s-4: 20px; /* 16 × 1.22 */ --s-5: 29px; /* 24 × 1.22 */ --s-6: 39px; /* 32 × 1.22 */ --s-7: 59px; /* 48 × 1.22 */ --s-8: 78px; /* 64 × 1.22 */ --s-9: 117px; /* 96 × 1.22 */ /* ── Radii ── */ --radius-sm: 6px; --radius: 10px; --radius-lg: 18px; --radius-xl: 28px; /* ── Shadows ── */ --shadow-1: 0 1px 2px rgba(33,29,23,0.04), 0 1px 1px rgba(33,29,23,0.06); --shadow-2: 0 4px 14px -4px rgba(33,29,23,0.10), 0 2px 4px rgba(33,29,23,0.04); --shadow-3: 0 24px 60px -20px rgba(33,29,23,0.22), 0 8px 20px -8px rgba(33,29,23,0.12); /* ── Layout ── */ --maxw: 1280px; } /* ── Dark mode ─────────────────────────────────────────────────────────────── */ html.dark { --bg: #15120D; --bg-elev: #1C1812; --bg-sunken: #100E0A; --bg-inverse: var(--bone-50); --surface: #1C1812; --surface-2: #25201A; --border: rgba(243,238,227,0.10); --border-strong: rgba(243,238,227,0.22); --text: var(--bone-50); --text-muted: #B5AC95; --text-soft: #D6CDB8; --text-on-inverse: var(--ink-900); } /* Darker footer in dark mode for tonal separation */ html.dark .footer { --bg-inverse: #0A0805; } html.dark .pledge-banner { --bg-inverse: #0F0D08; }