/* LossHunter — глобальные дизайн-токены (docs/design-system/, docs/DESIGN.md). Подключается везде: layout.html, layout_ui.html, studio_new.html. Все остальные CSS-файлы (studio.css, report.css, ui.css, nav.css) ссылаются на --pl-* отсюда. ┌─ 3 слоя (индустриальный стандарт Material 3 / Style Dictionary) ──────────┐ │ ref (--pl-ref-*) — СЫРЬЁ: палитра, шкала размеров, шрифты, без смысла. │ │ sys (--pl-sys-*) — РОЛИ: поверхности, текст, вердикт, плотность. │ │ Тема = override ТОЛЬКО этого слоя под [data-theme]. │ │ --pl-* (алиасы) — МОСТ обратной совместимости: старый код смотрит сюда,│ │ а они проксируют в sys/ref. Снос алиасов — после │ │ миграции компонентов на sys/ref (цель — фаза 3+, │ │ ориентир Q3 2026). Новый код ссылается на sys/ref. │ └───────────────────────────────────────────────────────────────────────────┘ Рефактор обратносовместим: каждый --pl-* резолвится в то же значение, что и до разложения на слои (доказано визуальным гейтом scripts/dev/visual_token_gate.py). */ /* ═══════════════════════════════════════════════════════════ СЛОЙ REF — сырьё (палитра, шкала, шрифты), без контекста ═══════════════════════════════════════════════════════════ */ :root { /* ── Палитра: чернила (тёмные иммерсивные поверхности) ─── */ --pl-ref-ink-0: #0C0E0D; /* глубокий body в тёмной теме */ --pl-ref-ink-1: #07090A; /* иммерсив / hero */ --pl-ref-ink-2: #0E1013; /* тёмные карточки */ --pl-ref-ink-3: #1A1D21; /* вторичные тёмные карточки */ --pl-ref-ink-4: #232830; /* утопленная поверхность (дно списка, полоса ввода) */ /* ── Палитра: бумага (светлые поверхности) ────────────── */ --pl-ref-paper-0: #FFFFFF; /* чистый белый — карточки light */ --pl-ref-paper-1: #F6F7F5; /* off-white — body light */ /* Ступени листа отчёта. Раньше жили сырыми хексами в report_designs.css (#FAFAFB ×11, #F2F2F7, #FCFCFD/#FCFCFE/#FBFBFD/#FBFCFE/#FBFCFB — пять почти неразличимых «едва белых» на одну роль). Здесь их три, по назначению. */ --pl-ref-paper-2: #FAFAFB; /* мягкая подложка внутри листа: чип, ранг, плашка */ --pl-ref-paper-3: #F2F2F7; /* фон ВОКРУГ листа */ --pl-ref-paper-4: #FCFCFD; /* едва отличимая подложка вложенного блока */ /* ── Палитра: чернила документа (текст и линии на светлом) ────────────── Свод двух ручных наборов: печатный «аудит» (#111814/#1A1D21/#5C6862 + линии #E6E9E4/#EFF1ED) и лист «новый формат» (#15172A/#5A6076/#6B7280 + линии #E6E6EB/#F1F1F4). Разница между ними глазом не ловится (ΔE ≈ 2), а значений было вдвое больше нужного — остались эти. */ --pl-ref-doc-900: #15172A; /* заголовки и основной текст листа */ --pl-ref-doc-600: #5A6076; /* текст-описание, ячейка таблицы */ --pl-ref-doc-500: #6B7280; /* подписи и мелочь (4.83:1 на белом — AA) */ --pl-ref-doc-300: #A0A0AB; /* нейтральная точка светофора */ --pl-ref-doc-200: #C9CDD7; /* линия под курсором, рамка hover */ --pl-ref-doc-100: #E6E6EB; /* несущая линия листа */ --pl-ref-doc-50: #F1F1F4; /* мягкая линия и заливка бейджа */ /* ── Палитра: нейтральная (текст) ─────────────────────── */ --pl-ref-gray-50: #ECEFEA; /* основной текст на тёмном */ --pl-ref-gray-100: #DDEBD6; /* основной текст на тёмном (dark theme) */ --pl-ref-gray-200: #C2CDC6; /* muted, поднятый по контрасту (мелкий экран) */ --pl-ref-gray-300: #AEB6B0; /* muted на тёмном */ /* subtle на тёмном. Значение пересчитано 31.07 от НАРИСОВАННОГО фона: прежний #87918B давал 6.13:1 на объявленном #07090A, но 3.19:1 на том, что реально под ним нарисовано (--pl-sys-bg-painted) — ниже AA. #ACB4AF даёт 4.62:1 по факту. */ --pl-ref-gray-400: #ACB4AF; /* subtle на тёмном */ --pl-ref-gray-500: #8C9590; /* muted (dark theme body) */ --pl-ref-gray-600: #5C6862; /* вторичный на светлом */ --pl-ref-gray-900: #111814; /* основной текст на светлом */ /* ── Палитра: бренд (Сбер-зелёный) ────────────────────── */ --pl-ref-green-500: #21A038; /* основной зелёный */ --pl-ref-green-400: #3ECF67; /* glow / highlight */ --pl-ref-green-300: #62F08A; /* самый яркий */ /* ── Палитра: семафор НА СВЕТЛОМ — тональная триада на каждое состояние ── Плашка статуса это всегда три значения: заливка, рамка, текст. В отчёте они были набраны девятью хексами на три состояния и ещё раз продублированы под кнопки (#E9F8EE/#9EDAB0/#106B2C и #FDEAEA/#F2A6A6/#A32626 — те же три роли чуть другими числами). Триада ниже одна на смысл. Тон -800 обязателен для ТЕКСТА: яркие -500 дают на белом 2.2:1. */ --pl-ref-red-50: #FFF1F0; --pl-ref-red-200: #F7D2CE; --pl-ref-red-500: #FF3B30; /* яркая точка/полоса светофора */ --pl-ref-red-800: #B3261E; /* тот же смысл буквами (6.54:1) */ --pl-ref-amber-50: #FFF7EC; --pl-ref-amber-200: #FAE0AE; --pl-ref-amber-500: #FF9500; --pl-ref-amber-800: #8A5300; /* 6.33:1 */ --pl-ref-green-50: #EDFBF0; --pl-ref-green-200: #BEEAC8; --pl-ref-green-450: #34C759; --pl-ref-green-700: #0E7A2B; /* бренд буквами на светлом */ --pl-ref-green-800: #1E7A3B; /* 5.38:1 */ --pl-ref-blue-50: #F1F6FE; /* поясняющая выноска на листе */ --pl-ref-blue-200: #CFE0FB; /* ── Палитра: семафор + конкуренты ────────────────────── */ --pl-ref-amber-600: #D97706; --pl-ref-red-600: #DC2626; --pl-ref-cyan-600: #1896B4; --pl-ref-blue-700: #1d4ed8; --pl-ref-violet-600: #7c3aed; --pl-ref-slate-600: #475569; /* Светлые ступени сравнительной пары — для ТЕКСТА на тёмном. blue-700/violet-600 физически не читаются на нарисованном фоне (1.3:1 и 1.9:1); витрина рисовала слои Сводки своими #8AA0E6 / #C39BE6 мимо канона. Значения подняты до AA 4.5:1. */ --pl-ref-blue-300: #9EB1EB; --pl-ref-violet-300: #C8A4E8; /* ── Шрифты ───────────────────────────────────────────── */ /* Запасные семейства держим полными: витрина раньше несла свою, более длинную цепочку (-apple-system у текста, ui-monospace/Menlo у моно). Теперь цепочка одна на весь продукт, и она та, что лучше: пока webfont не доехал (или не доехал вовсе — офлайн-копия витрины), подставляется системный шрифт с близкой шириной глифа, а не голый sans-serif/monospace с чужой метрикой и другими переносами. */ --pl-ref-font-sans: "Golos Text",system-ui,-apple-system,sans-serif; --pl-ref-font-display: "Unbounded",system-ui,sans-serif; --pl-ref-font-mono: "JetBrains Mono",ui-monospace,Menlo,monospace; /* Гарнитура печатного листа отчёта. Лист сознательно набран системным шрифтом (образец, по которому его делали) — цепочка была вписана в report_designs.css руками. Перевод листа на Golos переложит КАЖДУЮ строку отчёта, это отдельное решение владельца; здесь цепочка просто перестаёт быть литералом. */ --pl-ref-font-doc: -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Golos Text",system-ui,sans-serif; /* ── Шкала размеров текста ────────────────────────────── */ --pl-ref-size-xs: 10px; --pl-ref-size-sm: 12px; --pl-ref-size-base: 14px; --pl-ref-size-md: 16px; --pl-ref-size-lg: 18px; --pl-ref-size-xl: clamp(22px, 3.2vw, 32px); --pl-ref-size-2xl: clamp(32px, 4.5vw, 48px); --pl-ref-size-3xl: clamp(36px, 5.4vw, 58px); /* ── Шкала радиусов ───────────────────────────────────── */ --pl-ref-radius-xs: 6px; --pl-ref-radius-sm: 8px; --pl-ref-radius-md: 12px; --pl-ref-radius-lg: 16px; --pl-ref-radius-xl: 20px; --pl-ref-radius-2xl: 26px; --pl-ref-radius-full: 9999px; /* ── Шкала теней (elevation) ──────────────────────────── */ /* Прежняя карточная тень. Живой роли больше не отдаётся (--pl-sys-shadow-card переведён на e1), но имя сохранено: старый код и откат ссылаются на него. */ --pl-ref-shadow-card: 0 36px 90px -36px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); --pl-ref-shadow-btn: 0 14px 36px -10px rgba(62,207,103,.65); --pl-ref-shadow-btn-hover: 0 20px 50px -10px rgba(62,207,103,.85); /* ── Шкала отступов (база 4px). Единственный источник плотности ───────── До неё в ui.css жили 100 разных padding и 22 gap на одни и те же роли. Компоненты берут не ступени напрямую, а роли слоя sys (pad/gap). */ --pl-ref-space-1: 4px; --pl-ref-space-2: 8px; --pl-ref-space-3: 12px; --pl-ref-space-4: 16px; --pl-ref-space-5: 20px; --pl-ref-space-6: 24px; --pl-ref-space-8: 32px; --pl-ref-space-10: 40px; --pl-ref-space-12: 48px; /* ── Бренд: рабочая пара под заливку кнопки ───────────────────────────── Белый на сплошном #21A038 даёт 3.41:1 — ниже нормы AA. Осветлённый градиент 550→600 с тушью #04130A даёт 6.19:1. Приём уже был доказан в .wf-action-btn, здесь он становится общим сырьём. */ --pl-ref-green-550: #25A93D; --pl-ref-green-600: #1C8E32; --pl-ref-ink-on-accent: #04130A; /* ── Elevation: на тёмном подъём даёт СВЕТОВАЯ КРОМКА, тень — только глубину. Чёрный blur 90px на фоне #07090A физически не виден: композитор считает эффект, которого нет. e1/e2/e3 = кромка + короткая честная тень. */ --pl-ref-shadow-e1: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px -4px rgba(0,0,0,.55); --pl-ref-shadow-e2: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 28px -18px rgba(0,0,0,.75); --pl-ref-shadow-e3: inset 0 1px 0 rgba(255,255,255,.085), 0 24px 56px -28px rgba(0,0,0,.85); /* ── Движение: было .14/.15/.16/.18/.2s вперемешку на одном и том же hover ── */ --pl-ref-dur-fast: 120ms; --pl-ref-dur-base: 180ms; --pl-ref-dur-slow: 240ms; --pl-ref-ease-out: cubic-bezier(.22,1,.36,1); } /* ═══════════════════════════════════════════════════════════ СЛОЙ SYS — роли/семантика (по умолчанию = текущая тема). Тема = override ТОЛЬКО этих переменных под [data-theme=...]. ═══════════════════════════════════════════════════════════ */ :root { /* ── Поверхности ──────────────────────────────────────── */ --pl-sys-surface-immersive: var(--pl-ref-ink-1); /* hero / иммерсив */ --pl-sys-surface-raised: var(--pl-ref-ink-2); /* тёмные карточки */ --pl-sys-surface-overlay: var(--pl-ref-ink-3); /* вторичные тёмные */ --pl-sys-surface-sunken: var(--pl-ref-ink-4); /* утопленная поверхность */ --pl-sys-surface-body: var(--pl-ref-paper-1); /* body документа */ --pl-sys-surface-card: var(--pl-ref-paper-0); /* карточка документа */ /* ── Текст ────────────────────────────────────────────── */ --pl-sys-text-strong: var(--pl-ref-gray-50); /* основной на тёмном */ --pl-sys-text-muted: var(--pl-ref-gray-300); /* вторичный на тёмном */ /* Вторичный, поднятый по контрасту: на мелком экране muted читается хуже, и подписи под заголовками поднимали до этой ступени в четырёх местах тремя копиями значения. Тут же средние ступени чужих рамп (ink-700/800). */ --pl-sys-text-muted-hi: var(--pl-ref-gray-200); --pl-sys-text-subtle: var(--pl-ref-gray-400); /* третичный на тёмном */ --pl-sys-text-on-light: var(--pl-ref-gray-900); /* основной на светлом */ --pl-sys-text-on-light-muted:var(--pl-ref-gray-600); /* вторичный на светлом */ /* ── Бренд / акцент ───────────────────────────────────── */ --pl-sys-accent: var(--pl-ref-green-500); --pl-sys-accent-glow: var(--pl-ref-green-400); --pl-sys-accent-bright: var(--pl-ref-green-300); /* Акцент КАК ТЕКСТ — отдельная роль. Бренд-зелёный #21A038 хорош заливкой (под неё есть --pl-sys-accent-fill с тушью на 6.19:1), но буквами по нарисованному фону даёт 3.04:1 — ниже AA. Красить текст акцентом можно только этой ролью (5.11:1). */ --pl-sys-accent-text: var(--pl-ref-green-400); /* ── Вердикт / состояния (светофор) ───────────────────── */ --pl-sys-success: var(--pl-ref-green-500); --pl-sys-warning: var(--pl-ref-amber-600); --pl-sys-error: var(--pl-ref-red-600); --pl-sys-info: var(--pl-ref-cyan-600); /* ── Единая нотация состояний (status canon) ────────────── ПЯТЬ семантических состояний — один словарь цвета для всего продукта. Источник правды «состояние → цвет»: классы .ui-state--* (ui.css) + хелпер app/quality/status_palette.py. Текст всегда осветлённый и проходит WCAG AA (≥4.5:1) на тёмном фоне; тёмные бренд-цвета живут в рамке/фоне. НЕ дублировать пороги 75/55 — они только в confidence.py. */ --pl-state-running-text: #7CC4FF; /* в работе / очередь / ожидает */ --pl-state-running-border: rgba(124,196,255,.45); --pl-state-running-bg: rgba(124,196,255,.12); --pl-state-warn-text: #F5B544; /* внимание / нужны данные / готов-слабо */ --pl-state-warn-border: rgba(245,181,68,.50); --pl-state-warn-bg: rgba(245,181,68,.14); --pl-state-failed-text: #FF7A6B; /* упал / не получился */ --pl-state-failed-border: rgba(220,38,38,.50); --pl-state-failed-bg: rgba(255,122,107,.14); --pl-state-good-text: #5FE08C; /* готов и хорошо */ --pl-state-good-border: rgba(95,224,140,.45); --pl-state-good-bg: rgba(95,224,140,.14); /* idle поднят 31.07 с #9BA8B0: по нарисованному фону тот давал 4.27:1 — ниже AA. */ --pl-state-idle-text: #A7B4BA; /* черновик / отменён / нет-оценки / пауза */ --pl-state-idle-border: rgba(155,168,176,.32); --pl-state-idle-bg: rgba(155,168,176,.08); /* Тема извещения (чип в шторке): «кроссы» и «исследование» берут цвет из словаря состояний (в работе / внимание), а «аналитика» — свой смысл, для него отдельный токен. Значение живёт здесь, а не в nav.css: гейт канона держит одно место правды на цвет. */ --pl-topic-analytics: #C4A6FF; /* ── Направления на графе клиентского пути (ТЁМНЫЙ контур) ────────────── Пять смыслов, которыми граф различает ХОД человека: вперёд по сценарию, возврат назад, обрывок пути, наложение экранов, край записи. Словарь состояний (готово/внимание/упал) сюда не годится — это другой смысл, а палитра сравнения занята конкурентами. Значения литералами, как у --pl-state-* выше: набор настроен на конкретный замеренный фон, и «сырьё» из него переиспользовать нельзя. Живут в каноне, потому что граф скачивается отдельной картинкой и обязан нести цвет с собой. Все пять ≥4,5:1 по нарисованному фону (--pl-sys-bg-painted, гейт TextContrastOnPaintedBackground) и разведены между собой: минимальная пара «наложение—край» даёт ΔE2000 = 19,1. Дальтонизм — честный размен, а не недосмотр: пара «вперёд/наложение» (синий/фиолетовый) при протанопии сливается (ΔE 0,3), зато «возврат» и «обрывок» разведены — у прежней светлой пятёрки было ровно наоборот. Слипшуюся пару держит форма: вперёд — стрелка, наложение — полоса внутри вершины, плюс словесная легенда. */ --pl-sys-path-forward: #8BB7FF; /* вперёд по сценарию — 4,81:1 */ --pl-sys-path-back: #FF9B72; /* возврат назад — 4,75:1 */ --pl-sys-path-fragment: #F7C600; /* обрывок пути — 6,08:1 */ --pl-sys-path-overlay: #E8AAFF; /* наложение экранов — 5,42:1 */ --pl-sys-path-end: #FF95AE; /* край записи — 4,74:1 */ /* ── Конкуренты (палитра сравнения) ───────────────────── */ --pl-sys-cmp-0: var(--pl-ref-amber-600); --pl-sys-cmp-1: var(--pl-ref-blue-700); --pl-sys-cmp-2: var(--pl-ref-violet-600); --pl-sys-cmp-3: var(--pl-ref-slate-600); /* Та же пара «сравнение», но для ТЕКСТА и рамок на тёмном. Слои Сводки витрины красились сюда своими значениями мимо канона — теперь витрина берёт эти. */ --pl-sys-cmp-blue: var(--pl-ref-blue-300); --pl-sys-cmp-violet: var(--pl-ref-violet-300); /* ── Границы / стекло (surface treatment) ─────────────── */ --pl-sys-line: rgba(255,255,255,.08); --pl-sys-line-strong: rgba(255,255,255,.14); --pl-sys-border-on-light:rgba(0,0,0,.08); --pl-sys-border-on-dark: rgba(255,255,255,.09); --pl-sys-glass: rgba(255,255,255,.045); --pl-sys-glass-raised: rgba(255,255,255,.07); /* ── Тени (роль → ref-шкала) ────────────────────────────────────────── ЕДИНСТВЕННОЕ значение, сменившееся при рефреше: карточная тень уехала с невидимого чёрного blur 90px на кромку света e1. Это и есть точка пересъёмки базы scripts/dev/visual_token_gate.py. */ --pl-sys-shadow-card: var(--pl-ref-shadow-e1); --pl-sys-shadow-btn: var(--pl-ref-shadow-btn); --pl-sys-shadow-btn-hover: var(--pl-ref-shadow-btn-hover); --pl-sys-shadow-raised: var(--pl-ref-shadow-e2); /* hover-подъём, «прилипшая» шапка */ --pl-sys-shadow-overlay: var(--pl-ref-shadow-e3); /* меню, поповеры, модалка, дровер */ /* ── Типографика-роли ─────────────────────────────────── */ --pl-sys-font-ui: var(--pl-ref-font-sans); --pl-sys-font-display: var(--pl-ref-font-display); --pl-sys-font-mono: var(--pl-ref-font-mono); /* ── Поверхности body (ТЕМА: light по умолчанию; dark — ниже) ───── */ --pl-sys-body-bg: var(--pl-sys-surface-body); --pl-sys-body-card: var(--pl-sys-surface-card); --pl-sys-body-border: var(--pl-sys-border-on-light); --pl-sys-body-text: var(--pl-sys-text-on-light); --pl-sys-body-muted: var(--pl-sys-text-on-light-muted); /* ── Плотность (роль → шкала ref). Компоненты берут ЭТО, не литералы ── */ --pl-sys-pad-card: var(--pl-ref-space-6); /* 24 — карточка/панель */ --pl-sys-pad-card-sm: var(--pl-ref-space-4); /* 16 — плотная строка/стат */ --pl-sys-pad-control: 10px var(--pl-ref-space-4); /* кнопка/инпут */ --pl-sys-pad-control-sm: 6px var(--pl-ref-space-3);/* кнопка-чип, фильтр, таб */ --pl-sys-gap-inline: var(--pl-ref-space-2); /* иконка+текст, ряд чипов */ --pl-sys-gap-stack: var(--pl-ref-space-3); /* сетки карточек */ --pl-sys-gap-section: var(--pl-ref-space-8); /* между секциями */ /* ── Радиус по роли (4 роли вместо 15 литералов 9/10/11/14/18) ──────── «Карточка» больше не бывает 14 в админке, 16 в реестре и 18 в модалке. */ --pl-sys-radius-chip: var(--pl-ref-radius-sm); /* 8: чип, мелкий бейдж, миниатюра */ --pl-sys-radius-control: var(--pl-ref-radius-md); /* 12: кнопки, инпуты, икон-кнопки */ --pl-sys-radius-card: var(--pl-ref-radius-lg); /* 16: карточки, флеши, строки-плитки */ --pl-sys-radius-panel: var(--pl-ref-radius-xl); /* 20: крупные контейнеры, модалка */ --pl-sys-radius-pill: var(--pl-ref-radius-full); /* ── Акцент как заливка + доступная тушь на нём (AA 6.19:1) ─────────── */ --pl-sys-accent-fill: linear-gradient(180deg, var(--pl-ref-green-550), var(--pl-ref-green-600)); --pl-sys-accent-fill-hover: linear-gradient(180deg, #2BB546, var(--pl-ref-green-500)); --pl-sys-on-accent: var(--pl-ref-ink-on-accent); /* ── Поверхность навигации/липких слоёв ────────────────────────────── blur остаётся ровно у липких слоёв (шапка, строка крошек), а не у каждой карточки: под карточками только радиальные блумы — размывать нечего. */ --pl-sys-surface-nav: color-mix(in srgb, var(--pl-ref-ink-1) 72%, transparent); --pl-sys-surface-nav-solid: color-mix(in srgb, var(--pl-ref-ink-1) 94%, transparent); /* Размытие — ТРИ роли, а не одно значение. Прежний комментарий обещал «единственное», а по коду жило девять литералов (2/3/6/8/11/14/18/26/95px), и сам рельс навигации — главный липкий слой — шёл мимо токена на 26px. Роль называет НАЗНАЧЕНИЕ слоя. */ --pl-sys-blur-rail: 26px; /* рельс и колонка меню — стекло во всю высоту экрана */ --pl-sys-blur-sticky: 18px; /* липкая шапка, строка крошек, панель фильтров */ --pl-sys-blur-soft: 8px; /* мягкая подложка выноски, чипа, мини-панели */ /* ── Состояния поверхности (были 20+ локальных rgba на один и тот же hover) ── */ --pl-sys-state-hover: rgba(255,255,255,.055); --pl-sys-state-pressed: rgba(255,255,255,.09); --pl-sys-state-selected: color-mix(in srgb, var(--pl-sys-accent) 14%, transparent); /* ── Несущая линия (структурная) отдельно от декоративной hairline ──── --pl-sys-line (.08) тянула и декор, и структуру: разделители строк на тёмном давали 1.18:1 и не читались. */ --pl-sys-line-structural: rgba(255,255,255,.16); /* ── Фокус: двойное кольцо (тёмный зазор + зелёный контур) — видно на любой поверхности, включая саму зелёную кнопку. */ --pl-sys-focus-ring: 0 0 0 2px var(--pl-ref-ink-1), 0 0 0 4px var(--pl-ref-green-400); /* ── Движение по роли ─────────────────────────────────────────────── */ --pl-sys-motion-state: var(--pl-ref-dur-base) var(--pl-ref-ease-out); --pl-sys-motion-fast: var(--pl-ref-dur-fast) var(--pl-ref-ease-out); /* ══ УРОВНИ ПОВЕРХНОСТИ — то, что РЕАЛЬНО нарисовано на экране ═══════════════ Дизайн-система описывала фон страницы как #07090A (светлота 3.7%), а на контуре кросс-продаж и платформы он не виден никогда: поверх лежит зерно (--pl-sys-bg-grain) и поднимает светлоту в 5-7 раз. От этого расхождения росли и «зеленоватый налёт», и просевший контраст: контраст текста считали от фона, которого на экране нет. Четыре значения ниже — ЗАМЕР живого экрана (аудит 31.07, docs/tasks/2026-07-31- design-audit.md), а не пожелание. Они и есть те четыре «фона страницы», которые видно одновременно, когда три полупрозрачных слоя стоят друг над другом. */ --pl-sys-level-0: #131516; /* рельс навигации — самый тёмный слой контура */ --pl-sys-level-1: #1C1F20; /* колонка экранов, вторичная панель */ --pl-sys-level-2: #2B2D30; /* полоса контента — основной фон под текстом */ --pl-sys-level-3: #424445; /* панель поверх контента — самый светлый фон */ /* Расчётная база контраста: худший (самый светлый) из фактических фонов. Любой текстовый токен обязан давать по нему ≥4.5:1 — это держит гейт tests/test_design_code_canon.py::TextContrastOnPaintedBackground. */ --pl-sys-bg-painted: var(--pl-sys-level-3); /* Поправка светлоты, которую даёт зерно: объявленные 3.7% → нарисованные ~21%. Токен ничего не красит — он делает видимым то, что раньше было невидимым. */ --pl-sys-bg-lift: 17%; /* ══ ФОН-ДЕКОР — одно определение на весь контур ════════════════════════════ Зерно + три пятна подсветки. Раньше жили двумя копипастами (platform.css и генератор витрины) и разными оттенками: зелёное пятно (149°, насыщенность 29%) стояло рядом с холодно-серой зоной (197°, 5%) — глаз читал неравномерность как грязный налёт. Теперь у всех трёх пятен ОДИН холодный оттенок канона (~200°), совпадающий с оттенком самого зерна: по странице меняется только светлота. Витрина кросс-продаж собирается офлайн-копией и tokens.css не подключает — её палитра и этот декор ГЕНЕРИРУЮТСЯ отсюда (ops/showcase/crosssell/round12/sc_tokens.py). */ --pl-sys-bg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E"); --pl-sys-bg-grain-size: 160px 160px; /* Альфы — УЖЕ итоговые: слой-носитель не имеет своей opacity ни на витрине, ни на платформе, иначе одно и то же пятно снова получит два разных числа. */ --pl-sys-bloom-1-core: rgba(150,170,182,.07); /* верхнее правое, ядро */ --pl-sys-bloom-1-mid: rgba(150,170,182,.022); /* его же спад */ --pl-sys-bloom-2-core: rgba(150,170,182,.05); /* второе правое, ядро */ --pl-sys-bloom-2-mid: rgba(150,170,182,.016); /* его же спад */ --pl-sys-bloom-3-core: rgba(150,170,182,.03); /* нижнее левое, одноступенчатое */ /* ══ ТИПОГРАФИКА ПО РОЛЯМ ═══════════════════════════════════════════════════ Было: шкала размеров без ролей — и шесть разных начертаний «имени страницы» (Unbounded 800/54, 800/58, 800/52, 600/36, Golos 650/22, -apple-system 700/26). Роль = запись для сокращения `font`: семейство + размер + вес + интерлиньяж одним значением. Трекинг и цвет остаются своими свойствами — их `font` не сбрасывает. */ --pl-sys-type-page-title: 800 clamp(34px,5.3vw,54px)/1.02 var(--pl-ref-font-display); --pl-sys-type-section-title: 700 22px/1.28 var(--pl-ref-font-display); --pl-sys-type-card-title: 700 16.5px/1.35 var(--pl-ref-font-sans); --pl-sys-type-body: 400 16px/1.55 var(--pl-ref-font-sans); --pl-sys-type-caption: 400 13px/1.5 var(--pl-ref-font-sans); --pl-sys-type-mono-label: 700 11px/1.4 var(--pl-ref-font-mono); /* ══ СВЕТЛАЯ ВЕТКА: ПЕЧАТНЫЙ ЛИСТ ═══════════════════════════════════════════ Ветку берёт РОВНО ОДНА страница продукта — отчёт /submissions/: его печатают и пересылают, и тёмные роли выше на белой бумаге не работают. Без ветки лист заводил свой набор (52 сырых хекса при подключённом и неиспользуемом каноне). Страницы мульти-аналитики пути (/showcase/cjx/) с 31.07 живут на тёмном контуре платформы и светлую ветку не берут. */ --pl-sys-doc-page: var(--pl-ref-paper-3); /* фон вокруг листа */ --pl-sys-doc-sheet: var(--pl-ref-paper-0); /* сам лист */ --pl-sys-doc-fill: var(--pl-ref-paper-2); /* подложка чипа, ранга, плашки */ --pl-sys-doc-fill-soft: var(--pl-ref-paper-4); /* подложка вложенного блока */ --pl-sys-doc-ink: var(--pl-ref-doc-900); --pl-sys-doc-ink-muted: var(--pl-ref-doc-600); --pl-sys-doc-ink-subtle: var(--pl-ref-doc-500); --pl-sys-doc-neutral: var(--pl-ref-doc-300); /* «нет оценки» точкой */ --pl-sys-doc-line: var(--pl-ref-doc-100); --pl-sys-doc-line-soft: var(--pl-ref-doc-50); --pl-sys-doc-line-strong: var(--pl-ref-doc-200); --pl-sys-doc-brand: var(--pl-ref-green-500); /* заливкой */ --pl-sys-doc-brand-ink: var(--pl-ref-green-700); /* буквами */ --pl-sys-doc-red-bg: var(--pl-ref-red-50); --pl-sys-doc-red-line: var(--pl-ref-red-200); --pl-sys-doc-red-ink: var(--pl-ref-red-800); --pl-sys-doc-red-dot: var(--pl-ref-red-500); --pl-sys-doc-amber-bg: var(--pl-ref-amber-50); --pl-sys-doc-amber-line: var(--pl-ref-amber-200); --pl-sys-doc-amber-ink: var(--pl-ref-amber-800); --pl-sys-doc-amber-dot: var(--pl-ref-amber-500); --pl-sys-doc-green-bg: var(--pl-ref-green-50); --pl-sys-doc-green-line: var(--pl-ref-green-200); --pl-sys-doc-green-ink: var(--pl-ref-green-800); --pl-sys-doc-green-dot: var(--pl-ref-green-450); --pl-sys-doc-note-bg: var(--pl-ref-blue-50); --pl-sys-doc-note-line: var(--pl-ref-blue-200); /* Тёмный подвал листа — единственная тёмная зона светлой страницы. */ --pl-sys-doc-footer-bg: var(--pl-ref-ink-2); --pl-sys-doc-footer-ink: var(--pl-ref-paper-0); /* Роли типографики листа. «Имя страницы» на отчёте было шестым по счёту начертанием h1 в продукте; теперь оно роль, а не число в правиле. */ --pl-sys-type-doc-title: 700 34px/1.08 var(--pl-ref-font-doc); --pl-sys-type-doc-section: 600 19px/1.2 var(--pl-ref-font-doc); --pl-sys-type-doc-body: 400 13.5px/1.55 var(--pl-ref-font-doc); --pl-sys-type-doc-caption: 600 11px/1.3 var(--pl-ref-font-doc); } /* ═══════════════════════════════════════════════════════════ СЛОЙ АЛИАСОВ — мост обратной совместимости (--pl-*). Каждый алиас резолвится в то же значение, что и до рефактора. НОВЫЙ код ссылается на --pl-sys-* / --pl-ref-*, не на эти алиасы. ═══════════════════════════════════════════════════════════ */ :root { /* ── Фоны ─────────────────────────────────────────────── */ --pl-bg-0: var(--pl-sys-surface-immersive); --pl-bg-1: var(--pl-sys-surface-raised); --pl-bg-2: var(--pl-sys-surface-overlay); --pl-bg-3: var(--pl-sys-surface-sunken); --pl-bg-surface: var(--pl-sys-surface-body); --pl-bg-card: var(--pl-sys-surface-card); /* ── Текст ────────────────────────────────────────────── */ --pl-text-0: var(--pl-sys-text-strong); --pl-text-1: var(--pl-sys-text-muted); --pl-text-1-hi: var(--pl-sys-text-muted-hi); --pl-text-2: var(--pl-sys-text-subtle); --pl-text-dark: var(--pl-sys-text-on-light); --pl-text-dark-1: var(--pl-sys-text-on-light-muted); /* ── Бренд / акцент ───────────────────────────────────── */ --pl-accent: var(--pl-sys-accent); --pl-accent-glow: var(--pl-sys-accent-glow); --pl-accent-bright:var(--pl-sys-accent-bright); --pl-accent-text: var(--pl-sys-accent-text); /* ── Границы ──────────────────────────────────────────── */ --pl-line: var(--pl-sys-line); --pl-line-2: var(--pl-sys-line-strong); --pl-card-border: var(--pl-sys-border-on-light); --pl-card-border-dk: var(--pl-sys-border-on-dark); /* ── Стекло ───────────────────────────────────────────── */ --pl-glass: var(--pl-sys-glass); --pl-glass-2: var(--pl-sys-glass-raised); /* ── Состояния ────────────────────────────────────────── */ --pl-success: var(--pl-sys-success); --pl-warning: var(--pl-sys-warning); --pl-error: var(--pl-sys-error); --pl-info: var(--pl-sys-info); /* ── Конкуренты ───────────────────────────────────────── */ --pl-cmp-0: var(--pl-sys-cmp-0); --pl-cmp-1: var(--pl-sys-cmp-1); --pl-cmp-2: var(--pl-sys-cmp-2); --pl-cmp-3: var(--pl-sys-cmp-3); --pl-cmp-blue: var(--pl-sys-cmp-blue); --pl-cmp-violet: var(--pl-sys-cmp-violet); /* ── Шрифты ───────────────────────────────────────────── */ --pl-font-ui: var(--pl-sys-font-ui); --pl-font-display: var(--pl-sys-font-display); --pl-font-mono: var(--pl-sys-font-mono); /* ── Шкала размеров ───────────────────────────────────── */ --pl-text-xs: var(--pl-ref-size-xs); --pl-text-sm: var(--pl-ref-size-sm); --pl-text-base: var(--pl-ref-size-base); --pl-text-md: var(--pl-ref-size-md); --pl-text-lg: var(--pl-ref-size-lg); --pl-text-xl: var(--pl-ref-size-xl); --pl-text-2xl: var(--pl-ref-size-2xl); --pl-text-3xl: var(--pl-ref-size-3xl); /* ── Радиусы ──────────────────────────────────────────── */ --pl-radius-xs: var(--pl-ref-radius-xs); --pl-radius-sm: var(--pl-ref-radius-sm); --pl-radius-md: var(--pl-ref-radius-md); --pl-radius-lg: var(--pl-ref-radius-lg); --pl-radius-xl: var(--pl-ref-radius-xl); --pl-radius-2xl: var(--pl-ref-radius-2xl); --pl-radius-full: var(--pl-ref-radius-full); /* ── Тени ─────────────────────────────────────────────── */ --pl-shadow-card: var(--pl-sys-shadow-card); --pl-shadow-btn: var(--pl-sys-shadow-btn); --pl-shadow-btn-hover: var(--pl-sys-shadow-btn-hover); /* ── Body (light mode) ────────────────────────────────── */ --pl-body-bg: var(--pl-sys-body-bg); --pl-body-card: var(--pl-sys-body-card); --pl-body-border: var(--pl-sys-body-border); --pl-body-text: var(--pl-sys-body-text); --pl-body-muted: var(--pl-sys-body-muted); } /* ═══════════════════════════════════════════════════════════ ТЕМА: DARK — переопределяет роли sys (body-поверхности). ВАЖНО (инвариант для фазы 2 «тема = override слоя sys»): var() внутри кастом-свойства, ОБЪЯВЛЕННОГО в :root, резолвится в :root. Поэтому override --pl-sys-body-* на потомке (.dark) сам по себе НЕ протекает через алиас --pl-body-* (он тоже объявлен в :root и уже зарезолвлен светлым значением). Чтобы тема дошла до легаси-компонентов на --pl-body-*, алиасы дублируются здесь явно. Вывод для фазы 2: компоненты должны ссылаться на --pl-sys-* НАПРЯМУЮ, иначе override темы до них не дойдёт (доказано visual_token_gate). ═══════════════════════════════════════════════════════════ */ .dark, [data-theme="dark"] { /* роли sys — для компонентов, ссылающихся на sys напрямую (forward-correct) */ --pl-sys-body-bg: var(--pl-ref-ink-0); --pl-sys-body-card: rgba(255,255,255,.04); --pl-sys-body-border: var(--pl-sys-border-on-dark); --pl-sys-body-text: var(--pl-ref-gray-100); --pl-sys-body-muted: var(--pl-ref-gray-500); /* алиасы напрямую — иначе тема не дойдёт до легаси на --pl-body-* (ноль визуальной разницы с до-рефактором, доказано гейтом) */ --pl-body-bg: var(--pl-sys-body-bg); --pl-body-card: var(--pl-sys-body-card); --pl-body-border: var(--pl-sys-body-border); --pl-body-text: var(--pl-sys-body-text); --pl-body-muted: var(--pl-sys-body-muted); } /* ───────────────────────────────────────────────────────────────────────────── СТАНДАРТ САЙТА: кнопка. Роль «кнопка» не имела базового правила, и на четырёх страницах (платформа, «Что говорят клиенты», студия, мульти-аналитика пути) , выбранное состояние — aria-pressed="true" (или класс .is-on). ───────────────────────────────────────────────────────────────────────────── */ /* Сброс адресный, а не голым `button`: tokens.css линкуется сниппетом рельса в ЧУЖИЕ страницы, и глобальное правило перекрасило бы их кнопки. Здесь перечислены корни наших оболочек — гейт чистоты сниппета (test_shell_nav) держит это ограничение. */ .ui button,.platform button,.studio button,.voc button,.rd button{font:inherit} .pl-btn{ display:inline-flex;align-items:center;justify-content:center; gap:var(--pl-sys-gap-inline);padding:var(--pl-sys-pad-control-sm); border:1px solid color-mix(in srgb,currentColor 24%,transparent); border-radius:var(--pl-sys-radius-control); background:color-mix(in srgb,currentColor 6%,transparent); color:inherit;font:inherit;font-weight:600;line-height:1.35; cursor:pointer;transition:background var(--pl-sys-motion-fast),border-color var(--pl-sys-motion-fast); } .pl-btn:hover{ background:color-mix(in srgb,currentColor 12%,transparent); border-color:color-mix(in srgb,currentColor 38%,transparent); } .pl-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px} .pl-btn[aria-pressed="true"],.pl-btn.is-on{ background:color-mix(in srgb,var(--pl-sys-accent) 16%,transparent); border-color:color-mix(in srgb,var(--pl-sys-accent) 55%,transparent); } .pl-btn[disabled]{opacity:.5;cursor:not-allowed} /* ───────────────────────────────────────────────────────────────────────────── СТАНДАРТ САЙТА: инфо-иконка с ненавязчивой всплывающей подсказкой. Применение: i Везде, где нужно коротко пояснить элемент, используем именно этот компонент. ───────────────────────────────────────────────────────────────────────────── */ .pl-info{position:relative;z-index:2;pointer-events:auto;display:inline-grid;place-items:center;width:16px;height:16px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(255,255,255,.28);font-size:10px;font-style:italic;font-weight:700;line-height:1;color:#9aa6b2;cursor:help;margin-left:4px;vertical-align:middle;user-select:none} .pl-info:hover,.pl-info:focus{color:#e8eaed;border-color:#62F08A;outline:none} .pl-info::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:250px;max-width:62vw;background:#0e1316;color:#e8eaed;border:1px solid rgba(255,255,255,.14);border-radius:var(--pl-sys-radius-control);padding:9px 11px;font-size:12px;font-weight:400;font-style:normal;line-height:1.45;text-transform:none;letter-spacing:0;box-shadow:0 10px 30px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .14s ease;z-index:1200;pointer-events:none;white-space:normal;text-align:left} .pl-info:hover::after,.pl-info:focus::after{opacity:1;visibility:visible} /* Модификатор: тултип открывается ВНИЗ (под иконкой). Используется там, где над иконкой липкий слой (ось .wf-axis) и тултип-вверх перекрыл бы стадии. */ .pl-info.pl-info-below::after{top:calc(100% + 8px);bottom:auto} @media (max-width:640px){.pl-info::after{left:auto;right:0;transform:none}} /* ───────────────────────────────────────────────────────────────────────────── СТАНДАРТ САЙТА: профессиональный термин (DAU, WAU, MAU, CSI, NPS, CJM…). Общепринятое сокращение остаётся как есть — его знают в отрасли; оно набрано особым шрифтом с пунктирным подчёркиванием, а расшифровка всплывает при наведении или касании (решение Aleks 02.09: «надо вернуть общепринятые термины… при наведении пояснять, что это»). Русифицировать такие термины нельзя. Применение: DAU Модификатор .pl-term-below — всплывашка под термином (когда сверху тесно). ───────────────────────────────────────────────────────────────────────────── */ .pl-term{position:relative;z-index:2;pointer-events:auto;font-family:var(--pl-ref-font-mono);font-size:.94em;font-weight:600;letter-spacing:.02em;text-decoration:underline dotted currentColor;text-decoration-thickness:1px;text-underline-offset:3px;cursor:help;border:0;white-space:nowrap} .pl-term:hover,.pl-term:focus{color:#62F08A;text-decoration-style:solid;outline:none} .pl-term::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:250px;max-width:62vw;background:#0e1316;color:#e8eaed;border:1px solid rgba(255,255,255,.14);border-radius:var(--pl-sys-radius-control);padding:9px 11px;font-family:var(--pl-ref-font-sans);font-size:12px;font-weight:400;font-style:normal;line-height:1.45;text-transform:none;letter-spacing:0;box-shadow:0 10px 30px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .14s ease;z-index:1200;pointer-events:none;white-space:normal;text-align:left;text-decoration:none} .pl-term:hover::after,.pl-term:focus::after{opacity:1;visibility:visible} .pl-term.pl-term-below::after{top:calc(100% + 8px);bottom:auto} @media (max-width:640px){.pl-term::after{left:auto;right:0;transform:none;max-width:min(250px,78vw)}} /* ───────────────────────────────────────────────────────────────────────────── СТАНДАРТ САЙТА: панель фильтров. Фильтрация живёт в 20 местах двадцатью разными разметками; общего у них нет даже имени параметра. Ниже — единственная форма панели. Полный контракт (словарь измерений, имена query-параметров, остальные части компонента): docs/design-system/filters.md. ЗДЕСЬ — то, что реально используют потребители: страницы /showcase/cjx/* (статическая панель) и монитор обратной связи /platform/crosssell-feedback (серверная панель на ссылках — она принесла __reset и aria-current). Селект, чипы с крестиком, «Показать» и липкий модификатор кладутся сюда вместе с миграцией /submissions: мёртвый CSS не заводим. Серверная панель бывает двух корней:
(контролы шлют форму) и