/* ============================================================ SWS Design Tokens — canonical foundation -------------------------------------------------------- Single source of truth for color, type, spacing, edges. Every canonical page imports this BEFORE any other CSS. Light mode is default. Dark mode opt-in via: Per memory rules: - feedback_design_via_synthesis_not_imitation.md - feedback_avoid_ai_tells_in_ui.md ============================================================ */ :root { /* ─────────── COLOR (LIGHT — default, e-com/retail audience) ─────────── */ --bg-primary: #fbfaf7; /* warm cream — page base */ --bg-elevated: #f4f1ea; /* slightly darker for section breaks */ --bg-card: #ffffff; /* pure white card surface */ --bg-dark-flip: #0a0a0a; /* the "intentional dark section" inside light flow */ --bg-dark-card: #18181b; /* card inside the dark flip */ --text: #0a0a0a; /* near-black primary text */ --text-dim: #4b5563; /* secondary text */ --text-mute: #9ca3af; /* tertiary / captions / meta */ --text-on-dark: #ffffff; /* text on dark sections */ --text-on-dark-dim: #d1d5db; --accent: #9C0018; /* SWS brand red — solid CTA backgrounds (white-text OK on this) */ --accent-hi: #B8001E; /* hover state of accent */ --accent-light: #FF4558; /* lighter red for emphasis on dark sections */ --accent-text: #9C0018; /* TEXT-only accent (em, eyebrows, accents in copy). On light bg = same as --accent. Dark mode overrides this to a brighter red for contrast. */ --rule: #e6e1d6; /* subtle border on light surfaces */ --rule-strong: #d1ccbf; /* stronger border when needed */ --rule-dark: rgba(255,255,255,0.10); /* border on dark surfaces */ /* ─────────── TYPE ─────────── */ --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; /* editorial moments — modern geometric */ --font-body: "Inter", system-ui, -apple-system, sans-serif; /* everything else */ --font-mono: "JetBrains Mono", "DM Mono", ui-monospace, monospace; /* numbers, prices, stats */ /* Type scale — confident but restrained */ --t-h1: clamp(2.75rem, 8vw, 6.25rem); /* hero — big and confident */ --t-h2: clamp(1.875rem, 5vw, 3.5rem); /* section heads */ --t-h3: 1.5rem; /* card titles */ --t-h4: 1.125rem; /* sub-headings */ --t-lead: 1.0625rem; /* hero subtitle, lead paragraphs */ --t-body: 1rem; /* default reading */ --t-meta: 0.875rem; /* small captions */ --t-tiny: 0.6875rem; /* eyebrow labels, tags */ /* Line height + letter spacing */ --lh-display: 0.92; --lh-tight: 1.1; --lh-body: 1.55; --lh-relaxed: 1.7; --ls-eyebrow: 0.24em; /* eyebrow uppercase tracking */ --ls-display: 0.005em; --ls-mono: 0.02em; /* ─────────── SPACE ─────────── */ --space-hero: clamp(4rem, 10vw, 8rem) 1.5rem; /* hero padding generous */ --space-section: clamp(3rem, 6vw, 5rem) 1.5rem; --space-card: 1.5rem; --space-tight: 0.75rem; --max-content: 1240px; /* main content width */ --max-text: 640px; /* readable paragraph width */ --max-card: 380px; /* tier card width cap */ /* ─────────── EDGES ─────────── */ --radius: 4px; /* sharp default */ --radius-pill: 100px; /* fully rounded for badges/chips */ --rule-w: 1px; /* Subtle elevation — NOT chunky shadows (banned per memory rule) */ --elevation: 0 1px 2px rgba(0,0,0,0.04); --elevation-hover: 0 4px 12px rgba(0,0,0,0.06); /* ─────────── MOTION (subtle only) ─────────── */ --motion-fast: 150ms ease; --motion-base: 220ms ease; } /* ─────────── DARK MODE (opt-in) ─────────── */ [data-theme="dark"] { --bg-primary: #030712; --bg-elevated: #0a0f1c; --bg-card: #0c1220; --bg-dark-flip: #ffffff; /* in dark mode, the "flip" goes light */ --bg-dark-card: #fafafa; --text: #ffffff; --text-dim: #d1d5db; /* lifted from #9ca3af for WCAG AA on near-black */ --text-mute: #b8bdc7; /* lifted from #9ca3af — clears axe-core strict check on 11px eyebrows */ --text-on-dark: #0a0a0a; --text-on-dark-dim: #4b5563; /* Dark-mode contrast fix: --accent stays #9C0018 — used as solid button background (white text on it = 11:1, passes AAA) --accent-text becomes lighter #FF4558 — used for text accents (eyebrows, ems, monthly price) on near-black background = 6.1:1, passes AA */ --accent-text: #FF4558; --rule: rgba(255,255,255,0.12); --rule-strong: rgba(255,255,255,0.20); --rule-dark: #e6e1d6; /* in dark mode, inverted */ --elevation: 0 1px 2px rgba(0,0,0,0.2); --elevation-hover: 0 4px 12px rgba(0,0,0,0.4); } /* ─────────── Respect user OS preference if Dom hasn't set one ─────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg-primary: #030712; --bg-elevated: #0a0f1c; --bg-card: #0c1220; --bg-dark-flip: #ffffff; --bg-dark-card: #fafafa; --text: #ffffff; --text-dim: #d1d5db; --text-mute: #b8bdc7; --text-on-dark: #0a0a0a; --text-on-dark-dim: #4b5563; --accent-text: #FF4558; --rule: rgba(255,255,255,0.12); --rule-strong: rgba(255,255,255,0.20); --rule-dark: #e6e1d6; } }