/* ============================================================= TOKENS Единый источник правды по дизайн-переменным. Все токены в одном :root — это словарь проекта, дробить его на части смысла нет. ============================================================= */ :root { /* ========================================================= ПАЛИТРА / АХРОМАТИКА ========================================================= */ --gray-0: hsl(0 0% 100%); --gray-50: hsl(0 0% 96%); --gray-100: hsl(0 0% 92%); --gray-200: hsl(0 0% 85%); --gray-500: hsl(0 0% 43%); --gray-900: hsl(0 0% 11%); /* ========================================================= ПАЛИТРА / ОТТЕНКИ ========================================================= */ --hue-neutral: 0; --hue-red: 340; --hue-orange: 25; --hue-yellow: 45; --hue-green: 145; --hue-blue: 210; --hue-purple: 270; --hue-teal: 185; --neutral-100: hsl(var(--hue-neutral) 0% 94%); --neutral-300: hsl(var(--hue-neutral) 0% 88%); --neutral-500: hsl(var(--hue-neutral) 0% 46%); --neutral-700: hsl(var(--hue-neutral) 0% 33%); --neutral-900: hsl(var(--hue-neutral) 0% 23%); --red-100: hsl(var(--hue-red) 75% 94%); --red-300: hsl(var(--hue-red) 75% 88%); --red-500: hsl(var(--hue-red) 75% 48%); --red-700: hsl(var(--hue-red) 75% 35%); --red-900: hsl(var(--hue-red) 75% 25%); --orange-100: hsl(var(--hue-orange) 85% 94%); --orange-300: hsl(var(--hue-orange) 85% 88%); --orange-500: hsl(var(--hue-orange) 85% 48%); --orange-700: hsl(var(--hue-orange) 85% 35%); --orange-900: hsl(var(--hue-orange) 85% 25%); --yellow-100: hsl(var(--hue-yellow) 85% 92%); --yellow-300: hsl(var(--hue-yellow) 85% 85%); --yellow-500: hsl(var(--hue-yellow) 85% 48%); --yellow-700: hsl(var(--hue-yellow) 85% 35%); --yellow-900: hsl(var(--hue-yellow) 85% 25%); --green-100: hsl(var(--hue-green) 70% 94%); --green-300: hsl(var(--hue-green) 70% 88%); --green-500: hsl(var(--hue-green) 70% 42%); --green-700: hsl(var(--hue-green) 70% 30%); --green-900: hsl(var(--hue-green) 70% 22%); --blue-100: hsl(var(--hue-blue) 75% 94%); --blue-300: hsl(var(--hue-blue) 75% 88%); --blue-500: hsl(var(--hue-blue) 75% 46%); --blue-700: hsl(var(--hue-blue) 75% 33%); --blue-900: hsl(var(--hue-blue) 75% 23%); --purple-100: hsl(var(--hue-purple) 70% 94%); --purple-300: hsl(var(--hue-purple) 70% 88%); --purple-500: hsl(var(--hue-purple) 70% 48%); --purple-700: hsl(var(--hue-purple) 70% 35%); --purple-900: hsl(var(--hue-purple) 70% 25%); --teal-100: hsl(var(--hue-teal) 65% 94%); --teal-300: hsl(var(--hue-teal) 65% 88%); --teal-500: hsl(var(--hue-teal) 65% 42%); --teal-700: hsl(var(--hue-teal) 65% 30%); --teal-900: hsl(var(--hue-teal) 65% 22%); --brand: #cd1c31; /* ========================================================= ТИПОГРАФИКА Размеры — модульная шкала с коэффициентом ~1.25. Каждый шаг предсказуемо больше предыдущего. Именование: - fs-xs / fs-sm — мелкий текст (meta, подписи) - fs-body — основной текст - fs-md / fs-lg — акценты - fs-xl … fs-4xl — заголовки ========================================================= */ /* Семейства */ --font-primary: system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Размеры — статичные значения */ --fs-xs: .75rem; /* 12px */ --fs-sm: .875rem; /* 14px */ --fs-body: .9375rem; /* 15px — основной текст */ --fs-md: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 1.875rem; /* 30px */ --fs-4xl: 2.375rem; /* 38px */ /* Fluid-размеры — плавно меняются от минимального до максимального в зависимости от ширины viewport. Формула: clamp(min, base + factor·vw, max) - на 375px берёт min - на 1280px+ берёт max - между — плавная интерполяция Без медиа-запросов. */ --fs-fluid-h1: clamp(1.75rem, 1.25rem + 2vw, 2.375rem); /* 28 → 38 */ --fs-fluid-h2: clamp(1.375rem, 1.15rem + 1vw, 1.625rem); /* 22 → 26 */ --fs-fluid-h3: clamp(1.125rem, 1rem + .75vw, 1.25rem); /* 18 → 20 */ /* Вес */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Интерлиньяж — зависит от размера текста: чем крупнее шрифт, тем плотнее строки. */ --lh-tight: 1.2; /* заголовки */ --lh-snug: 1.35; /* крупный текст */ --lh-normal: 1.5; /* основной */ --lh-relaxed: 1.6; /* мелкий */ /* Буквенное расстояние */ --ls-tight: -.01em; --ls-normal: 0; --ls-wide: .02em; /* ========================================================= SPACING — шкала 4px Каждое значение кратно 4px. Использовать только эти. Если хочется 22px — это ошибка, берём 20 или 24. Единицы — rem: масштабируются, если пользователь увеличит базовый размер шрифта в браузере (a11y). ========================================================= */ --space-0: 0; --space-1: .25rem; /* 4px */ --space-2: .5rem; /* 8px */ --space-3: .75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* Fluid-отступы для крупных секций (от 32px на мобилке до 64px на десктопе — плавно) */ --space-section: clamp(2rem, 1rem + 4vw, 4rem); --space-section-lg: clamp(2.5rem, 1.5rem + 5vw, 5rem); /* ========================================================= ИКОНКИ Три размера, каждый с чёткой ролью. Все svg.icon в проекте используют один из них. ========================================================= */ --icon-sm: 16px; --icon-md: 24px; --icon-lg: 48px; /* ========================================================= RADII Четыре реальных значения. Каждое визуально отличается от соседнего минимум в 1.5 раза. Правило: используй sm/md/lg/full в новом коде. Старые имена (xs, xl, 2xl, 3xl) оставлены как алиасы — чтобы не переписывать 30 файлов. Постепенно уйдут. ========================================================= */ --radius-sm: .25rem; /* 4px — мелкие элементы */ --radius-md: .5rem; /* 8px — базовое */ --radius-lg: 1rem; /* 16px — крупное */ --radius-full: 9999px; /* пилюли, аватары */ /* Алиасы для совместимости со старым кодом */ --radius-none: 0; --radius-xs: var(--radius-sm); --radius-xl: var(--radius-md); --radius-2xl: var(--radius-lg); --radius-3xl: var(--radius-lg); /* ========================================================= Z-INDEX ========================================================= */ --z-below: -1; --z-base: 0; --z-raised: 1; --z-dropdown: 9; --z-sticky: 10; --z-overlay: 100; --z-modal: 1000; --z-popover: 1100; --z-toast: 1200; --z-loader: 9999; /* ========================================================= MOTION ========================================================= */ --duration-instant: 0ms; --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; --ease-default: cubic-bezier(.2, .9, .4, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --ease-linear: linear; /* ========================================================= СЕМАНТИКА / ФОНЫ ========================================================= */ --bg-page: var(--gray-50); --bg-surface: var(--gray-0); --bg-surface-alt: var(--gray-50); --bg-elevated: var(--gray-0); --bg-accent: var(--brand); /* ========================================================= СЕМАНТИКА / ТЕКСТ ========================================================= */ --text-primary: var(--gray-900); --text-secondary: var(--gray-500); --text-tertiary: var(--gray-200); --text-disabled: var(--gray-100); /* ========================================================= СЕМАНТИКА / ГРАНИЦЫ ========================================================= */ --border-default: var(--gray-100); --border-light: var(--gray-50); --border-strong: var(--gray-200); /* ========================================================= СТАТУСЫ ========================================================= */ --status-success: var(--green-500); --status-success-bg: var(--green-100); --status-success-fg: var(--green-900); --status-danger: var(--red-500); --status-danger-bg: var(--red-100); --status-danger-fg: var(--red-900); --status-warning: var(--orange-500); --status-warning-bg: var(--orange-100); --status-warning-fg: var(--orange-900); --status-attention: var(--yellow-500); --status-attention-bg: var(--yellow-100); --status-attention-fg: var(--yellow-900); --status-info: var(--blue-500); --status-info-bg: var(--blue-100); --status-info-fg: var(--blue-900); --status-premium: var(--purple-500); --status-premium-bg: var(--purple-100); --status-premium-fg: var(--purple-900); --status-promo: var(--teal-500); --status-promo-bg: var(--teal-100); --status-promo-fg: var(--teal-900); --status-neutral: var(--neutral-500); --status-neutral-bg: var(--neutral-100); --status-neutral-fg: var(--neutral-900); /* ========================================================= ТЕНИ Три уровня — мелкая, средняя, крупная. Каждый различим на глаз, в отличие от старых 6 уровней (где разница между 1 и 2 была невидима). Правило: используй sm/md/lg в новом коде. Старые имена (--shadow-1..6) оставлены как алиасы. ========================================================= */ --shadow-color: 0 0 0; /* Три реальных уровня */ --shadow-sm: 0 1px 2px rgba(var(--shadow-color) / .04), 0 -0.5px 0 rgba(var(--shadow-color) / .02); --shadow-md: 0 4px 8px -2px rgba(var(--shadow-color) / .06), 0 -0.5px 0 rgba(var(--shadow-color) / .02); --shadow-lg: 0 16px 24px -6px rgba(var(--shadow-color) / .10), 0 -1px 0 rgba(var(--shadow-color) / .02); /* Инсет-тени для активного состояния полей */ --shadow-inset: inset 0 1px 2px rgba(var(--shadow-color) / .04); --shadow-inset-active: inset 0 1px 3px rgba(var(--shadow-color) / .10); /* Семантические алиасы — то, что используется в компонентах */ --shadow-surface: var(--shadow-md); --shadow-surface-hover: var(--shadow-lg); --shadow-surface-active: var(--shadow-sm); --shadow-control: var(--shadow-sm); --shadow-control-hover: var(--shadow-md); --shadow-control-active: var(--shadow-inset); --shadow-menu: var(--shadow-md); --shadow-tooltip: var(--shadow-sm); --shadow-dialog: var(--shadow-lg); --shadow-drawer: var(--shadow-lg); --shadow-overlay: var(--shadow-md); --shadow-floating: var(--shadow-md); /* Алиасы для совместимости со старым кодом */ --shadow-1: var(--shadow-sm); --shadow-2: var(--shadow-sm); --shadow-3: var(--shadow-md); --shadow-4: var(--shadow-md); --shadow-5: var(--shadow-lg); --shadow-6: var(--shadow-lg); --shadow-depth-0: none; --shadow-depth-1: var(--shadow-sm); --shadow-depth-2: var(--shadow-sm); --shadow-depth-3: var(--shadow-md); --shadow-depth-4: var(--shadow-md); --shadow-depth-5: var(--shadow-lg); --shadow-depth-6: var(--shadow-lg); /* ========================================================= АЛИАСЫ СТАРЫХ ИМЁН Для совместимости со старыми common.css / admin.css / site.css. Удалим после полной миграции. ========================================================= */ --gray-lightest: var(--gray-0); --gray-light: var(--gray-50); --gray: var(--gray-100); --gray-dark: var(--gray-200); --gray-darker: var(--gray-500); --gray-darkest: var(--gray-900); --ui-neutral-lightest: var(--neutral-100); --ui-neutral-light: var(--neutral-300); --ui-neutral: var(--neutral-500); --ui-neutral-dark: var(--neutral-700); --ui-neutral-darker: var(--neutral-900); --ui-red-lightest: var(--red-100); --ui-red-light: var(--red-300); --ui-red: var(--red-500); --ui-red-dark: var(--red-700); --ui-red-darker: var(--red-900); --ui-orange-lightest: var(--orange-100); --ui-orange-light: var(--orange-300); --ui-orange: var(--orange-500); --ui-orange-dark: var(--orange-700); --ui-orange-darker: var(--orange-900); --ui-yellow-lightest: var(--yellow-100); --ui-yellow-light: var(--yellow-300); --ui-yellow: var(--yellow-500); --ui-yellow-dark: var(--yellow-700); --ui-yellow-darker: var(--yellow-900); --ui-green-lightest: var(--green-100); --ui-green-light: var(--green-300); --ui-green: var(--green-500); --ui-green-dark: var(--green-700); --ui-green-darker: var(--green-900); --ui-blue-lightest: var(--blue-100); --ui-blue-light: var(--blue-300); --ui-blue: var(--blue-500); --ui-blue-dark: var(--blue-700); --ui-blue-darker: var(--blue-900); --ui-purple-lightest: var(--purple-100); --ui-purple-light: var(--purple-300); --ui-purple: var(--purple-500); --ui-purple-dark: var(--purple-700); --ui-purple-darker: var(--purple-900); --ui-teal-lightest: var(--teal-100); --ui-teal-light: var(--teal-300); --ui-teal: var(--teal-500); --ui-teal-dark: var(--teal-700); --ui-teal-darker: var(--teal-900); --shadow-depth-0: none; --shadow-depth-1: var(--shadow-1); --shadow-depth-2: var(--shadow-2); --shadow-depth-3: var(--shadow-3); --shadow-depth-4: var(--shadow-4); --shadow-depth-5: var(--shadow-5); --shadow-depth-6: var(--shadow-6); /* ============================================================= BREAKPOINTS (справка, не переменные) @media не принимает var(). Это документация канона. 480px — Большой телефон 768px — Планшет портрет (основной разлом) 1024px — Планшет ландшафт, ноутбук 1280px — Десктоп (max-width контента) ПРАВИЛО: max-width = min-width - 1. ============================================================= */ } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } }