/* ============================================================================ tokens.css — единый источник дизайн-токенов dostavkadv.ru Спринт S1. Основание: docs/ТЗ_дизайн_система_ЕТЛ.md §1.2, §2. Инвентаризация каскада: docs/reports/CSS_CASCADE_INVENTORY.md ПРАВИЛА ФАЙЛА 1. Подключается ПЕРВЫМ во всех HTML корня, до любого другого stylesheet. 2. Здесь объявляются ТОЛЬКО пользовательские свойства. Ни одного обычного CSS-свойства, ни одного селектора кроме :root / [data-theme]. 3. Это единственный новый CSS-файл, который разрешено создать (ТЗ §1). Файлы *_fix.css / *_polish.css / *_override.css больше не создаются. СОСТОЯНИЕ S1: ни один токен ниже не имеет потребителей на публичных страницах, кроме --sec-y (объявлен текущим значением 72px). Поэтому подключение файла не меняет внешний вид ни на пиксель. ============================================================================ */ :root { /* Current public site scale, shared by service and editorial pages. */ --ui-font-display: "Bowler", Impact, sans-serif; --ui-display-line: 1.12; --ui-display-tracking: .005em; --ui-space-section: clamp(56px, 6vw, 104px); --ui-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ui-container: 100%; --ui-page-gutter: clamp(24px, 2.2vw, 48px); --icon-size: 44px; --icon-glyph: 20px; --icon-radius: 16px; --icon-paper: linear-gradient(180deg, #fff, #f1f5fa); --icon-line: rgba(12,19,30,.10); --icon-ink: #242a32; --icon-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px rgba(10,18,30,.06); --ui-radius: var(--r-sm, 8px); --ui-gap: 24px; --ui-section-gap: 56px; --ui-transition: background-color .16s ease-out,border-color .16s ease-out; --ui-ink: #202429; --ui-muted: #62676e; --ui-line: rgba(32,36,41,.14); --ui-page: #fff; /* continuous page canvas */ --ui-paper: #fff; /* cards and raised surfaces */ --ui-soft: #f5f6f7; --ui-hover: #edf0f3; --ui-pressed: #e1e6eb; --ui-hover-line: #929ca8; /* ── Цвет: роли, а не названия ─────────────────────────────────────────── РЕШЕНИЕ 19.08.2026: канонический фирменный красный — #E52629. Было два кандидата. #E61E29 — пипетка с assets/img/etl-logo.png (доминанта 142 977 px). #E52629 — то, что фактически живёт в каскаде, 307 вхождений. Разница между ними ΔE2000 = 0.78, то есть НИЖЕ порога различимости глазом (≈1.0): это один и тот же красный. Выбран #E52629, и вот почему. Если токен равен фактическому цвету, то замена 307 хардкодов на var(--c-accent) — чистый рефакторинг с нулевым изменением вида, и это проверяется прогоном tools/css_baseline.cjs (ожидаем ноль расхождений). Если бы токен остался #E61E29, та же замена сдвинула бы цвет на 307 местах — незаметно глазу, но недоказуемо инструментом, и любая будущая сверка тонула бы в шуме. Контраст #E52629 с белым текстом = 4.52 при норме 4.5 — WCAG AA проходит. Замерено на живой кнопке «Отправить заявку», не в теории. (В docs/ГОТОВНОСТЬ_К_ДЕПЛОЮ.md стояло 4.06 — это ошибка, исправлена.) #E61E29 остаётся цветом самого логотипа: он внутри PNG, в UI не нужен. */ --c-accent: #E52629; /* Наведение — #BE1522, тень/обводка того же логотипа. Проверено: это ровно шаг «светлота −8%» от #E52629 в OKLCH (ΔE2000 9.1 против 8.7 у расчётного), контраст с белым 6.33. Своё значение выдумывать незачем, когда у логотипа уже есть подходящее. */ --c-accent-hover: #BE1522; --c-accent-weak: rgba(229, 38, 41, 0.10); --c-brand: var(--c-accent); /* только логотип, не для UI */ /* ── Тёмная тема: поверхности ─────────────────────────────────────────── */ --s-0: #0A0B0C; /* фон страницы */ --s-1: #121416; /* карточка */ --s-2: #191C1F; /* вложенный элемент, input */ --s-3: #22262A; /* hover, разделитель-плашка */ /* ── Тёмная тема: линии и текст ───────────────────────────────────────── */ --line-1: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.14); --t-1: #F2F4F5; /* заголовки */ --t-2: #A8B0B6; /* основной текст */ --t-3: #6E767C; /* подписи, disabled */ /* ── Радиусы: пять значений, больше нет (ТЗ §6) ──────────────────────── --r-md объявлен в S3 вместе с заменой всех хардкодов. До этого имя использовалось в style_release.css четырежды без объявления, из-за чего правила отбрасывались (см. CSS_CASCADE_INVENTORY.md §9). */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; /* ETL_R_XL_0907: крупная карточка. В коде жили и 18, и 20, и 24 px — три соседних значения для одной и той же роли. Одно имя вместо трёх. */ --r-xl: 20px; --r-pill: 999px; /* ── Отступы: шкала, кратная 4 ────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px; --sp-40: 160px; /* ── Ритм секций ────────────────────────────────────────────────────── ВНИМАНИЕ: --sec-y уже объявлен в style_release.css (:3347, :5584) со значением 72px и используется 12 раз. Здесь продублировано ТЕКУЩЕЕ значение, чтобы S1 не менял вид. Целевые 128px — спринт S4, одновременно с удалением объявлений из style_release.css. */ --sec-y: 72px; /* S4 → 128px */ --sec-y-lg: 160px; --sec-y-m: 72px; /* Целевой контейнер — 1280px. Фактический сегодня — 980px (94 вхождения). Переход выполняется в S4, потребителей у токена пока нет. */ --container: 1280px; --gutter: 24px; /* 16px на мобильном, см. медиазапрос внизу */ /* ── Глубина ────────────────────────────────────────────────────────── В тёмной теме глубина создаётся линиями и разницей фонов, НЕ чёрными тенями. --e-2 только для оверлеев: дропдаун, модалка, поповер. */ --e-1: 0 0 0 1px var(--line-1); --e-2: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.35); /* ── Типографика ────────────────────────────────────────────────────── РАСХОЖДЕНИЕ С ТЗ §3: ТЗ исходит из Roboto как основного текстового шрифта, фактически сайт набран Inter (Google Fonts, index.html:74). Здесь зафиксирован ФАКТИЧЕСКИЙ стек, чтобы S1 ничего не менял. Решение Roboto vs Inter и подключение заголовочного Golos Text — спринт S4, после подтверждения владельцем. */ --f-display: "Bowler", Impact, sans-serif; /* ТЗ §3: логотип, крупные цифры, номера этапов, эйбрау ≤3 слов */ --f-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --f-head: var(--f-text); /* S4 → 'Golos Text', локально из assets/fonts/ */ /* Модульная шкала 1.25 */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 25px; --fs-2xl: 31px; --fs-3xl: 39px; --fs-4xl: 49px; --fs-5xl: 61px; --lh-tight: 1.10; /* заголовки */ --lh-snug: 1.35; /* подзаголовки */ --lh-base: 1.60; /* текст */ /* ── Движение ───────────────────────────────────────────────────────── --ease НАМЕРЕННО не объявлен в S1: имя уже используется 32 раза в style_release.css без объявления. Оживление сменит кривую у 32 переходов. Объявляется в S4. Подробности — CSS_CASCADE_INVENTORY.md §9. Целевое значение: cubic-bezier(0.32, 0.72, 0, 1) */ /* ETL_S4_0830. Объявлено. До этого var(--ease) стоял в 41 переходе, а самого токена не было — значение невалидно, браузер брал свою ease. Объявление разом чинит всю эту анимацию. */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 700ms; } /* ── Светлая тема ───────────────────────────────────────────────────────── Селектор соответствует существующему переключателю темы проекта. */ [data-theme="light"] { --s-0: #FFFFFF; --s-1: #F7F8F9; --s-2: #EFF1F3; --s-3: #E4E7EA; --line-1: rgba(16, 24, 32, 0.08); --line-2: rgba(16, 24, 32, 0.14); --t-1: #101820; --t-2: #4A545C; /* ETL_CONTRAST_FINAL_0903: было #8A939A — 3.12 на белом. Это значение для ТЁМНОЙ темы, оно попало сюда по ошибке; светлой нужен базовый #6E767C (4.62). */ --t-3: #6E767C; --c-muted: #6E767C; /* ETL_CONTRAST_FINAL_0903: токен нигде не был объявлен */ --e-1: 0 0 0 1px var(--line-1); --e-2: 0 1px 2px rgba(16, 24, 32, 0.04), 0 12px 32px -12px rgba(16, 24, 32, 0.16); } @media (max-width: 767px) { :root { --sec-y: var(--sec-y-m); --gutter: 16px; } } /* ETL_CONTRAST_0903 — цвет КРАСНОГО ТЕКСТА, отдельно от заливки. На тёмном фоне #e52629 даёт 3.97…4.43 при норме 4.5 — заливке хватает, мелкому тексту 11–13 px нет. Требования к тексту и к заливке разные, поэтому и ролей две. --c-accent не трогаем: кнопки, полосы и маркеры остаются фирменного цвета. */ /* ETL_CONTRAST_FINAL_0903: в светлой теме роль текста темнее заливки. #E52629 давал 4.53 на белом и 4.26 на #F7F8F9 — впритык и ниже. #D81F22: 5.07 и 4.77. Заливка (--c-accent) не меняется. */ :root { --c-accent-text: #d81f22; } /* ETL_CONTRAST_FINAL_0903: у тёмной темы не было СВОИХ значений токенов — она брала базовые, рассчитанные под светлый фон. Отсюда подписи 4.26 в кабинете и 4.14 в расписании. */ html[data-theme="dark"] { --c-accent-text: #ff4b4e; --t-3: #8A939A; /* 6.30 на почти-чёрном; в светлой 3.12 */ --c-muted: #8A939A; } [data-theme="dark"] { --s-0: #050505; --s-1: #101010; --s-2: #161616; --s-3: #202020; --icon-paper: linear-gradient(180deg, #242424, #181818); --icon-line: rgba(242,242,242,.16); --icon-ink: #e8e8e8; --icon-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.14); --ui-ink: #f2f2f2; --ui-muted: #b5b5b5; --ui-line: rgba(242,242,242,.18); --ui-page: var(--s-0); --ui-paper: var(--s-1); --ui-soft: var(--s-2); --ui-hover: var(--s-3); --ui-pressed: #292929; --ui-hover-line: #777; } @media (max-width: 600px) { :root { --ui-gap: 20px; --ui-section-gap: 40px; } } @media (prefers-reduced-motion: reduce) { :root { --ui-transition: none; } }