/* ========================================================================== эТОИР — Design Tokens · v0.2 Направление: Industrial Swiss (см. docs/DESIGN_SYSTEM.md) Единственный источник правды. Подключать ПЕРЕД landing.css. v0.2 — ревизия. Ключевое: · accent ушёл с #F59E0B (= Tailwind amber-500) на охристый сигнальный #C27C12 · neutral ушёл с сине-серого на серо-зелёный графит (родословная RAL 7035/7016) · primary задавлен по насыщенности: #1D5D9B → #1F5075 · semantic получил *-ink: старые чипы давали ~3.3:1 и проваливали AA · motion: убран экспоненциальный хвост, reveal — вытирание, а не сдвиг ========================================================================== */ :root { /* ---------- Neutral: графит с зеленцой ---------- Сине-серый — температура «тёмной темы для разработчиков». Реальная промышленная краска и станина уходят в зелень: RAL 7035, RAL 7016. Сдвиг едва заметен поштучно и решающе заметен полосой. */ --n-0: #FFFFFF; --n-25: #FAFBFA; --n-50: #F3F5F3; --n-100: #E6EAE7; --n-200: #D2D8D3; --n-300: #B2BAB4; --n-400: #858D87; --n-500: #5E665F; --n-600: #454C47; --n-700: #333934; --n-800: #222724; --n-900: #171B18; --n-950: #0D100E; /* ---------- Primary: сталь, а не веб ---------- #1D5D9B (v0.1) всё ещё звенел «интерфейсным синим». Насыщенность снята, светлота убрана — цвет краски на щите управления, не цвет ссылки. */ --p-50: #EDF1F5; --p-100: #D6E0E9; --p-200: #AEC2D3; --p-300: #7C9AB4; --p-400: #4C7295; --p-500: #1F5075; /* база бренда */ --p-600: #17405F; --p-700: #123249; --p-800: #0D2536; --p-900: #091A26; /* ---------- Accent: сигнальный оранжевый ---------- Яркий предупредительный оранж, RAL 2004 / 2009. Кричит громче охры и кирпича — держать в узде: 1–2 пятна на экран. Светлее прежних баз, поэтому foreground на белом уходит из AA: акцентом красим ПЛАШКУ (кнопка = тёмный текст), а не буквы на светлом. */ --a-50: #FFF2E6; --a-100: #FCDABB; --a-300: #FDA95F; --a-400: #FE8A2A; /* doc-кнопка, тёмный текст */ --a-500: #FD7500; /* база = CTA, тёмный текст ≈7:1 (белый — 2.7, провал) */ --a-500-rgb: 253, 117, 0; /* для rgba() подсветок */ --a-600: #E56600; /* hover CTA, тёмный текст ≈5.7:1 */ --a-700: #B85200; /* ---------- Semantic: сигнальные цвета ---------- Родословная ГОСТ 12.4.026 / RAL 6032·1003·3001 — язык площадки. Три роли на цвет, и это не педантизм: --x сигнал (точка, полоса, заливка) — работает только как пятно --x-bg подложка чипа --x-ink ТЕКСТ на подложке — потому что сигнал на своём же -bg даёт ~3:1 и проваливает AA. Ровно этот баг был в v0.1. */ --ok: #1F7A4C; --ok-bg: #E8F2EC; --ok-ink: #145635; --warn: #E0A400; --warn-bg: #F7EDD3; --warn-ink: #7A5600; --stop: #A82418; --stop-bg: #F5E5E3; --stop-ink: #8A1E14; --info: var(--p-500); --info-bg: var(--p-50); --info-ink: var(--p-700); /* ---------- Роли ---------- Компоненты обращаются СЮДА, а не к ступеням. Иначе [data-zone] мёртв. */ --bg: var(--n-0); --bg-sunken: var(--n-50); --surface: var(--n-0); --surface-alt: var(--n-25); --text: var(--n-900); --text-muted: var(--n-500); --text-faint: var(--n-400); --border: var(--n-200); --border-strong: var(--n-300); --border-faint: var(--n-100); --focus: var(--p-500); /* ---------- Типографика ---------- Golos Text (Paratype) — кириллица здесь родная, а не досыпанный субсет. Для продукта, который никогда не выйдет за пределы русского рынка, это инженерное решение, а не патриотическое: рисунок Ж, Д, Щ, ять-подобных хвостов сделан первым, а не подогнан под латинский скелет. Плюс — вес 900, которого у IBM Plex Sans просто нет (потолок 700). Mono остаётся IBM Plex Mono: показания прибора. ⚠ Субсеты не проверены инструментально. Стек падает на Plex Sans. */ --font-sans: 'Golos Text', 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'JetBrains Mono', monospace; /* Шкала. Кириллица ~на 15% длиннее латиницы → дисплей сдержаннее обычного. Но масса добрана весом (900) и трекингом, а не кеглем: у AI-систем дисплей выходит лёгким именно потому, что кегль растят, а вес — нет. */ --t-display: clamp(2.75rem, 1.30rem + 5.2vw, 4.75rem); /* 44 → 76 */ --t-h1: clamp(2rem, 1.30rem + 2.5vw, 3.25rem); /* 32 → 52 */ --t-h2: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem); /* 24 → 36 */ --t-h3: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem); /* 19 → 23 */ --t-lead: 1.1875rem; /* 19 */ --t-body: 1.0625rem; /* 17 */ --t-sm: 0.9375rem; /* 15 */ --t-xs: 0.8125rem; /* 13 */ --t-label: 0.6875rem; /* 11 — mono, uppercase, разряжен */ --lh-display: 0.96; /* плотнее 1 — строки сцепляются в блок, это масса */ --lh-tight: 1.06; --lh-snug: 1.22; --lh-body: 1.6; --lh-flat: 1.4; --tr-display: -0.035em; /* было -0.025: рыхлый дисплей читается как слабый */ --tr-head: -0.02em; --tr-body: 0; --tr-label: 0.12em; /* mono-метки разряжены сильнее: это шкала прибора */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* новое. Дисплей живёт здесь. */ /* ---------- Ритм: база 4px, вертикаль кратна 8 ---------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 12rem; /* Отбивка секций — одна на весь сайт. Локальный padding = баг. */ --section-y: clamp(3rem, 1.5rem + 4vw, 6rem); /* 48 → 96 */ --stack-lg: var(--s-7); --stack-md: var(--s-5); --stack-sm: var(--s-3); /* ---------- Сетка ---------- Лист с полем. Левое поле — не пустота, а рабочая зона: там живут номера разделов и mono-аннотации, как на поле чертежа. Симметричный контейнер по центру — самый громкий признак сгенерированной страницы. */ --grid-max: 1240px; --rail: 104px; /* поле листа. <1100px схлопывается. */ --grid-narrow: 68ch; /* проза. ch, а не px: длина строки — это знаки. */ --grid-cols: 12; --gutter: var(--s-5); --gutter-sm: var(--s-4); /* ---------- Радиусы: инструмент, а не игрушка ---------- */ --r-xs: 2px; --r-sm: 3px; --r-md: 4px; /* дефолт. v0.1 держал 6 — всё ещё мягко. */ --r-lg: 6px; --r-pill: 999px; /* НЕ ИСПОЛЬЗУЕТСЯ. Оставлен как явный запрет: пилюля — стартап-тик. Статус на заводе прямоугольный. */ /* ---------- Тени: почти нет ---------- Иерархия строится линией и фоном. Тень — только у того, что физически «над» полосой. */ --sh-none: none; --sh-hair: 0 0 0 1px var(--border); --sh-raise: 0 1px 0 rgba(13, 16, 14, 0.04), 0 2px 6px rgba(13, 16, 14, 0.05); --sh-pop: 0 6px 20px rgba(13, 16, 14, 0.11), 0 1px 3px rgba(13, 16, 14, 0.07); --sh-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--p-500); /* двойное кольцо: читается и на светлом, и на цветном, и на инверсной полосе */ /* ---------- Motion: механизм ---------- v0.1 держал cubic-bezier(0.22,1,0.36,1) — экспоненциальный выброс с длинным хвостом. Это и есть «плавное желе»: движение долго крадётся к финишу. Привод так не работает — он доезжает и встаёт. */ --e-out: cubic-bezier(0.2, 0, 0, 1); /* доезжает и встаёт */ --e-inout: cubic-bezier(0.65, 0, 0.35, 1); --e-step: steps(6, end); /* дискретность: счётчик, шкала */ --d-fast: 90ms; /* было 120 */ --d-base: 160ms; /* было 200 */ --d-slow: 260ms; /* было 320. Потолок. */ --reveal-x: 6%; /* вытирание. Сдвиг по Y убран — см. DESIGN_SYSTEM §6 */ } /* Инверсная зона — не тема, а полоса. Роли переопределяются, компоненты нет. */ [data-zone="inverse"] { --bg: var(--n-950); --bg-sunken: var(--n-900); --surface: var(--n-900); --surface-alt: var(--n-800); --text: var(--n-25); --text-muted: var(--n-300); --text-faint: var(--n-400); --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.22); --border-faint: rgba(255, 255, 255, 0.07); --sh-focus: 0 0 0 2px var(--n-950), 0 0 0 4px var(--a-400); } @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --reveal-x: 0%; } }