/* ============================================================ ALT-TEXT — Design Tokens Maps 1:1 to a future WordPress theme.json palette/typography. Dark is the default theme; light is a designed companion activated via [data-theme="light"] on . ============================================================ */ :root { /* --- Primitive colour scale (theme-invariant) ----------- */ /* Neutrals — used to compose surfaces */ --c-black: #050505; --c-ink-900: #0a0a0a; --c-ink-800: #111111; --c-ink-700: #1a1a1a; --c-ink-600: #232323; --c-ink-500: #3a3a3a; --c-ink-400: #555555; --c-ink-300: #888888; --c-ink-200: #b8b8b8; --c-ink-100: #e6e6e6; --c-ink-50: #f4f4f4; --c-white: #ffffff; /* Accents — pulled from Figma variables sheet */ --c-mint-500: #2ee87a; /* primary CTA */ --c-mint-600: #1fc966; --c-mint-100: #c8f7d8; --c-magenta-500: #e63ad1; /* tag: perspective */ --c-magenta-400: #f266e0; --c-magenta-100: #fbd6f4; --c-orange-500: #ff7a1a; /* tag: field note */ --c-orange-400: #ff9a4d; --c-orange-100: #ffd9bf; --c-red-500: #ff3b3b; /* tag: policy / urgent */ --c-red-400: #ff6464; --c-red-100: #ffd0d0; --c-yellow-500: #ffd23a; /* tag: advocacy */ --c-yellow-400: #ffdd66; --c-yellow-100: #fff3c2; --c-purple-500: #9b6bff; /* tag: report / briefing */ --c-purple-400: #b894ff; --c-purple-100: #e7daff; /* --- Type --------------------------------------------- */ --font-display: "VT323", "Courier New", ui-monospace, monospace; --font-body: "Inconsolata", "Courier New", ui-monospace, monospace; /* Desktop type scale (line-height 100% on display, 110% on body per Figma) */ --fs-h1: 4rem; /* 64 / 5.25rem line */ --fs-h2: 3rem; /* 48 */ --fs-h3: 2.5rem; /* 40 */ --fs-h4: 2rem; /* 32 */ --fs-h5: 1.5rem; /* 24 */ --fs-h6: 1.125rem; /* 18 */ --fs-tagline: 0.9375rem; /* 15 */ --fs-text-lg: 1.3125rem; /* 21 */ --fs-text-md: 1.1875rem; /* 19 */ --fs-text-rg: 1.0625rem; /* 17 — Inconsolata reads small at 16 */ --fs-text-sm: 0.9375rem; /* 15 */ --fs-text-xs: 0.8125rem; /* 13 */ --lh-display: 1; --lh-body: 1.5; /* --- Spacing scale ------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* --- Radius (Figma: large 1–2 col, medium 2–3 col, small <4 col) --- */ --radius-sm: 0.5rem; --radius-md: 1rem; --radius-lg: 1.5rem; --radius-pill: 999px; /* --- Shadows ------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 12px 32px rgba(0,0,0,0.5); /* --- Layout ------------------------------------------- */ --container-max: 1200px; --container-pad: clamp(1rem, 4vw, 2.5rem); --nav-h: 72px; --gutter: 1.5rem; /* --- Motion ------------------------------------------- */ --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; --ease: cubic-bezier(.2,.7,.2,1); /* --- z-index ------------------------------------------ */ --z-nav: 50; --z-dropdown: 60; --z-modal: 100; } /* ============================================================ Dark scheme (default) — maps semantic vars to primitives ============================================================ */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: var(--c-ink-900); --bg-elev: var(--c-ink-800); --bg-elev-2: var(--c-ink-700); --bg-input: var(--c-ink-800); --bg-image: var(--c-ink-500); --fg: var(--c-white); --fg-muted: var(--c-ink-200); --fg-subtle: var(--c-ink-300); --border: rgba(255,255,255,0.22); --border-strong: rgba(255,255,255,0.45); --divider: rgba(255,255,255,0.16); --accent: var(--c-mint-500); --accent-hover: var(--c-mint-600); --on-accent: var(--c-black); --link: var(--c-mint-500); --link-hover: var(--c-mint-600); --focus-ring: var(--c-mint-500); /* Tag chip foregrounds (chips use accent backgrounds + dark text) */ --tag-fg: var(--c-black); --tag-policy-bg: var(--c-red-500); --tag-perspective-bg: var(--c-magenta-500); --tag-fieldnote-bg: var(--c-orange-500); --tag-advocacy-bg: var(--c-yellow-500); --tag-briefing-bg: var(--c-purple-500); --tag-report-bg: var(--c-mint-500); --tag-deepdive-bg: var(--c-ink-100); } /* ============================================================ Light scheme — designed, not auto-inverted ============================================================ */ :root[data-theme="light"] { color-scheme: light; --bg: var(--c-ink-50); --bg-elev: var(--c-white); --bg-elev-2: var(--c-ink-50); --bg-input: var(--c-white); --bg-image: var(--c-ink-100); --fg: var(--c-ink-900); --fg-muted: var(--c-ink-500); --fg-subtle: var(--c-ink-400); --border: rgba(0,0,0,0.22); --border-strong: rgba(0,0,0,0.45); --divider: rgba(0,0,0,0.16); --accent: var(--c-mint-600); --accent-hover: var(--c-mint-500); --on-accent: var(--c-white); --link: var(--c-mint-600); --link-hover: var(--c-mint-500); --focus-ring: var(--c-mint-600); --tag-fg: var(--c-black); --tag-policy-bg: var(--c-red-400); --tag-perspective-bg: var(--c-magenta-400); --tag-fieldnote-bg: var(--c-orange-400); --tag-advocacy-bg: var(--c-yellow-400); --tag-briefing-bg: var(--c-purple-400); --tag-report-bg: var(--c-mint-500); --tag-deepdive-bg: var(--c-ink-600); } /* Dark is the brand default. Light only applies when the user toggles explicitly via [data-theme="light"]. OS-level prefers-color-scheme is not honoured by design. */ /* Mobile type scale tweaks (Figma mobile column) */ @media (max-width: 768px) { :root { --fs-h1: 3rem; --fs-h2: 2.5rem; --fs-h3: 2rem; --fs-h4: 1.5rem; --fs-h5: 1.25rem; --fs-h6: 1.125rem; } }