/* ═══════════════════════════════════════════════════════════════════════ CardToDeal v2 — Design Tokens The single source of truth for color, type, space, motion, elevation. Every other stylesheet (global.css, components.css) consumes these vars. ─────────────────────────────────────────────────────────────────────── THEMES (3, switched via [data-theme] on ; default = sage): • sage — green-tinted light (default, the brand mood) • dark — deep navy (absorbs old "slate" blue-dark) • light — neutral white (clean, near-#fff; old "dusk" amber dropped) COLOR: authored in OKLCH (perceptually uniform → predictable theme ramps). Brand hue = ~152° (green). Neutrals are tinted toward it, never pure #000/#fff. Components reference var(--x), so the OKLCH format is transparent to the ported v1 component CSS. TYPE: Bricolage Grotesque (display/headings) + Hanken Grotesk (body/UI). Chosen via impeccable greenfield pass (Fraunces + Plus Jakarta Sans were reflex-reject defaults). These two are the only families loaded. The 18 legacy semantic tokens are preserved by name so v1 components port cleanly: --bg --sur --s2 --s3 --bdr --b2 --tx --t2 --t3 --acc --a2 --a3 --fade --red --grn --sh --sh2 --mc ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────── FOUNDATION — theme-independent primitives ─────────────────────────────────────────────────────────────────────── */ :root { /* Font families (only Bricolage Grotesque + Hanken Grotesk are loaded) */ --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Font weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-display: 600; /* Bricolage semibold, default heading weight */ --fw-display-bold: 700; --fw-display-light: 300; /* light display weight */ /* Fluid type scale — ≥1.25 ratio between display steps (no flat scale) */ --fs-2xs: 0.6875rem; /* 11px — micro labels */ --fs-xs: 0.75rem; /* 12px — kickers, chips, fine print */ --fs-sm: 0.8125rem; /* 13px — secondary text */ --fs-md: 0.9375rem; /* 15px — body default */ --fs-lg: 1.0625rem; /* 17px — lead paragraphs */ --fs-xl: clamp(1.25rem, 1.10rem + 0.6vw, 1.5rem); /* sub-headings */ --fs-2xl: clamp(1.5rem, 1.20rem + 1.4vw, 2.1rem); /* section titles */ --fs-3xl: clamp(2rem, 1.50rem + 2.4vw, 3.2rem); /* page H1 */ --fs-4xl: clamp(2.6rem, 1.80rem + 4.0vw, 4.6rem); /* hero display */ /* Line heights (dark themes nudge body up; handled in global.css) */ --lh-tight: 1.08; /* display */ --lh-snug: 1.3; /* headings */ --lh-base: 1.6; /* body */ --lh-relaxed: 1.75; /* long-form */ /* Letter spacing */ --ls-tight: -0.03em; /* large display */ --ls-snug: -0.01em; /* headings */ --ls-normal: 0; --ls-wide: 0.07em; /* uppercase kickers / labels */ --ls-wider: 0.12em; /* Spacing scale — varied for rhythm, not a uniform step */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 6rem; /* 96 */ /* Section padding: 48px mobile → 80px desktop (CLAUDE.md §7) */ --sp-section: clamp(3rem, 2rem + 5vw, 5rem); /* Radii (cards 12–16px per CLAUDE.md §7) */ --r-xs: 4px; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 16px; --r-pill: 999px; /* Border widths */ --bw: 1px; --bw2: 1.5px; --bw3: 2px; /* Layout */ --container: 1080px; /* matches v1 main width */ --container-wide: 1200px; /* CLAUDE.md §7 max */ --measure: 68ch; /* body line-length cap (65–75ch) */ /* Motion — ease-out exponential curves only (no bounce/elastic) */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.15s; --dur-base: 0.25s; --dur-slow: 0.4s; /* Z-index scale (mirrors v1 stacking) */ --z-base: 1; --z-sticky-ad: 200; --z-nav: 300; --z-float: 350; /* floating card-stack badge/panel */ --z-mega: 400; --z-menu: 500; --z-toast: 600; --z-modal: 700; /* email-capture modal */ --z-crop: 9999; /* Focus ring (a11y) */ --ring: 0 0 0 3px var(--fade); } /* ─────────────────────────────────────────────────────────────────────── THEME: SAGE (default) — green-tinted light, the brand mood "A sales rep on a bright exhibition floor, phone in hand, mid-morning." ─────────────────────────────────────────────────────────────────────── */ :root, [data-theme="sage"] { color-scheme: light; --bg: oklch(0.972 0.013 152); /* page */ --sur: oklch(0.992 0.006 152); /* card/surface — faintly green, not #fff */ --s2: oklch(0.952 0.016 152); /* raised fill */ --s3: oklch(0.922 0.020 152); /* deeper fill / hover */ --bdr: oklch(0.860 0.026 152); /* primary border */ --b2: oklch(0.928 0.018 152); /* subtle divider */ --tx: oklch(0.270 0.030 152); /* primary text */ --t2: oklch(0.430 0.038 152); /* secondary text */ --t3: oklch(0.560 0.034 152); /* muted / meta */ --acc: oklch(0.523 0.099 152); /* brand green */ --a2: oklch(0.455 0.100 152); /* darker (borders/hover) */ --a3: oklch(0.385 0.095 152); /* darkest (text on light accent) */ --fade: oklch(0.523 0.099 152 / 0.09); /* accent wash */ --on-acc: oklch(0.985 0.012 152); /* text/icons on accent fills (not #fff) */ --red: oklch(0.560 0.165 25); /* error */ --grn: oklch(0.560 0.130 150); /* success */ --sh: 0 2px 20px oklch(0.27 0.03 152 / 0.10); --sh2: 0 12px 40px oklch(0.27 0.03 152 / 0.16); --mc: #F4F8F5; /* mobile browser chrome (themes.js reads this) */ } /* ─────────────────────────────────────────────────────────────────────── THEME: DARK — deep navy (absorbs the old cool/blue "slate") "Reviewing scanned leads on the train home after the show, low light." ─────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --bg: oklch(0.190 0.032 258); /* deep navy page */ --sur: oklch(0.235 0.038 258); /* card */ --s2: oklch(0.280 0.042 258); /* raised fill */ --s3: oklch(0.330 0.044 258); /* hover */ --bdr: oklch(0.800 0.030 220 / 0.16); /* hairline border (light, low alpha) */ --b2: oklch(0.800 0.030 220 / 0.09); /* faint divider */ --tx: oklch(0.930 0.018 220); /* near-white, cool */ --t2: oklch(0.780 0.026 222); --t3: oklch(0.620 0.032 226); --acc: oklch(0.680 0.130 152); /* brand green, brightened for dark */ --a2: oklch(0.600 0.130 152); --a3: oklch(0.520 0.120 152); --fade: oklch(0.680 0.130 152 / 0.16); --on-acc: oklch(0.205 0.030 258); /* DARK text on bright dark-mode accent (contrast) */ --red: oklch(0.690 0.165 25); --grn: oklch(0.720 0.140 150); --sh: 0 2px 20px oklch(0.12 0.03 258 / 0.45); --sh2: 0 14px 48px oklch(0.08 0.03 258 / 0.55); --mc: #161E33; } /* ─────────────────────────────────────────────────────────────────────── THEME: LIGHT — neutral white (your spec: ~#FFFFFF / #F8F9FA / #1A1A2E) #fff/#000 avoided per design law: a whisper of tint keeps it from glaring. "Office desktop, fluorescent overheads, a procurement manager at 11am." ─────────────────────────────────────────────────────────────────────── */ [data-theme="light"] { color-scheme: light; --bg: oklch(0.984 0.003 230); /* ≈ #F8F9FA, cool-neutral */ --sur: oklch(0.997 0.0015 230); /* ≈ #FFFFFF, whisper-tinted (not pure #fff) */ --s2: oklch(0.966 0.004 230); --s3: oklch(0.940 0.006 230); --bdr: oklch(0.882 0.008 240); --b2: oklch(0.936 0.006 240); --tx: oklch(0.235 0.035 280); /* ≈ #1A1A2E indigo-dark */ --t2: oklch(0.420 0.030 278); --t3: oklch(0.560 0.022 270); --acc: oklch(0.505 0.105 152); /* brand green, a touch deeper for pure-white contrast */ --a2: oklch(0.440 0.105 152); --a3: oklch(0.375 0.098 152); --fade: oklch(0.505 0.105 152 / 0.08); --on-acc: oklch(0.990 0.008 152); --red: oklch(0.555 0.170 25); --grn: oklch(0.550 0.135 150); --sh: 0 2px 18px oklch(0.23 0.035 280 / 0.08); --sh2: 0 12px 40px oklch(0.23 0.035 280 / 0.12); --mc: #FEFEFF; /* matches tinted --sur (not pure #fff) */ } /* ─────────────────────────────────────────────────────────────────────── Reduced motion — collapse all token-driven durations to ~instant. Components that transition via var(--dur-*) inherit this automatically. ─────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; } }