/* ══════════════════════════════════════════════════════════════════════════ tokens.css — ЕДИНСТВЕННЫЙ файл под design/, где объявляются сырые значения цвета, размера, отступа и радиуса. Три уровня, зависимость течёт строго в одну сторону: компонент → семантика → примитив Ни один компонентный токен не смотрит на примитив напрямую, ни одна другая таблица стилей не содержит ни одного литерала. Это и есть механизм, который делает D-03 (перекалибровка navy под вектор логотипа) правкой двух строк, а не обходом семи страниц. Исполняется механически: tools/audit-tokens.py, проверки type / weight / spacing / radius / no-raw-color / contrast. ══════════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────────────── ТАБЛИЦА РЕМАППИНГА (01-PATTERNS.md §«Locked-token remapping») Каждое значение ниже встречается в утверждённом заказчиком варианте design/variants/gmrz-preview-modern.html и лежит вне зафиксированных множеств D-01/D-02. Таблица живёт здесь, а не в голове: без неё соответствие выводится заново на каждой странице и расходится. | Свойство | Значение варианта (строка) | → Зафиксировано | Заметность | |----------------|---------------------------------------------------|----------------------|------------| | font-size | clamp(34px,4.6vw,58px) h1 (L102) | 32px --text-display | КРУПНАЯ — на ревью | | font-size | clamp(28px,3vw,40px) h2 (L126) | 26px --text-heading | средняя — на ревью | | font-size | 17px body (L21) | 16px --text-body | малая | | font-size | 18px hero p (L105), 18px ncard h3 (L162), | 20px --text-lead | малая | | | 19px logo-name (L45), 19px cat h3 (L143) | | | | font-size | 15.5px nav (L50), 15px footer (L200) | 16px --text-body | малая | | font-size | 14.5px cat meta (L145) | 14px --text-label | малая | | font-size | 13.5px chip (L100), 13.5px copy (L207), | 14px --text-label | малая | | | 13px overline (L124), 13px time (L160), | | | | | 13px lang (L35) | | | | font-size | 11.5px logo-sub (L46), 11px ph::after (L158) | 12px --text-caption | малая | | font-weight | 800 (L45, L102, L111, L126) | 700 --weight-bold | незаметна | | font-weight | 500 (L50, L176) | 400 --weight-regular| малая | | border-radius | 14px (L54, L61, L73), 16px (L141) | 12px (radius sm) | незаметна | | border-radius | 24px (L168), 28px (L189) | 20px (radius lg) | малая | | border-radius | 99px (L34, L35, L50, L59, L101, L161) | pill (radius pill) | нет (переименование) | | spacing | 2, 3, 5, 6, 10, 14, 15, 18, 22 px | 4,4,4,8,8,16,16,16,24| незаметна | | spacing | 20px (container, cats gap, stats) | 16px / 24px по роли | малая | | spacing | 28px (hrow gap, cat padding, stats padding-top) | 32px --space-6 | малая | | spacing | 36px, 40px, 44px, 56px | 32px, 48px, 48px, 48px| малая | | spacing | 72 / 88 / 104 / 112px (герой + ритм секций) | 48px mobile / 64px desktop | СРЕДНЯЯ — на ревью | | высоты контролов| 40, 44, 46, 52, 180, 320px | компонентные токены | нет | | цвет | #6E82A3 копирайт на #0B2347 = 4.00:1, провал AA | #7C90B1 = 4.82:1 | незаметна | Три строки, помеченные «на ревью», выносятся заказчику планом 01-06 отдельным списком дельт — они не поглощаются молча. ────────────────────────────────────────────────────────────────────────── */ :root{ /* ══ УРОВЕНЬ 1 · ПРИМИТИВЫ — единственное место, где есть сырые значения ══ */ /* Нейтральные */ --white:#FFFFFF; --grey-050:#F4F6FA; --grey-600:#5A6572; --grey-900:#1A2233; /* Фирменный тёмно-синий. --navy-600 и --blue-600 — ровно те значения, что утвердило руководство (D-03). Перекалибровка под вектор логотипа — правка этих двух строк и ничего больше. ПЕРЕКАЛИБРОВКА ЗАКРЫТА БЕЗ ИЗМЕНЕНИЯ ЗНАЧЕНИЙ — план 03-12, 2026-09-04. Условие D-03 звучало как «после получения векторного логотипа», и оно не наступит: вектора от завода не будет (решение владельца 2026-09-03), а тот, что стоит на сайте, — наша обводка того же скана, который D-03 объявил ненадёжным эталоном цвета. Калибровать по нему значило бы обойти собственный запрет через посредника. Сверх того, эталона не существует и фактически: в фирменном каталоге знак ГМРЗ одноцветный и перекрашивается под каждый разворот — синий #2070F0 (с. 2), кислотно-жёлтый #C0C000 (с. 5), зелёный #60F000 (с. 12), мятный #50F090 (с. 16). «Точного цвета знака» у него нет. Механизм при этом жив: появится настоящий вектор — правка снова стоит две строки. Разбор целиком — в 03-12-SUMMARY.md. */ --navy-700:#0B2347; --navy-600:#12325E; --navy-500:#1A3E74; --navy-400:#7C90B1; /* копирайт подвала: 4.82:1 на --navy-700, AA пройден. Вариант давал здесь #6E82A3 = 4.00:1 — провал AA. */ --navy-300:#AFC0DC; --navy-200:#C0CFE6; --navy-100:#DCE6F5; --blue-600:#1D4E9E; --blue-300:#8FB4E8; --blue-050:#E8EFFA; --green-400:#5FD08A; --red-600:#B42318; /* Волосяные линии */ --hairline:rgba(18,50,94,.08); --hairline-on-brand:rgba(255,255,255,.14); /* Полупрозрачные накладки. Объявлены здесь по необходимости: проверка no-raw-color запрещает литерал цвета за пределами этого файла, а утверждённый вариант строит на них шапку, чипы, призрачную кнопку, фото-слот и сетку-наложение героя. */ --overlay-white-045:rgba(255,255,255,.045); --overlay-white-08:rgba(255,255,255,.08); --overlay-white-10:rgba(255,255,255,.1); --overlay-white-18:rgba(255,255,255,.18); --overlay-white-40:rgba(255,255,255,.4); --overlay-white-86:rgba(255,255,255,.86); --glow-accent-15:rgba(29,78,158,.15); --glow-accent-35:rgba(29,78,158,.35); --glow-accent-55:rgba(29,78,158,.55); /* Непрозрачная точка градиента-маски. Это НЕ цвет дизайна: в mask-image значение читается как альфа-канал. Живёт здесь только потому, что литерал цвета за пределами этого файла запрещён. */ --mask-opaque:#000000; /* Типографика — ровно шесть размеров и три начертания (D-01) */ --size-1:12px; --size-2:14px; --size-3:16px; --size-4:20px; --size-5:26px; --size-6:32px; --weight-regular:400; --weight-semibold:600; --weight-bold:700; /* Отступы — только кратные четырём (D-02) */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; /* Радиусы — ровно три (D-02) */ --radius-sm:12px; --radius-lg:20px; --radius-pill:999px; /* Тени — перенесены из утверждённого варианта без изменений (D-04) */ --shadow:0 8px 30px rgba(18,50,94,.1); --shadow-lg:0 20px 60px rgba(18,50,94,.16); /* Акцентное свечение кнопки и счётчика — подпись утверждённого облика. D-04 фиксирует неизменность --shadow/--shadow-lg; эти две тени тоже перенесены дословно, но названы отдельно, чтобы не размывать D-04. */ --shadow-accent:0 10px 24px rgba(29,78,158,.35); --shadow-badge:0 2px 6px rgba(29,78,158,.4); /* ══ УРОВЕНЬ 2 · СЕМАНТИКА — роли, ссылаются только на уровень 1 ══════════ */ --color-surface:var(--white); --color-surface-alt:var(--grey-050); --color-surface-blur:var(--overlay-white-86); --color-surface-brand:var(--navy-600); --color-surface-brand-deep:var(--navy-700); --color-surface-brand-soft:var(--navy-500); --color-surface-on-brand:var(--overlay-white-10); --color-surface-on-brand-hover:var(--overlay-white-18); --color-text:var(--grey-900); --color-text-muted:var(--grey-600); --color-text-on-brand:var(--white); --color-text-on-brand-muted:var(--navy-300); --color-text-on-brand-lead:var(--navy-200); --color-text-on-brand-link:var(--navy-100); --color-text-on-brand-faint:var(--navy-400); --color-text-on-photo:var(--overlay-white-40); /* Акцент несёт две роли, и обе с закрытым перечнем мест. Тот же текст — в дизайн-контракте, UI-SPEC §Color: расхождение здесь и там означает два контракта вместо одного. Механически исполняется проверкой `audit-tokens.py --check accent-usage`. Accent — сплошная заливка: основные CTA-кнопки, текстовые ссылки, активный пункт навигации, счётчик количества (корзина в шапке сайта и новые входящие в шапке админки), кольцо фокуса. Ни надзаголовки секций, ни рамки карточек, ни иконки в покое. Accent — свечение: мягкий акцентный оттенок допускается остановкой фонового градиента ровно в трёх местах — герой главной (.hero), слот карты на контактах (.map-slot), полоса призыва к действию (.cta-band__inner). Слой градиента перенесён из утверждённого варианта без изменений и является подписью облика, который заказчик утвердил. */ --color-accent:var(--blue-600); --color-accent-surface:var(--blue-050); --color-accent-on-brand:var(--blue-300); --color-accent-glow:var(--glow-accent-55); --color-accent-glow-soft:var(--glow-accent-35); --color-accent-glow-faint:var(--glow-accent-15); --color-success:var(--green-400); --color-danger:var(--red-600); --color-focus:var(--blue-600); --color-hairline:var(--hairline); --color-hairline-on-brand:var(--hairline-on-brand); --color-grid-on-brand:var(--overlay-white-045); --color-control-on-brand:var(--overlay-white-08); /* Роли текста поверх шкалы размеров */ --text-caption:var(--size-1); --text-label:var(--size-2); --text-body:var(--size-3); --text-lead:var(--size-4); --text-heading:var(--size-5); --text-display:var(--size-6); /* Раскладка */ --layout-container:1200px; --layout-gutter:var(--space-4); --layout-section-y:var(--space-7); /* Тач-цель. Высоты элементов управления (--tap-min, --button-height, --header-height, --icon-tile, --badge-min-w, --cat-tile-min-h, --map-slot-min-h) — сознательное исключение из шкалы отступов, а не её ослабление: это размеры, а не расстояния между блоками. Проверка spacing их не видит, потому что они не появляются в padding/margin/gap. Не расширять ради них множество D-02. */ --tap-min:44px; /* ══ УРОВЕНЬ 3 · КОМПОНЕНТЫ — ссылаются только на уровень 2 ══════════════ */ --card-padding:var(--space-6); /* Компонентные радиусы названы «radius сначала», а не «card-radius» / «button-radius»: проверка `radius` в tools/audit-tokens.py признаёт токеном только запись вида var(двойное-тире radius-…), и имя вне этого пространства дало бы токен, которым нельзя воспользоваться. Роль та же, изменён только порядок слов. */ --radius-card:var(--radius-lg); --card-shadow:var(--shadow); --button-height:52px; --radius-button:var(--radius-sm); --header-height:72px; --icon-tile:56px; --badge-min-w:20px; --cat-tile-min-h:180px; --map-slot-min-h:320px; } /* Медиазапросы ритма живут в :root, а не в компонентах: отступ секции и боковое поле контейнера меняются ОДНОЙ строкой на всём сайте. Именно это удерживает семь страниц от расхождения. */ @media (min-width:768px){ :root{ --layout-gutter:var(--space-5); } } @media (min-width:992px){ :root{ --layout-section-y:var(--space-8); } } /* ────────────────────────────────────────────────────────────────────────── Объявленные пары контраста. Формат задан планом 01-01 (§Decisions п.1) и читается проверкой `contrast` в tools/audit-tokens.py: она разворачивает токены до примитива и считает коэффициент по формуле яркости WCAG. Пороги: text 4.5:1, large-text / non-text / focus / border 3:1. Если этот блок исчезнет — проверка упадёт, а не пройдёт молча. @contrast-pairs text: --color-text on --color-surface text: --color-text on --color-surface-alt text: --color-text-muted on --color-surface text: --color-text-muted on --color-surface-alt text: --color-accent on --color-surface text: --color-accent on --color-accent-surface text: --color-text-on-brand on --color-surface-brand text: --color-text-on-brand on --color-surface-brand-deep text: --color-text-on-brand on --color-accent text: --color-text-on-brand-muted on --color-surface-brand-deep text: --color-text-on-brand-lead on --color-surface-brand text: --color-text-on-brand-link on --color-surface-brand-deep text: --color-text-on-brand-faint on --color-surface-brand-deep text: --color-accent-on-brand on --color-surface-brand text: --color-danger on --color-surface text: --color-surface-brand on --color-surface large-text: --color-text-on-brand on --color-surface-brand-soft non-text: --color-success on --color-surface-brand focus: --color-focus on --color-surface border: --color-accent on --color-surface-alt @end-contrast-pairs ────────────────────────────────────────────────────────────────────────── */