/* ============================================================ DESIGN TOKENS — single source of truth Naming: {foundation}.{property}.{modifier} → --token-name This page teaches tokens by being built with them. Open DevTools and inspect: everything maps here. ============================================================ */ @property --hue { syntax: ''; inherits: true; initial-value: 265; } :root { color-scheme: light dark; /* ---------- primitive palette (OKLCH ramps) ---------- */ --hue: 265; /* brand hue — live-editable from the color lab */ --hue-accent: 165; /* neutral ramp */ --neutral-0: oklch(99% 0.004 var(--hue)); --neutral-100: oklch(96.5% 0.006 var(--hue)); --neutral-200: oklch(92% 0.008 var(--hue)); --neutral-300: oklch(85% 0.010 var(--hue)); --neutral-400: oklch(72% 0.012 var(--hue)); --neutral-500: oklch(58% 0.014 var(--hue)); --neutral-600: oklch(46% 0.016 var(--hue)); --neutral-700: oklch(36% 0.018 var(--hue)); --neutral-800: oklch(26% 0.020 var(--hue)); --neutral-900: oklch(19% 0.022 var(--hue)); --neutral-1000: oklch(14% 0.020 var(--hue)); --neutral-1100: oklch(10.5% 0.016 var(--hue)); /* brand ramp */ --brand-300: oklch(80% 0.10 var(--hue)); --brand-400: oklch(72% 0.14 var(--hue)); --brand-500: oklch(62% 0.19 var(--hue)); --brand-600: oklch(54% 0.21 var(--hue)); --brand-700: oklch(46% 0.19 var(--hue)); /* accent ramp */ --accent-400: oklch(78% 0.13 var(--hue-accent)); --accent-500: oklch(70% 0.15 var(--hue-accent)); --accent-600: oklch(58% 0.14 var(--hue-accent)); /* semantic hues */ --success-500: oklch(64% 0.16 152); --warning-500: oklch(78% 0.15 80); --danger-500: oklch(60% 0.20 25); --info-500: oklch(64% 0.15 240); /* ---------- semantic: color.* ---------- */ --color-text: light-dark(var(--neutral-900), var(--neutral-100)); --color-text-subtle: light-dark(var(--neutral-600), var(--neutral-400)); --color-text-subtlest: light-dark(var(--neutral-500), var(--neutral-500)); --color-text-inverse: light-dark(var(--neutral-0), var(--neutral-1000)); --color-text-brand: light-dark(var(--brand-600), var(--brand-400)); --color-text-accent: light-dark(var(--accent-600), var(--accent-400)); --color-link: var(--color-text-brand); --color-background-brand-bold: var(--brand-500); --color-background-brand-subtle: light-dark( oklch(95% 0.03 var(--hue)), oklch(24% 0.06 var(--hue))); --color-background-neutral: light-dark( oklch(0% 0 0 / 0.055), oklch(100% 0 0 / 0.08)); --color-background-neutral-hovered: light-dark( oklch(0% 0 0 / 0.09), oklch(100% 0 0 / 0.12)); --color-border: light-dark( oklch(0% 0 0 / 0.12), oklch(100% 0 0 / 0.14)); --color-border-bold: light-dark(var(--neutral-400), var(--neutral-600)); --color-border-focused: light-dark(var(--brand-500), var(--brand-400)); --color-border-selected: var(--color-border-focused); --color-icon-success: var(--success-500); --color-icon-warning: var(--warning-500); --color-icon-danger: var(--danger-500); /* ---------- semantic: elevation.* ---------- */ --elevation-surface: light-dark(var(--neutral-0), var(--neutral-1100)); --elevation-surface-sunken: light-dark(var(--neutral-100), oklch(8.5% 0.014 var(--hue))); --elevation-surface-raised: light-dark(var(--neutral-0), var(--neutral-1000)); --elevation-surface-overlay: light-dark(var(--neutral-0), var(--neutral-900)); --elevation-shadow-raised: 0 1px 1px oklch(0% 0 0 / 0.11), 0 2px 6px oklch(0% 0 0 / 0.09); --elevation-shadow-overlay: 0 4px 10px oklch(0% 0 0 / 0.12), 0 12px 32px oklch(0% 0 0 / 0.16); /* ---------- space.* — 8px base unit ---------- */ --space-025: 0.125rem; /* 2px */ --space-050: 0.25rem; /* 4px */ --space-075: 0.375rem; /* 6px */ --space-100: 0.5rem; /* 8px — base */ --space-150: 0.75rem; /* 12px */ --space-200: 1rem; /* 16px */ --space-250: 1.25rem; /* 20px */ --space-300: 1.5rem; /* 24px */ --space-400: 2rem; /* 32px */ --space-500: 2.5rem; /* 40px */ --space-600: 3rem; /* 48px */ --space-800: 4rem; /* 64px */ --space-1000: 5rem; /* 80px */ /* ---------- font.* — minor third (1.2) scale, rem-based ---------- */ --font-family-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-family-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, 'SFMono-Regular', Consolas, monospace; --font-family-display: var(--font-family-sans); --font-heading-xxlarge: 800 clamp(2.4rem, 1.4rem + 4.5vw, 4.5rem) / 1.05 var(--font-family-display); --font-heading-xlarge: 700 1.75rem / 2rem var(--font-family-display); --font-heading-large: 700 1.5rem / 1.75rem var(--font-family-display); --font-heading-medium: 700 1.25rem / 1.5rem var(--font-family-display); --font-heading-small: 700 1rem / 1.25rem var(--font-family-display); --font-heading-xsmall: 700 0.875rem / 1.25rem var(--font-family-display); --font-body-large: 400 1.0625rem / 1.65 var(--font-family-sans); --font-body: 400 0.9375rem / 1.55 var(--font-family-sans); --font-body-small: 400 0.8125rem / 1.35 var(--font-family-sans); --font-code: 400 0.8125rem / 1.6 var(--font-family-mono); --font-metric: 800 2.25rem / 1.1 var(--font-family-display); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ---------- radius.* ---------- */ --radius-xsmall: 2px; --radius-small: 4px; --radius-medium: 6px; --radius-large: 8px; --radius-xlarge: 12px; --radius-xxlarge: 16px; --radius-full: 999px; /* ---------- border.* ---------- */ --border-width: 1px; --border-width-selected: 2px; --border-width-focused: 2px; /* ---------- motion.* ---------- */ --motion-duration-instant: 0ms; --motion-duration-xxshort: 50ms; --motion-duration-xshort: 100ms; --motion-duration-short: 150ms; --motion-duration-medium: 200ms; --motion-duration-long: 250ms; --motion-duration-xlong: 400ms; --motion-duration-xxlong: 600ms; --motion-easing-out-practical: cubic-bezier(0.4, 1, 0.6, 1); --motion-easing-out-bold: cubic-bezier(0.2, 1.2, 0.3, 1); --motion-easing-in-practical: cubic-bezier(0.5, 0, 0.9, 0.6); --motion-easing-inout-bold: cubic-bezier(0.7, 0, 0.15, 1); /* ---------- opacity.* ---------- */ --opacity-disabled: 0.4; --opacity-loading: 0.6; /* ---------- layout ---------- */ --layout-fixed-wide: 1296px; --layout-fixed-narrow: 864px; --layout-gutter: clamp(12px, 1.2vw, 16px); --layout-margin: clamp(16px, 3vw, 32px); } /* explicit theme override (toggle stamps data-theme on ) */ :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --motion-duration-short: 0ms; --motion-duration-medium: 0ms; --motion-duration-long: 0ms; --motion-duration-xlong: 0ms; --motion-duration-xxlong: 0ms; } }