/* tokens.css — design tokens (OKLCH-first, dark-first ergonomics). * Defines color, typography, spacing, radius, shadow, and motion primitives. * Surface tokens are themable via [data-theme] and prefers-color-scheme. */ :root { /* Hue + chroma anchors. Drift --hue to recolor the whole product. */ --hue: 250; --chroma-accent: 0.18; --chroma-neutral: 0.012; /* Accent ramp: light (1) → dark (12). Driven by --hue. */ --color-accent-1: oklch(97% 0.030 var(--hue)); --color-accent-2: oklch(94% 0.045 var(--hue)); --color-accent-3: oklch(89% 0.065 var(--hue)); --color-accent-4: oklch(83% 0.090 var(--hue)); --color-accent-5: oklch(76% 0.115 var(--hue)); --color-accent-6: oklch(68% 0.145 var(--hue)); --color-accent-7: oklch(60% 0.170 var(--hue)); --color-accent-8: oklch(54% var(--chroma-accent) var(--hue)); --color-accent-9: oklch(48% 0.180 var(--hue)); --color-accent-10: oklch(42% 0.150 var(--hue)); --color-accent-11: oklch(35% 0.115 var(--hue)); --color-accent-12: oklch(28% 0.080 var(--hue)); /* Neutral ramp: same hue, low chroma → harmonious grays. */ --color-neutral-1: oklch(99.0% 0.005 var(--hue)); --color-neutral-2: oklch(97.5% 0.007 var(--hue)); --color-neutral-3: oklch(94.5% 0.009 var(--hue)); --color-neutral-4: oklch(91.0% 0.011 var(--hue)); --color-neutral-5: oklch(86.0% 0.013 var(--hue)); --color-neutral-6: oklch(78.0% 0.015 var(--hue)); --color-neutral-7: oklch(67.0% 0.017 var(--hue)); --color-neutral-8: oklch(55.0% 0.019 var(--hue)); --color-neutral-9: oklch(43.0% 0.020 var(--hue)); --color-neutral-10: oklch(32.0% 0.020 var(--hue)); --color-neutral-11: oklch(22.0% 0.018 var(--hue)); --color-neutral-12: oklch(14.0% 0.022 var(--hue)); /* Semantic status — calibrated against accent for harmony. */ --color-success: oklch(58% 0.18 145); --color-warning: oklch(72% 0.19 80); --color-danger: oklch(55% 0.22 25); --color-info: oklch(58% 0.18 220); --color-success-soft: oklch(95% 0.05 145); --color-warning-soft: oklch(95% 0.06 80); --color-danger-soft: oklch(95% 0.06 25); --color-info-soft: oklch(95% 0.05 220); /* Surface semantics (LIGHT default). */ --bg: var(--color-neutral-1); --bg-subtle: var(--color-neutral-2); --bg-element: var(--color-neutral-3); --bg-hover: var(--color-neutral-4); --border: color-mix(in oklch, var(--color-neutral-5) 70%, transparent); --border-strong: var(--color-neutral-6); --text: var(--color-neutral-12); --text-muted: var(--color-neutral-9); --text-faint: var(--color-neutral-7); --text-link: var(--color-accent-9); --text-on-accent: var(--color-neutral-1); --fill-accent: var(--color-accent-8); --fill-accent-hover: var(--color-accent-9); --fill-accent-soft: color-mix(in oklch, var(--color-accent-8) 14%, transparent); /* Typography. */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; --text-xs: 0.75rem; --lh-xs: 1.1rem; --text-sm: 0.8125rem; --lh-sm: 1.25rem; --text-base: 0.9375rem; --lh-base: 1.5rem; --text-md: 1rem; --lh-md: 1.6rem; --text-lg: 1.125rem; --lh-lg: 1.7rem; --text-xl: 1.375rem; --lh-xl: 1.85rem; --text-2xl: 1.75rem; --lh-2xl: 2.15rem; --text-3xl: 2.125rem; --lh-3xl: 2.45rem; --text-4xl: 2.625rem; --lh-4xl: 2.95rem; --text-5xl: 3.25rem; --lh-5xl: 3.55rem; /* Spacing (4px base). */ --space-0: 0; --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; /* Radius. */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 18px; --radius-pill: 9999px; /* Shadows — calibrated for LIGHT surfaces. */ --shadow-sm: 0 1px 2px 0 oklch(20% 0.02 var(--hue) / 0.06), 0 1px 1px 0 oklch(20% 0.02 var(--hue) / 0.04); --shadow-md: 0 4px 12px -2px oklch(20% 0.02 var(--hue) / 0.08), 0 2px 4px -1px oklch(20% 0.02 var(--hue) / 0.06); --shadow-lg: 0 16px 32px -8px oklch(20% 0.02 var(--hue) / 0.18), 0 4px 8px -2px oklch(20% 0.02 var(--hue) / 0.08); --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--fill-accent) 35%, transparent); /* Motion. */ --dur-instant: 80ms; --dur-fast: 150ms; --dur-normal: 220ms; --dur-slow: 350ms; --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out-sine: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* Z-index ladder. */ --z-base: 1; --z-sticky: 100; --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000; color-scheme: light; accent-color: var(--fill-accent); scrollbar-color: var(--color-neutral-6) transparent; } /* Explicit dark theme. */ [data-theme="dark"] { --bg: var(--color-neutral-12); --bg-subtle: oklch(17% 0.022 var(--hue)); --bg-element: oklch(20% 0.022 var(--hue)); --bg-hover: oklch(24% 0.024 var(--hue)); --border: color-mix(in oklch, var(--color-neutral-8) 28%, transparent); --border-strong: var(--color-neutral-8); --text: var(--color-neutral-1); --text-muted: var(--color-neutral-6); --text-faint: var(--color-neutral-8); --text-link: var(--color-accent-5); --text-on-accent: var(--color-neutral-12); --fill-accent: var(--color-accent-7); --fill-accent-hover: var(--color-accent-6); --fill-accent-soft: color-mix(in oklch, var(--color-accent-7) 18%, transparent); --color-success-soft: color-mix(in oklch, var(--color-success) 18%, transparent); --color-warning-soft: color-mix(in oklch, var(--color-warning) 18%, transparent); --color-danger-soft: color-mix(in oklch, var(--color-danger) 18%, transparent); --color-info-soft: color-mix(in oklch, var(--color-info) 18%, transparent); --shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.45), 0 1px 1px 0 oklch(0% 0 0 / 0.35); --shadow-md: 0 4px 12px -2px oklch(0% 0 0 / 0.55), 0 2px 4px -1px oklch(0% 0 0 / 0.40); --shadow-lg: 0 16px 32px -8px oklch(0% 0 0 / 0.70), 0 4px 8px -2px oklch(0% 0 0 / 0.45); color-scheme: dark; scrollbar-color: var(--color-neutral-8) transparent; } /* System-preference fallback when no explicit theme is selected. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: var(--color-neutral-12); --bg-subtle: oklch(17% 0.022 var(--hue)); --bg-element: oklch(20% 0.022 var(--hue)); --bg-hover: oklch(24% 0.024 var(--hue)); --border: color-mix(in oklch, var(--color-neutral-8) 28%, transparent); --border-strong: var(--color-neutral-8); --text: var(--color-neutral-1); --text-muted: var(--color-neutral-6); --text-faint: var(--color-neutral-8); --text-link: var(--color-accent-5); --text-on-accent: var(--color-neutral-12); --fill-accent: var(--color-accent-7); --fill-accent-hover: var(--color-accent-6); --fill-accent-soft: color-mix(in oklch, var(--color-accent-7) 18%, transparent); --color-success-soft: color-mix(in oklch, var(--color-success) 18%, transparent); --color-warning-soft: color-mix(in oklch, var(--color-warning) 18%, transparent); --color-danger-soft: color-mix(in oklch, var(--color-danger) 18%, transparent); --color-info-soft: color-mix(in oklch, var(--color-info) 18%, transparent); --shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.45), 0 1px 1px 0 oklch(0% 0 0 / 0.35); --shadow-md: 0 4px 12px -2px oklch(0% 0 0 / 0.55), 0 2px 4px -1px oklch(0% 0 0 / 0.40); --shadow-lg: 0 16px 32px -8px oklch(0% 0 0 / 0.70), 0 4px 8px -2px oklch(0% 0 0 / 0.45); color-scheme: dark; scrollbar-color: var(--color-neutral-8) transparent; } }