:root { /* ========================================================== OKLCH RAW PALETTE ========================================================== */ --lch-black: 0% 0 0; --lch-white: 100% 0 0; --lch-ink-darkest: 26% 0.05 264; --lch-ink-darker: 40% 0.026 262; --lch-ink-dark: 56% 0.014 260; --lch-ink-medium: 66% 0.008 258; --lch-ink-light: 84% 0.005 256; --lch-ink-lighter: 92% 0.003 254; --lch-ink-lightest: 96% 0.002 252; --lch-canvas: var(--lch-white); --lch-ink-inverted: var(--lch-white); --lch-red-darkest: 26% 0.105 34; --lch-red-darker: 40% 0.154 36; --lch-red-dark: 59% 0.19 38; --lch-red-medium: 66% 0.204 40; --lch-red-light: 84.08% 0.0837 41.96; --lch-red-lighter: 92% 0.03 44; --lch-red-lightest: 96% 0.013 46; --lch-yellow-darkest: 26% 0.0729 40; --lch-yellow-darker: 40% 0.12 50; --lch-yellow-dark: 58% 0.156 60; --lch-yellow-medium: 74% 0.184 70; --lch-yellow-light: 84% 0.12 80; --lch-yellow-lighter: 92% 0.076 90; --lch-yellow-lightest: 96% 0.034 100; --lch-lime-darkest: 26% 0.064 109; --lch-lime-darker: 40% 0.101 110; --lch-lime-dark: 56.5% 0.142 111; --lch-lime-medium: 68% 0.176 113.11; --lch-lime-light: 83.92% 0.0927 113.6; --lch-lime-lighter: 92% 0.046 114; --lch-lime-lightest: 96% 0.034 115; --lch-green-darkest: 26% 0.071 149; --lch-green-darker: 40% 0.12 148; --lch-green-dark: 55% 0.162 147; --lch-green-medium: 66% 0.208 146; --lch-green-light: 83.92% 0.0772 145.06; --lch-green-lighter: 92% 0.044 144; --lch-green-lightest: 96% 0.022 143; --lch-aqua-darkest: 26% 0.059 214; --lch-aqua-darker: 40% 0.093 212; --lch-aqua-dark: 55.5% 0.122 210; --lch-aqua-medium: 66% 0.152 208; --lch-aqua-light: 83.88% 0.0555 206.02; --lch-aqua-lighter: 92% 0.02 204; --lch-aqua-lightest: 96% 0.012 202; --lch-blue-darkest: 26% 0.126 264; --lch-blue-darker: 40% 0.166 262; --lch-blue-dark: 57.02% 0.1895 260.46; --lch-blue-medium: 66% 0.196 257.82; --lch-blue-light: 84.04% 0.0719 255.29; --lch-blue-lighter: 92% 0.026 254; --lch-blue-lightest: 96% 0.016 252; --lch-violet-darkest: 26% 0.148 292; --lch-violet-darker: 40% 0.2 290; --lch-violet-dark: 58% 0.216 287.6; --lch-violet-medium: 66% 0.206 285.52; --lch-violet-light: 84.08% 0.0791 283.47; --lch-violet-lighter: 92% 0.03 282; --lch-violet-lightest: 96% 0.015 280; --lch-purple-darkest: 26% 0.131 314; --lch-purple-darker: 40% 0.178 312; --lch-purple-dark: 58% 0.21 310; --lch-purple-medium: 66% 0.258 308; --lch-purple-light: 84.09% 0.0778 305.77; --lch-purple-lighter: 92% 0.03 304; --lch-purple-lightest: 96% 0.019 302; --lch-pink-darkest: 26% 0.12 348; --lch-pink-darker: 40% 0.16 346; --lch-pink-dark: 59% 0.188 344; --lch-pink-medium: 71.8% 0.2008 342; --lch-pink-light: 84.04% 0.0737 340; --lch-pink-lighter: 92% 0.03 338; --lch-pink-lightest: 96% 0.02 336; --color-black: oklch(var(--lch-black)); --color-white: oklch(var(--lch-white)); --color-ink: oklch(var(--lch-ink-darkest)); --color-ink-darkest: oklch(var(--lch-ink-darkest)); --color-ink-darker: oklch(var(--lch-ink-darker)); --color-ink-dark: oklch(var(--lch-ink-dark)); --color-ink-medium: oklch(var(--lch-ink-medium)); --color-ink-light: oklch(var(--lch-ink-light)); --color-ink-lighter: oklch(var(--lch-ink-lighter)); --color-ink-lightest: oklch(var(--lch-ink-lightest)); --color-ink-inverted: oklch(var(--lch-ink-inverted)); --color-canvas: oklch(var(--lch-canvas)); --color-negative: oklch(var(--lch-red-dark)); --color-positive: oklch(var(--lch-green-dark)); --color-link: oklch(var(--lch-blue-dark)); --color-selected: oklch(var(--lch-blue-lighter)); --color-selected-dark: oklch(var(--lch-blue-light)); --color-highlight: oklch(var(--lch-yellow-lighter)); --color-marker: oklch(var(--lch-red-medium)); --color-brand-tint: oklch(var(--lch-blue-lightest)); --color-brand-dim: oklch(var(--lch-blue-lighter)); --color-brand-light: oklch(var(--lch-blue-dark)); --color-brand-mid: oklch(var(--lch-blue-dark)); --color-brand-base: oklch(var(--lch-blue-dark)); --color-brand: oklch(var(--lch-blue-dark)); --color-brand-hover: oklch(var(--lch-blue-darker)); --color-brand-glow: oklch(var(--lch-blue-dark) / 15%); --color-neutral-0: oklch(var(--lch-white)); --color-neutral-50: oklch(var(--lch-ink-lightest)); --color-neutral-100: oklch(var(--lch-ink-lightest)); --color-neutral-200: oklch(var(--lch-ink-lighter)); --color-neutral-300: oklch(var(--lch-ink-light)); --color-neutral-400: oklch(var(--lch-ink-medium)); --color-neutral-500: oklch(var(--lch-ink-dark)); --color-neutral-600: oklch(var(--lch-ink-dark)); --color-neutral-700: oklch(var(--lch-ink-darker)); --color-neutral-800: oklch(var(--lch-ink-darkest)); --color-neutral-900: oklch(var(--lch-ink-darkest)); --color-success-light: oklch(var(--lch-green-lightest)); --color-success-base: oklch(var(--lch-green-medium)); --color-success-dark: oklch(var(--lch-green-dark)); --color-warning-light: oklch(var(--lch-yellow-lightest)); --color-warning-base: oklch(var(--lch-yellow-medium)); --color-warning-dark: oklch(var(--lch-yellow-dark)); --color-danger-light: oklch(var(--lch-red-lightest)); --color-danger-base: oklch(var(--lch-red-medium)); --color-danger-dark: oklch(var(--lch-red-dark)); --color-info-light: oklch(var(--lch-aqua-lightest)); --color-info-base: oklch(var(--lch-aqua-medium)); --color-info-dark: oklch(var(--lch-aqua-dark)); --color-bg: oklch(var(--lch-ink-lightest)); --color-surface: oklch(var(--lch-white)); --color-surface-2: oklch(var(--lch-ink-lightest)); --color-border: oklch(var(--lch-ink-lighter)); --color-border-focus: oklch(var(--lch-blue-dark)); --color-text: oklch(var(--lch-ink-darkest)); --color-text-muted: oklch(var(--lch-ink-dark)); --color-text-subtle: oklch(var(--lch-ink-medium)); --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: ui-serif, serif; --font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace; --text-xx-small: 0.55rem; --text-x-small: 0.75rem; --text-small: 0.85rem; --text-normal: 1rem; --text-medium: 1.1rem; --text-large: 1.5rem; --text-x-large: 1.8rem; --text-xx-large: 2.5rem; --text-xs: var(--text-x-small); --text-sm: var(--text-small); --text-base: var(--text-normal); --text-lg: var(--text-medium); --text-xl: 1.25rem; --text-2xl: var(--text-large); --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --leading-tight: 1.2; --leading-normal: 1.375; --leading-relaxed: 1.7; --inline-space: 1ch; --inline-space-half: calc(var(--inline-space) / 2); --inline-space-double: calc(var(--inline-space) * 2); --block-space: 1rem; --block-space-half: calc(var(--block-space) / 2); --block-space-double: calc(var(--block-space) * 2); --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; --border: 1px solid oklch(var(--lch-ink-lighter)); --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 99rem; --shadow: 0 0 0 1px oklch(var(--lch-black) / 5%), 0 0.2em 0.2em oklch(var(--lch-black) / 5%), 0 0.4em 0.4em oklch(var(--lch-black) / 5%), 0 0.8em 0.8em oklch(var(--lch-black) / 5%); --shadow-sm: 0 0 0 1px oklch(var(--lch-black) / 4%), 0 0.1em 0.2em oklch(var(--lch-black) / 4%); --shadow-md: var(--shadow); --shadow-lg: 0 0 0 1px oklch(var(--lch-black) / 6%), 0 0.4em 0.4em oklch(var(--lch-black) / 6%), 0 0.8em 0.8em oklch(var(--lch-black) / 6%), 0 1.6em 1.6em oklch(var(--lch-black) / 6%); --shadow-brand: 0 0 0 3px oklch(var(--lch-blue-dark) / 15%); --focus-ring-color: oklch(var(--lch-blue-dark)); --focus-ring-offset: 1px; --focus-ring-size: 2px; --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color); --transition-fast: 80ms ease; --transition-base: 100ms ease-out; --transition-slow: 250ms ease; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1); --ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1); --btn-size: 2.65em; --main-width: 1400px; --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3)); --container-max: 1360px; --container-pad-x: clamp(1rem, 3vw, 2rem); --header-height: 60px; --nav-width: 220px; --footer-height: 2.65rem; --z-below: -1; --z-base: 0; --z-raised: 10; --z-popup: 10; --z-nav: 30; --z-flash: 40; --z-tooltip: 50; --z-dropdown: 200; --z-sticky: 300; --z-modal: 400; --z-toast: 600; @media (prefers-color-scheme: dark) { --lch-canvas: 20% 0.0195 232.58; --lch-ink-inverted: var(--lch-black); --lch-ink-darkest: 96.02% 0.0034 260; --lch-ink-darker: 86% 0.0061 260; --lch-ink-dark: 73.97% 0.009 260; --lch-ink-medium: 62% 0.0122 260; --lch-ink-light: 40% 0.0148 260; --lch-ink-lighter: 30% 0.0178 260; --lch-ink-lightest: 25% 0.0204 260; --lch-blue-dark: 74% 0.1293 256; --lch-blue-darker: 62% 0.159 258; --lch-red-dark: 73.95% 0.139 42; --lch-red-medium: 62% 0.154 40; --lch-green-dark: 73.99% 0.117 145; --lch-green-medium: 62% 0.1261 146; --lch-yellow-dark: 74.06% 0.136 80; --lch-yellow-medium: 62.1% 0.146 70; --lch-aqua-dark: 73.92% 0.095 206; --lch-aqua-medium: 62% 0.106 208; --color-canvas: oklch(var(--lch-canvas)); --color-bg: oklch(var(--lch-canvas)); --color-surface: oklch(26% 0.018 235); --color-surface-2: oklch(22% 0.016 235); --color-ink-inverted: oklch(var(--lch-ink-inverted)); --shadow: 0 0 0 1px oklch(var(--lch-black) / 42%), 0 0.2em 1.6em -0.8em oklch(var(--lch-black) / 60%), 0 0.4em 2.4em -1em oklch(var(--lch-black) / 70%), 0 0.8em 1.2em -1.6em oklch(var(--lch-black) / 90%); --shadow-sm: var(--shadow); --shadow-md: var(--shadow); --shadow-lg: var(--shadow); --color-highlight: oklch(var(--lch-blue-lighter)); } }