/* ========================================================================== Sermstat — токены дизайн-системы. Единственный источник значений. Подключать ПЕРВЫМ, до sermstat.css: ТРИ СЛОЯ (primitive → semantic → component). Зачем: до этого токены были плоскими — --c был одновременно и сырым синим, и смыслом «фирменный акцент». Именно поэтому слияние трёх систем оказалось болезненным: поменять смысл, не трогая значение, было негде, а --r успел означать и красный, и радиус. Кто какой слой трогает: примитивы — почти никогда, это палитра; семантика — здесь переключается бренд; в WordPress ИМЕННО ЭТОТ СЛОЙ отдаётся в поля ACF и опции темы; компоненты — точечная настройка одного узла, не задевая остальные. ⚠️ Все значения цвета — замеренные, не подобранные на глаз. Текстовые токены проходят WCAG AA на ВСЕХ ПЯТИ поверхностях системы (см. DESIGN.md). ========================================================================== */ :root { /* ====================================================================== СЛОЙ 1. ПРИМИТИВЫ — сырые значения без назначения ====================================================================== */ /* — синий, фирменный — */ --blue-050: #E7EEFE; --blue-500: #1B63F2; /* база бренда */ --blue-600: #1657D8; /* текстом на --blue-050, где сам 500 даёт 4.39 */ --blue-800: #0D3F9E; /* — чернильные, для текста — */ --navy-900: #0D1B42; --navy-700: #374162; --slate-600: #425868; --slate-500: #676885; --slate-300: #9AAAC8; /* ⛔ только линии и рамки, тексту не назначать: 2.34:1 */ /* — бумага, поверхности — */ --paper-000: #FFFFFF; --paper-050: #F4F7FE; --paper-100: #EDF2FC; --paper-200: #E3EBFA; --paper-300: #DDE4F5; --paper-350: #E1E8F5; /* — сигнальные, парами «заливка / чернила» — */ --green-500: #0CB97A; --green-700: #087D52; /* ⚠️ #0CB97A под белым текстом даёт 2.55:1 — провал AA прямо на главной кнопке призыва живого сайта. Заливкой-индикатором цвет остаётся, но у кнопки своя, замеренная ступень: белый на #087D52 = 5.17:1. */ --green-btn: #087D52; --amber-500: #F5A623; --amber-700: #956515; --red-500: #E53935; --red-700: #CE332F; --steel-500: #5B8DB8; /* — тональность: домен продукта — */ --tone-pos-500: #6AA84E; --tone-pos-700: #3D6B2F; --tone-neg-500: #D94F3D; --tone-neg-700: #9E2E1E; --tone-neu-500: #7BA7C9; --tone-neu-700: #3A5D77; --tone-irr-500: #B7B7B7; --tone-irr-700: #6D6D6D; /* «Собственный» в продукте ЖЁЛТЫЙ — замерено пипеткой с живого графика (#FCD82A). Токен объявлял его синим, из-за чего свой ресурс сливался с фирменным акцентом, а пятицветная шкала выглядела четырёхцветной. */ --gold-500: #FCD82A; --gold-700: #6C5900; /* — прозрачности синего — */ --blue-a08: rgba(27, 99, 242, .08); --blue-a18: rgba(27, 99, 242, .18); /* — шаг сетки 4px — */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-18: 72px; /* — радиусы — */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 20px; --radius-pill: 999px; /* — тени: смещение плюс мягкое размытие, не цветной ореол — */ --shadow-1: 0 1px 2px rgba(13, 27, 66, .05), 0 2px 8px rgba(13, 27, 66, .04); --shadow-2: 0 4px 12px rgba(13, 27, 66, .06), 0 16px 40px rgba(13, 27, 66, .08); --shadow-blue: 0 12px 34px rgba(27, 99, 242, .18); /* — шрифты — */ /* Одна суперсемья на всё. Решение владельца 16.08.2026 после сравнения девяти гарнитур на настоящем заголовке страницы в колонке 553px. — Unbounded ломал заголовок на ПЯТЬ строк, все остальные на четыре: это 56 лишних пикселей высоты на каждом из девяти заголовков; — у Golos Text кириллица нарисована первой, а не адаптирована с латиницы, и работают табличные цифры (проверено с контролем); — Commissioner нравился, но у него tabular-nums не работает НИ через font-variant-numeric, НИ через font-feature-settings: «111» и «000» расходятся на 135px при кегле 200. Для страницы про проценты и дельты это дисквалифицирует. Два токена сохранены раздельно намеренно: дисплейный ярус может разойтись с текстовым, не переписывая компоненты. */ --face-display: "Golos Text", system-ui, "Segoe UI", sans-serif; --face-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif; /* — движение — */ --ease-out: cubic-bezier(.2, .7, .3, 1); --ease-expo: cubic-bezier(.16, 1, .3, 1); --duration-1: .18s; --duration-3: .7s; --duration-4: .9s; /* ====================================================================== СЛОЙ 2. СЕМАНТИКА — назначение. Здесь переключается бренд. Именно эти токены уходят в поля ACF при переносе на WordPress. ====================================================================== */ --color-primary: var(--blue-500); --color-primary-ink: var(--blue-600); /* синий ТЕКСТОМ на светло-синем */ --color-primary-deep: var(--blue-800); --color-primary-soft: var(--blue-050); --color-primary-a08: var(--blue-a08); --color-primary-a18: var(--blue-a18); /* Текст: четыре ступени, худшее из пяти поверхностей 14.0 / 8.4 / 6.2 / 4.5 */ --text-heading: var(--navy-900); --text-body: var(--navy-700); --text-secondary: var(--slate-600); --text-subtle: var(--slate-500); --line-decor: var(--slate-300); /* ⛔ не текст */ --surface-page: var(--paper-050); --surface-card: var(--paper-000); --surface-sunken: var(--paper-100); --surface-inset: var(--paper-200); --border-default: var(--paper-300); --border-soft: var(--paper-350); --color-success: var(--green-500); --color-success-ink: var(--green-700); --color-success-btn: var(--green-btn); --color-warning: var(--amber-500); --color-warning-ink: var(--amber-700); --color-danger: var(--red-500); --color-danger-ink: var(--red-700); /* ⛔ Тональность: насыщенные — ТОЛЬКО заливки, полосы и риски. Текстом — никогда, для подписей есть -ink. */ --tone-positive: var(--tone-pos-500); --tone-positive-ink: var(--tone-pos-700); --tone-negative: var(--tone-neg-500); --tone-negative-ink: var(--tone-neg-700); --tone-neutral: var(--tone-neu-500); --tone-neutral-ink: var(--tone-neu-700); --tone-irrelevant:var(--tone-irr-500); --tone-irrelevant-ink: var(--tone-irr-700); --tone-own: var(--gold-500); --tone-own-ink: var(--gold-700); --radius-control: var(--radius-sm); --radius-surface: var(--radius-md); --shadow-raised: var(--shadow-1); --shadow-float: var(--shadow-2); --font-display: var(--face-display); --font-body: var(--face-body); --layout-max: 1180px; --layout-gutter: var(--space-6); /* 56, а не 72: при 72 между секциями выходило 144 px пустоты, а фон у соседних секций и так чередуется — граница видна без этого. */ /* 48 сверху и снизу = 96 между секциями. Ниже опускаться нельзя: 12 границ из 14 рисуются сменой фона, но две держатся только воздухом («Боли → Три отчёта», «FAQ → финал»), и при 40 они начинают читаться одним блоком. Внутри секций крупнейший отступ — 36 px, межсекционный обязан быть заметно больше. */ --layout-section: var(--space-12); /* ====================================================================== СЛОЙ 3. КОМПОНЕНТЫ — точечные ручки. Заводятся ТОЛЬКО там, где узел действительно требует своей настройки; плодить их на каждый селектор — вернуть плоскую систему другим способом. ====================================================================== */ --btn-radius: var(--radius-control); --btn-min-height: 44px; --btn-primary-from: var(--color-primary); --btn-primary-to: var(--color-primary-deep); --btn-ghost-bg: var(--surface-card); --btn-ghost-text: var(--text-secondary); --card-bg: var(--surface-card); --card-radius: var(--radius-surface); --card-border: var(--border-default); --card-shadow: var(--shadow-raised); --nav-height: 64px; --nav-bg: rgba(244, 247, 254, .94); --nav-link: var(--text-secondary); --footer-bg: var(--text-heading); --footer-text: rgba(255, 255, 255, .62); /* ≈5.4:1 на тёмном */ --ruler-height: var(--space-2); --ruler-height-hair: 3px; --ruler-height-tall: 14px; --tip-bg: var(--text-heading); --tip-width: 272px; /* ====================================================================== СЛОЙ СОВМЕСТИМОСТИ — прежние короткие имена. Нужны, чтобы 13 страниц переводились ПО ОДНОЙ, а не все разом. Удалить, когда последняя страница перейдёт на семантические имена. ⚠️ Именно терпкость этих имён и породила главную мину системы: --r означал красный в одной половине и радиус в другой. Новый код пишем семантическими именами, эти — только для доживающей разметки. ====================================================================== */ --c: var(--color-primary); --cd: var(--color-primary-a08); --cb: var(--color-primary-a18); --c-soft: var(--color-primary-soft); --c-ink: var(--color-primary-ink); --c-deep: var(--color-primary-deep); --head: var(--text-heading); --body: var(--text-body); --mid: var(--text-secondary); --dim: var(--text-subtle); --hairline: var(--line-decor); --bg: var(--surface-page); --card: var(--surface-card); --card2: var(--surface-sunken); --card3: var(--surface-inset); --border: var(--border-default); --g: var(--color-success); --g-ink: var(--color-success-ink); --g-btn: var(--color-success-btn); --a: var(--color-warning); --a-ink: var(--color-warning-ink); --red: var(--color-danger); --red-ink: var(--color-danger-ink); --neu: var(--steel-500); --t-pos: var(--tone-positive); --t-pos-ink: var(--tone-positive-ink); --t-neg: var(--tone-negative); --t-neg-ink: var(--tone-negative-ink); --t-neu: var(--tone-neutral); --t-neu-ink: var(--tone-neutral-ink); --t-irr: var(--tone-irrelevant); --t-irr-ink: var(--tone-irrelevant-ink); --t-own: var(--tone-own); --t-own-ink: var(--tone-own-ink); --rad: var(--radius-md); --rad-sm: var(--radius-sm); --rad-xs: var(--radius-xs); --rad-pill: var(--radius-pill); --sh-sm: var(--shadow-raised); --sh-md: var(--shadow-float); --sh-blue: var(--shadow-blue); --maxw: var(--layout-max); --gut: var(--layout-gutter); --sec-y: var(--layout-section); --sec-y-sm: var(--space-12); --ease: var(--ease-out); --dur: var(--duration-1); /* Тёмная подложка. Не тема, а две поверхности: подвал и полоса «результат в цифрах». Своих токенов у них не было, и цвета стояли литералами — единственные в файле, мимо системы. ⚠️ Волосяная линия сведена к одному значению: было .14 в подвале и .16 в полосе. Разница в два процента прозрачности не видна, а два имени для одного и того же — это способ однажды поправить одно и забыть второе. */ --on-dark-text: #C3D0EC; --on-dark-line: rgba(255, 255, 255, .14); } /* Адаптивная плотность — переопределяется СЕМАНТИКА, а не примитивы: меняется назначение «сколько воздуха у секции», а не палитра. */ @media (max-width: 1024px) { :root { --layout-section: var(--space-10); } } @media (max-width: 768px) { :root { --layout-section: var(--space-10); --layout-gutter: var(--space-5); } } @media (max-width: 480px) { :root { --layout-gutter: var(--space-4); } }