/* ================================================================ Design Tokens — single source of truth for colors, spacing, typography, motion. All values are OKLCH (perceptually uniform, so color-mix() produces predictable tints). Theme switching: one attribute change on swaps all tokens. No duplicated palettes. No hex in app CSS — refer to vars only. ================================================================ */ @layer tokens { :root { color-scheme: dark light; /* --- Primitives (не использовать напрямую в компонентах) --- */ --_hue-brand: 252; /* violet-blue brand */ --_hue-success: 155; /* green */ --_hue-warn: 65; /* amber */ --_hue-danger: 22; /* red */ --_hue-info: 230; /* blue */ --_chroma-bg: 0.015; --_chroma-fg: 0.02; --_chroma-accent: 0.15; /* --- Spacing scale (4-based, mobile-first) --- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ /* --- Radii --- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* --- Typography scale (fluid, clamp-based) --- */ --text-xs: clamp(0.72rem, 0.70rem + 0.1vw, 0.78rem); --text-sm: clamp(0.84rem, 0.82rem + 0.1vw, 0.92rem); --text-base: clamp(0.94rem, 0.90rem + 0.2vw, 1.02rem); --text-lg: clamp(1.10rem, 1.05rem + 0.3vw, 1.22rem); --text-xl: clamp(1.30rem, 1.22rem + 0.4vw, 1.45rem); --text-2xl: clamp(1.55rem, 1.45rem + 0.5vw, 1.75rem); --text-3xl: clamp(1.95rem, 1.80rem + 0.7vw, 2.25rem); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace; --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; /* --- Motion tokens — одноточечный spring easing --- */ /* `linear()` daterministic, lightweight spring curve. 2024+ browsers. 3 presets: quick (tap feedback), smooth (panel), soft (page transition) */ --ease-quick: linear( 0, 0.229 3.5%, 0.454 7%, 0.668 10.7%, 0.84 14.4%, 0.947 18.3%, 0.992 22.3%, 1.009 26.7%, 1.003 31.2%, 0.992 37.3%, 0.997 43.7%, 1 ); --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1); --ease-soft: cubic-bezier(0.6, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-page: 450ms; /* --- Shadow scale (layered for depth) --- */ --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.08), 0 1px 1px oklch(0% 0 0 / 0.04); --shadow-md: 0 4px 8px oklch(0% 0 0 / 0.08), 0 2px 3px oklch(0% 0 0 / 0.06); --shadow-lg: 0 12px 24px oklch(0% 0 0 / 0.12), 0 4px 8px oklch(0% 0 0 / 0.06); --shadow-xl: 0 24px 48px oklch(0% 0 0 / 0.18), 0 8px 16px oklch(0% 0 0 / 0.08); --shadow-focus: 0 0 0 3px oklch(var(--_hue-brand) var(--_chroma-accent) 0.55 / 0.35); /* --- z-index scale --- */ --z-base: 1; --z-sticky: 50; --z-overlay: 500; --z-modal: 1000; --z-toast: 1500; --z-tooltip: 2000; } /* -------- DARK THEME (default) -------- */ :root, [data-theme="dark"] { --bg-1: oklch(14.5% var(--_chroma-bg) 265); /* app background */ --bg-2: oklch(18.5% var(--_chroma-bg) 265); /* panels */ --bg-3: oklch(22.5% var(--_chroma-bg) 265); /* elevated cards */ --bg-4: oklch(27% var(--_chroma-bg) 265); /* hover states */ --text-1: oklch(97% 0.005 265); /* primary text */ --text-2: oklch(80% 0.01 265); /* secondary */ --text-3: oklch(62% 0.015 265); /* muted */ --text-inverse: oklch(14% var(--_chroma-bg) 265); --border-1: oklch(28% var(--_chroma-fg) 265 / 0.7); --border-2: oklch(35% var(--_chroma-fg) 265 / 0.5); --accent: oklch(65% var(--_chroma-accent) var(--_hue-brand)); --accent-hover: oklch(72% var(--_chroma-accent) var(--_hue-brand)); --accent-pressed: oklch(58% var(--_chroma-accent) var(--_hue-brand)); --accent-bg: oklch(28% 0.08 var(--_hue-brand) / 0.2); --accent-fg: oklch(96% 0.01 var(--_hue-brand)); --success: oklch(68% 0.16 var(--_hue-success)); --success-bg: oklch(28% 0.08 var(--_hue-success) / 0.2); --warn: oklch(75% 0.17 var(--_hue-warn)); --warn-bg: oklch(32% 0.08 var(--_hue-warn) / 0.22); --danger: oklch(65% 0.19 var(--_hue-danger)); --danger-bg: oklch(30% 0.09 var(--_hue-danger) / 0.22); --info: oklch(70% 0.14 var(--_hue-info)); --info-bg: oklch(30% 0.07 var(--_hue-info) / 0.22); } /* -------- LIGHT THEME -------- */ [data-theme="light"] { --bg-1: oklch(99% 0.003 265); --bg-2: oklch(96% 0.005 265); --bg-3: oklch(92% 0.008 265); --bg-4: oklch(88% 0.01 265); --text-1: oklch(20% var(--_chroma-bg) 265); --text-2: oklch(40% 0.01 265); --text-3: oklch(55% 0.015 265); --text-inverse: oklch(99% 0.003 265); --border-1: oklch(85% var(--_chroma-fg) 265 / 0.9); --border-2: oklch(78% var(--_chroma-fg) 265 / 0.6); --accent: oklch(52% var(--_chroma-accent) var(--_hue-brand)); --accent-hover: oklch(45% var(--_chroma-accent) var(--_hue-brand)); --accent-pressed: oklch(42% var(--_chroma-accent) var(--_hue-brand)); --accent-bg: oklch(94% 0.04 var(--_hue-brand)); --accent-fg: oklch(35% 0.14 var(--_hue-brand)); --success: oklch(52% 0.15 var(--_hue-success)); --success-bg: oklch(94% 0.05 var(--_hue-success)); --warn: oklch(60% 0.17 var(--_hue-warn)); --warn-bg: oklch(95% 0.07 var(--_hue-warn)); --danger: oklch(52% 0.18 var(--_hue-danger)); --danger-bg: oklch(95% 0.05 var(--_hue-danger)); --info: oklch(55% 0.14 var(--_hue-info)); --info-bg: oklch(94% 0.05 var(--_hue-info)); } /* Auto mode: respect OS preference if no explicit [data-theme] */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg-1: oklch(99% 0.003 265); --bg-2: oklch(96% 0.005 265); --bg-3: oklch(92% 0.008 265); --bg-4: oklch(88% 0.01 265); --text-1: oklch(20% var(--_chroma-bg) 265); --text-2: oklch(40% 0.01 265); --text-3: oklch(55% 0.015 265); --text-inverse: oklch(99% 0.003 265); --border-1: oklch(85% var(--_chroma-fg) 265 / 0.9); --border-2: oklch(78% var(--_chroma-fg) 265 / 0.6); --accent: oklch(52% var(--_chroma-accent) var(--_hue-brand)); --accent-hover: oklch(45% var(--_chroma-accent) var(--_hue-brand)); --accent-pressed: oklch(42% var(--_chroma-accent) var(--_hue-brand)); --accent-bg: oklch(94% 0.04 var(--_hue-brand)); --accent-fg: oklch(35% 0.14 var(--_hue-brand)); --success: oklch(52% 0.15 var(--_hue-success)); --success-bg: oklch(94% 0.05 var(--_hue-success)); --warn: oklch(60% 0.17 var(--_hue-warn)); --warn-bg: oklch(95% 0.07 var(--_hue-warn)); --danger: oklch(52% 0.18 var(--_hue-danger)); --danger-bg: oklch(95% 0.05 var(--_hue-danger)); --info: oklch(55% 0.14 var(--_hue-info)); --info-bg: oklch(94% 0.05 var(--_hue-info)); } } /* Reduce motion — shorten durations, keep layout changes */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-page: 1ms; } } }