/* ============================================================ ОРИОН — ЕДИНАЯ ДИЗАЙН-СИСТЕМА ЭКОСИСТЕМЫ · tokens.css «Складская табличка» — индустриальная утилитарность. Канон: этот файл. Копии на сайтах синхронизировать с ним. Источники: Gazel_Next/DESIGN.md (утв. 10.07.2026, палитра единого стиля с r15c.ru) + memory/r15c-target-client.md. Архитектура: 3 слоя (primitive → semantic → component), методология ui-ux-pro-max/design-system. ============================================================ */ /* ---------------------------------------------------------------- СЛОЙ 1 · PRIMITIVE — сырые значения. Меняются редко. ---------------------------------------------------------------- */ :root { /* Синие (фирменная ось) */ --ds-blue-600: #00669D; /* орион-синий */ --ds-blue-700: #024A72; /* тёмно-синий, полосы шапки */ --ds-blue-800: #16314A; /* глубокий нави, футер */ --ds-blue-050: #EFF4FB; /* светло-синяя заливка ховеров/выбора */ --ds-blue-100: #EDF3FB; /* фон выбранного чипа */ /* Сигнальные */ --ds-orange-500: #F5821F; /* сигнальный оранжевый — акценты (линии/бейджи) */ --ds-orange-600: #D96E0C; /* его ховер */ --ds-orange-700: #B85907; /* затемнённый CTA — заливка кнопки покупки (белый текст, контраст ≥4.5:1) */ --ds-orange-800: #A8500A; /* его ховер */ --ds-green-600: #1F7A44; /* складской зелёный */ --ds-green-050: #E9F5EC; /* подложка зелёного */ --ds-amber-600: #B26A00; /* янтарный «мало/под заказ» */ --ds-amber-050: #FBF3E2; /* подложка янтарного */ /* Нейтральные (склад: чернила/сталь/бетон) */ --ds-ink-900: #1C2733; /* чернила — основной текст */ --ds-steel-600: #66727E; /* сталь — вторичный текст */ --ds-faint-500: #8B95A1; /* дымка — плейсхолдеры, третьестепенное */ --ds-paper: #FFFFFF; /* бумага — карточки */ --ds-concrete-100: #F1F3F6; /* бетон — фон страницы */ --ds-line-200: #DFE4E9; /* линии/границы */ --ds-line-300: #B7C2CF; /* граница ховера строки */ --ds-plate-100: #E9EDF2; /* фон шильдика/чипов */ --ds-plate-300: #C2CBD6; /* кромка шильдика */ --ds-plate-grad-a: #EFF2F6; /* металл шильдика: верх градиента */ --ds-plate-grad-b: #E2E7ED; /* металл шильдика: низ градиента */ --ds-mono-bg: #EEF1F5; /* плашка артикула */ /* Типографика: семейства */ --ds-font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif; --ds-font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --ds-font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace; /* Типографика: размеры (базис 16px) */ --ds-fs-display: 1.875rem; /* 30px, H1; мобайл 24px */ --ds-fs-display-m: 1.5rem; /* 24px */ --ds-fs-headline: 1.3125rem;/* 21px, H2 */ --ds-fs-price: 2.125rem; /* 34px, цена/громкая цифра */ --ds-fs-body: 0.9375rem; /* 15px */ --ds-fs-body-lg: 1.0625rem; /* 17px, лид-абзац */ --ds-fs-label: 0.78125rem; /* 12.5px, капс-метки */ --ds-fs-mono: 0.78125rem; /* 12.5px, артикулы */ /* Отступы (base 4) */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 14px; --ds-space-4: 18px; --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-7: 48px; --ds-space-8: 64px; /* Радиусы — сдержанные, «складские» */ --ds-radius-sm: 4px; --ds-radius-md: 6px; /* Тени — тихие (правило тихой тени) */ --ds-shadow-card: 0 1px 3px rgba(20,24,29,.07), 0 4px 14px rgba(20,24,29,.05); --ds-shadow-plate: inset 0 1px 0 #fff, inset 0 -1px 0 #CDD5DE, 0 1px 3px rgba(20,24,29,.07), 0 4px 14px rgba(20,24,29,.05); /* Брейкпоинты (справочно; в media-запросах — литералы): mobile ≤ 640 · tablet 641–1023 · desktop ≥ 1024 · wide ≥ 1280 */ --ds-container: 1200px; --ds-touch-min: 44px; /* минимальная тач-зона */ } /* ---------------------------------------------------------------- СЛОЙ 2 · SEMANTIC — назначение. Точка темизации. ⚠ Правило сигнальной разметки: оранжевый = ТОЛЬКО покупка/действие, зелёный = ТОЛЬКО наличие/подтверждённый факт, синий = фирменный/навигация. ---------------------------------------------------------------- */ :root { --color-bg: var(--ds-concrete-100); --color-surface: var(--ds-paper); --color-text: var(--ds-ink-900); --color-text-secondary: var(--ds-steel-600); --color-text-faint: var(--ds-faint-500); --color-border: var(--ds-line-200); --color-border-hover: var(--ds-line-300); --color-primary: var(--ds-blue-600); --color-primary-strong: var(--ds-blue-700); --color-primary-deep: var(--ds-blue-800); --color-primary-tint: var(--ds-blue-050); --color-action: var(--ds-orange-500); /* сигнальный оранжевый: акценты действия (линии/бейджи) — больше нигде */ --color-action-hover: var(--ds-orange-600); --color-action-strong: var(--ds-orange-700); /* заливка кнопки покупки — под белый текст, контраст ≥4.5:1 */ --color-action-strong-hover: var(--ds-orange-800); --color-action-contrast: var(--ds-paper); --color-stock: var(--ds-green-600); /* наличие/факт — больше нигде */ --color-stock-bg: var(--ds-green-050); --color-low: var(--ds-amber-600); /* «мало/под заказ» */ --color-low-bg: var(--ds-amber-050); --color-plate: var(--ds-plate-100); --color-plate-edge: var(--ds-plate-300); --font-display: var(--ds-font-display); --font-body: var(--ds-font-body); --font-mono: var(--ds-font-mono); --spacing-section: var(--ds-space-7); /* между секциями страницы */ --spacing-card: var(--ds-space-4); /* внутренний паддинг карточек */ } /* ---------------------------------------------------------------- СЛОЙ 3 · COMPONENT — токены компонентов. ---------------------------------------------------------------- */ :root { /* Кнопки */ --button-height: 44px; --button-height-lg: 50px; --button-radius: var(--ds-radius-md); --button-px: 20px; --button-font: 600 0.90625rem/1 var(--font-body); /* Inter 600 14.5px */ --button-buy-bg: var(--color-action-strong); /* затемнён под белый текст (AA), см. 2026-07-19 unified-button-colors */ --button-buy-bg-hover: var(--color-action-strong-hover); --button-buy-text: var(--color-action-contrast); --button-ghost-border: var(--color-primary); --button-ghost-text: var(--color-primary); --button-ghost-bg-hover: var(--color-primary-tint); --button-quiet-text: var(--color-text-secondary); --button-quiet-border: var(--color-border); /* Карточка */ --card-bg: var(--color-surface); --card-radius: var(--ds-radius-md); --card-border: 1px solid var(--color-border); --card-shadow: var(--ds-shadow-card); --card-padding: var(--spacing-card); /* Чип */ --chip-bg: var(--color-plate); --chip-text: #33404F; --chip-radius: var(--ds-radius-sm); --chip-padding: 4px 8px; /* Плашка артикула */ --part-bg: var(--ds-mono-bg); --part-font: 500 var(--ds-fs-mono)/1.3 var(--font-mono); /* Шильдик (сигнатурный компонент) */ --plate-gradient: linear-gradient(180deg, var(--ds-plate-grad-a), var(--ds-plate-grad-b)); --plate-edge: 1px solid var(--ds-plate-300); --plate-shadow: var(--ds-shadow-plate); /* Поля форм */ --input-height: 44px; --input-border: 1.5px solid var(--color-border); --input-radius: var(--ds-radius-md); --input-placeholder: var(--color-text-faint); /* Фокус (глобально) */ --focus-ring: 2px solid var(--color-primary); --focus-offset: 2px; /* Шапка/футер */ --header-band-bg: var(--color-primary-strong); /* тёмная полоса статусов */ --footer-bg: var(--color-primary-deep); --footer-accent: 3px solid var(--color-action); /* оранжевая линия сверху футера */ }