/* ========================================================================== Design Tokens — single source of truth for color, type, spacing, radius, elevation, motion, breakpoints, containers, and z-index. Raw values live only here. All other files reference these token names. Theme model: light-first default in :root. Dark is opt-in via `data-theme="dark"` on (wired by assets/js/lib/theme.js). Only color tokens are remapped in dark mode; type/spacing/radius/motion are shared. ========================================================================== */ :root { /* Color — neutrals (light theme, default) */ --color-ink: #0B0B0C; --color-paper: #F7F7F5; --color-gray: #C9C7C1; /* Neutral support */ --color-ink-80: #2A2A2C; --color-ink-60: #55555A; --color-paper-dim: #EDEDEA; --color-line: #E2E1DC; /* Accent — Forest Green (LOCKED, the only accent) */ --color-accent: #1E7A4C; --color-accent-strong: #14603B; --color-accent-soft: #3DA574; --color-accent-wash: #EAF2ED; /* Functional */ --color-danger: #B4231C; --color-success: #14603B; --color-warning: #8A5A00; --color-focus: #1E7A4C; /* Typography */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --text-caption: 0.8125rem; --text-body-sm: 0.9375rem; --text-body: 1.0625rem; --text-lead: 1.375rem; --text-h4: 1.75rem; --text-h3: 2.5rem; --text-h2: 3.5rem; --text-h1: 5rem; --text-display: 7rem; --leading-caption: 1.4; --leading-body: 1.6; --leading-lead: 1.5; --leading-tight: 1.15; --leading-display: 1.05; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; /* Spacing — 8px base grid */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; --space-12: 240px; /* Radius */ --radius-0: 0px; --radius-1: 6px; --radius-2: 10px; --radius-full: 9999px; /* Elevation — minimal; lines and space preferred over shadow */ --elevation-0: none; --elevation-1: 0 1px 2px rgba(11, 11, 12, 0.06); --elevation-2: 0 8px 24px rgba(11, 11, 12, 0.10); --border-hairline: 1px solid var(--color-line); /* Motion — 120–250ms, purpose-only */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 250ms; --easing-standard: cubic-bezier(0.2, 0, 0, 1); --easing-exit: cubic-bezier(0.4, 0, 1, 1); /* Breakpoints */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* Containers & grid */ --container-prose: 68ch; --container-max: 1200px; --container-wide: 1440px; --grid-columns: 12; --gutter: var(--space-5); --page-margin: var(--space-5); /* Z-index scale */ --z-base: 0; --z-sticky: 100; --z-nav: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; } @media (min-width: 1024px) { :root { --page-margin: var(--space-8); } } /* ---- Dark theme (opt-in, secondary) ---- */ :root[data-theme="dark"] { --color-ink: #F7F7F5; --color-paper: #0B0B0C; --color-gray: #6B6B66; --color-ink-80: #D8D8D6; --color-ink-60: #A8A8A6; --color-paper-dim: #1A1A1B; --color-line: #2A2A2C; --color-accent: #3DA574; --color-accent-strong: #5BC08A; --color-accent-soft: #3DA574; --color-accent-wash: #132D1E; --color-success: #3DA574; --color-focus: #5BC08A; --border-hairline: 1px solid var(--color-line); --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.30); --elevation-2: 0 8px 24px rgba(0, 0, 0, 0.40); }