/* ============================================================================ Burton v7 — Design Tokens ---------------------------------------------------------------------------- The single source of truth for colors, typography, spacing, radii, motion. Do not introduce raw values anywhere else in the theme — reference these. See REDESIGN.md §4 for the design system. ========================================================================= */ :root { /* ── Color ────────────────────────────────────────────────────────────── */ /* Surface + background */ --color-bg: #F2FBF9; /* page background (soft mint) */ --color-surface: #FFFFFF; /* cards, surfaces */ --color-surface-2: #ECFEFF; /* secondary surface, accent panels */ /* Ink */ --color-ink: #0F172A; /* primary text, near-black */ --color-ink-raised: #1E293B; /* lifted dark surfaces — footer (clearly distinguishable from --color-ink) */ --color-ink-muted: #475569; /* secondary text */ --color-ink-subtle: #94A3B8; /* captions, metadata */ /* Accent — used sparingly, only for "this matters" moments */ --color-accent: #06B6D4; --color-accent-hover: #0891B2; --color-accent-soft: #CFFAFE; /* Lines + separators */ --color-line: #E2E8F0; --color-line-strong: #CBD5E1; /* Semantic aliases for common patterns */ --color-border: var(--color-line); /* card borders, dividers */ --color-border-strong: var(--color-line-strong); /* emphasized borders */ --color-surface-raised: var(--color-surface-2); /* elevated cards, hover states */ /* Editorial — for long-form article body */ --color-editorial-bg: #FFFFFF; --color-editorial-ink: #1E293B; /* slightly warmer than --color-ink */ /* Status */ --color-success: #10B981; --color-warning: #F59E0B; --color-danger: #EF4444; /* ── Typography ───────────────────────────────────────────────────────── */ --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Source Serif 4', 'Source Serif Pro', 'Charter', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace; /* Type scale — modular scale 1.250 (major third) from 16px base */ --fs-xs: 0.8rem; /* 12.8px */ --fs-sm: 0.9rem; /* 14.4px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px — article body */ --fs-lg: 1.25rem; /* 20px */ --fs-xl: 1.5625rem; /* 25px */ --fs-2xl: 1.953rem; /* 31.25px */ --fs-3xl: 2.441rem; /* 39.06px — section headlines */ --fs-4xl: 3.052rem; /* 48.83px — page h1 */ --fs-5xl: 3.815rem; /* 61.04px — hero headline */ /* Line height */ --lh-tight: 1.1; /* display / hero */ --lh-snug: 1.25; /* section headlines */ --lh-normal: 1.5; /* ui body */ --lh-relaxed: 1.7; /* article body (serif) */ --lh-loose: 1.85; /* Font weight */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.12em; /* uppercase eyebrows */ /* ── Spacing (4px grid) ───────────────────────────────────────────────── */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-14: 3.5rem; /* 56 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* Semantic aliases (for readability in component code) */ --space-xs: var(--space-2); /* 8px - tight gaps, icon margins */ --space-sm: var(--space-3); /* 12px - compact gaps, small padding */ --space-md: var(--space-4); /* 16px - standard gaps, card padding */ --space-lg: var(--space-6); /* 24px - section gaps, larger padding */ --space-xl: var(--space-8); /* 32px - major section margins */ --space-2xl: var(--space-12); /* 48px - hero spacing */ --space-3xl: var(--space-16); /* 64px - page section breaks */ /* ── Container ────────────────────────────────────────────────────────── */ --container-narrow: 640px; /* article body width — optimal line length */ --container-default: 1140px; /* standard marketing / section width */ --container-wide: 1280px; /* hero, wide layouts */ --container-full: 100%; --container-pad: var(--space-6); /* ── Radii ────────────────────────────────────────────────────────────── */ --radius-xs: 6px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; /* cards */ --radius-xl: 32px; --radius-pill: 100px; /* buttons */ --radius-full: 9999px; /* ── Shadows ──────────────────────────────────────────────────────────── */ --shadow-soft: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.03); --shadow-card: 0 10px 15px -3px rgba(15, 23, 42, 0.05), 0 4px 6px -2px rgba(15, 23, 42, 0.025); --shadow-lift: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 10px 10px -5px rgba(15, 23, 42, 0.03); --shadow-focus: 0 0 0 3px rgba(6, 182, 212, 0.25); /* ── Motion ───────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* snappy */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* balanced */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; /* ── Z-index ──────────────────────────────────────────────────────────── */ --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; } /* Respect reduced-motion preferences globally */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }