/* tokens.css — design tokens. Editorial warm minimalism with a coral accent. Light + dark themes via prefers-color-scheme (zero JS). Mono used only for small labels/tags to keep a modern-editorial feel without dev jargon. */ :root { color-scheme: light dark; /* ---- Palette: LIGHT (default) ---- */ --bg: oklch(97.5% 0.008 85); --surface: oklch(99.2% 0.004 85); --surface-2: oklch(94% 0.012 85); --ink: oklch(22% 0.015 55); --ink-soft: oklch(43% 0.012 60); --muted: oklch(57% 0.012 70); --line: oklch(89% 0.008 80); --accent: oklch(72% 0.15 32); --accent-strong: oklch(64% 0.16 32); --on-accent: oklch(26% 0.05 40); --focus: oklch(60% 0.17 250); --shadow-sm: 0 1px 2px oklch(22% 0.02 55 / 0.05); --shadow-md: 0 14px 44px -16px oklch(22% 0.02 55 / 0.22); /* ---- Typography ---- */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Cascadia Code", "Roboto Mono", monospace; --text-xs: 0.75rem; --text-sm: clamp(0.82rem, 0.8rem + 0.12vw, 0.9rem); --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); --text-lg: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); --text-display: clamp(2.6rem, 1.35rem + 5.4vw, 5.4rem); --tracking-tight: -0.03em; --tracking-wide: 0.14em; --leading-tight: 1.03; --leading-normal: 1.6; /* ---- Space / layout ---- */ --space-2xs: 0.375rem; --space-xs: 0.625rem; --space-sm: 0.875rem; --space-md: 1.25rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 5rem; --section: clamp(4rem, 3rem + 6vw, 9rem); --container: 78rem; --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 2.75rem); /* ---- Radius / motion ---- */ --r-sm: 0.6rem; --r-md: 1rem; --r-lg: 1.5rem; --r-xl: 2rem; --r-pill: 999px; --dur-fast: 150ms; --dur: 240ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ---- Palette: DARK ---- Applied when the user explicitly picks dark, OR (no choice yet / JS off) when the system prefers dark. The toggle sets data-theme on and stores it. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --bg: oklch(18.5% 0.012 60); --surface: oklch(23% 0.014 60); --surface-2: oklch(27% 0.016 60); --ink: oklch(95% 0.006 85); --ink-soft: oklch(77% 0.01 85); --muted: oklch(64% 0.012 80); --line: oklch(31% 0.014 60); --accent: oklch(74% 0.15 34); --accent-strong: oklch(80% 0.13 34); --on-accent: oklch(20% 0.03 40); --focus: oklch(72% 0.16 250); --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3); --shadow-md: 0 14px 44px -16px oklch(0% 0 0 / 0.55); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: oklch(18.5% 0.012 60); --surface: oklch(23% 0.014 60); --surface-2: oklch(27% 0.016 60); --ink: oklch(95% 0.006 85); --ink-soft: oklch(77% 0.01 85); --muted: oklch(64% 0.012 80); --line: oklch(31% 0.014 60); --accent: oklch(74% 0.15 34); --accent-strong: oklch(80% 0.13 34); --on-accent: oklch(20% 0.03 40); --focus: oklch(72% 0.16 250); --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3); --shadow-md: 0 14px 44px -16px oklch(0% 0 0 / 0.55); } }