/* ============================================================ re:premium — design tokens Источник бренда: репликация живого сайта repremium.ru Структура/принципы: Apple Human Interface Guidelines Шрифты: Manrope (body), Bounded (display) ============================================================ */ :root{ /* —— COLOR · текст (ink) —— */ --color-ink: #111111; /* основной текст */ --color-ink-2: #6a6a6a; /* вторичный */ --color-ink-3: #9291a1; /* третичный/placeholder */ --color-on-action: #ffffff; --color-on-dark: #f9f9fb; /* —— COLOR · поверхности —— */ --color-canvas: #f9f9fb; /* фон страницы */ --color-surface: #ffffff; /* карточки/панели */ --color-surface-2: #f1f1f4; /* подложка */ --color-line: #c7c6cc; /* границы/разделители */ /* —— COLOR · бренд-акценты —— */ --color-action: #e81717; /* ОСНОВНОЙ CTA (красный) */ --color-action-600: #c81212; /* hover/pressed */ --color-action-tint:#fde7e9; /* мягкая красная подложка */ --color-accent: #6f42f5; /* фиолетовый акцент (ссылки, выделение) */ --color-accent-tint:#efeaff; --color-warm-tint: #ffefe6; /* тёплая подложка hero-карточек */ /* —— COLOR · тёмные поверхности (футер/тёмные секции) —— */ --color-dark: #1e1b35; --color-dark-2: #121020; --color-navy: #262343; /* —— MATERIAL · металлики/спот-цвета для ПЕЧАТИ и физических носителей —— НЕ для экранного UI (там — палитра --color-* выше). Approved владельцем 14.09.2026. Silver/Gold металлики берутся как color-mix от --color-line / --color-warning; графит VIP — бренд-металлик, чисто из палитры не выводится, поэтому закреплён явно (пара к Pantone 432 C + софт-тач). Применение: макеты карт клуба (kp_karty.py). */ --material-graphite: #4b4f58; --material-gold: #c9a227; /* —— COLOR · статусы (выведены под бренд, согласовать) —— Яркий цвет (success/warning/danger) — для точек/заливок/индикаторов. -tint — мягкая подложка бейджа; -ink — читаемый ТЕКСТ на светлом/тинте (контраст AA ≥ 4.5:1). Для danger как ТЕКСТ на светлом используй --color-action-600. */ --color-success: #1faa59; --color-success-tint:#e9f7ef; /* мягкая зелёная подложка */ --color-success-ink: #15803d; /* success как текст (AA) */ --color-warning: #f5a623; --color-warning-tint:#fff3e0; /* мягкая янтарная подложка */ --color-warning-ink: #8a5a00; /* warning как текст (AA) */ --color-danger: #e81717; --color-danger-tint: #fde7e9; /* = --color-action-tint (danger == action) */ /* —— BRAND · внешние площадки-источники трафика —— Фирменные цвета ЧУЖИХ платформ (ВКонтакте, Авито, Яндекс, Вебмастер) для тегов-источников трафика (напр. монитор monitor.reprem.ru: .tag-vk/.tag-avito/ .tag-webmaster/.tag-metrika/.tag-direct). Это НЕ бренд re:premium — чужие бренды, поэтому вынесены отдельно от --color-*. Узаконены как токены, чтобы design-lint признавал их hex и был единый источник. Пара fg/-bg (текст / мягкая подложка). Яндекс (Метрика+Директ) рисуется НАШИМ красным → маппится на --color-action, отдельного красного не заводим. На тёмных поверхностях подложку берут translucent, а fg — осветлённую ступень (в комментарии dark:), это задаёт ПОТРЕБИТЕЛЬ в своей тёмной теме (см. base.html монитора, [data-theme="dark"]). Значения фирменные — синхронизация от площадок, не от Figma. См. components.md → «Бренд-теги площадок». */ --brand-vk: #4A76A8; --brand-vk-bg: #EEF2FF; /* dark: fg #7FA6D6 / bg rgba(74,118,168,.22) */ --brand-avito: #00A650; --brand-avito-bg: #EDFAF3; /* dark: fg #37C480 / bg rgba(0,166,80,.20) */ --brand-webmaster: #3F51B5; --brand-webmaster-bg: #F0F4FF; /* dark: fg #8B97E5 / bg rgba(63,81,181,.26) */ --brand-yandex: var(--color-action); --brand-yandex-bg: var(--color-action-tint); /* —— TYPOGRAPHY —— */ --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Bounded", "Manrope", var(--font-sans); --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* код, идентификаторы в документах */ --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; /* шкала (по мотивам Apple type scale) */ --text-caption:12px; --text-footnote:13px; --text-subhead:14px; --text-body:16px; --text-callout:18px; --text-title3:20px; --text-title2:24px; --text-title1:32px; --text-large:40px; --text-display:56px; --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.5; /* —— RADIUS (мягкая геометрия repremium) —— */ --radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px; --radius-pill:9999px; /* —— SPACING · 8pt grid (Apple) —— */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-8:48px; --space-10:64px; /* —— ELEVATION —— */ --shadow-sm:0 2px 8px rgba(17,17,17,.06); --shadow-md:0 8px 30px rgba(17,17,17,.10); --shadow-lg:0 20px 60px rgba(17,17,17,.14); /* —— CONTROL (Apple: hit-area ≥44px) —— */ --control-h:48px; --control-h-sm:40px; --hit-min:44px; /* compact: плотные data-интерфейсы (задачник/backlog/таблицы), desktop-first */ --control-h-compact:32px; --dur-fast:.15s; --dur-base:.22s; --ease:cubic-bezier(.4,0,.2,1); /* —— DATAVIZ · категориальная палитра рядов графиков —— Для мультирядовых графиков (напр. Лента отзывов: отзывы/позитив/негатив/ заявки/продажи). Это НЕ статусы — слоты категориальной палитры, цвет закреплён за рядом и не перекрашивается при выключении соседа. Полный набор из 5 цветов, прогнан валидатором dataviz (светлота, цветность, контраст, различимость при дальтонизме — PASS; единственный WARN: янтарный↔зелёный ΔE 6.6 при протанопии — допустимо при вторичном кодировании: легенда + подсказка + режим «Таблицей»). Первые 4 переиспользуют статус-акценты, 5-й — собственный синий слот. Ряд→токен: Отзывы → --color-accent(#6f42f5), Позитив → #1a7a3e, Негатив → #c81e1e, Продажи → #b5790f, Заявки → --series-blue. Синий заведён отдельно, т.к. семантики статуса не несёт. */ --series-blue: #0284c7; /* —— DATAVIZ · категориальная палитра дата-дашбордов marketing-monitor —— Префикс --chart-cat-* . Отдельный от «Ленты отзывов» набор: плотные data-дашборды монитора (monitor.reprem.ru) со СВОИМ токен-слоем (Inter, --tx-* / --bg-*, светлая+тёмная темы) — там базовая --color-* / Manrope не применяется. Значения канонизированы здесь, чтобы design-lint признавал их hex и палитра имела единый источник правды; синхронизация — от base.html монитора, прогон scripts/validate_palette.js (светлотная полоса, порог цветности, CVD-разделение соседних пар, контраст к поверхности) — PASS. Порядок стека фиксирован (цвет закреплён за смыслом, не за местом в легенде): cat-1 red · cat-2 = --color-accent · cat-3 amber · cat-4 teal · cat-5 magenta. Это НЕ статусы: teal (cat-4) стоит рядом с amber (cat-3), различим при дальтонизме; вторичное кодирование — легенда + чипы + режим «Таблицей». cat-5 (magenta #9C1F8C) — 5-й слот, заведён 18.09.2026 под подсветку строк таблицы по 5 равноправным ответственным. Прогнан симуляцией CVD (Machado 2009, протан/дейтеранопия): различимость ΔE00 ≥ 13 от каждого из 4 соседей при обоих типах, контраст как ТЕКСТ на --color-surface = 7.0:1 (AA/AAA). Magenta, а не синий: синий сливается с cat-2 (фиолетовый уходит в синий при CVD, ΔE ~6). Тёмная тема — своя ступень против тёмной поверхности (см. ниже), задаётся в base.html монитора через [data-theme="dark"]. */ --chart-cat-1: #C0182A; /* dark: #E8536A */ --chart-cat-2: #6F42F5; /* = --color-accent; dark: #8E6EE8 */ --chart-cat-3: #B8690A; /* dark: #B8761C */ --chart-cat-4: #008C7A; /* teal; dark: #1FA593 */ --chart-cat-5: #9C1F8C; /* magenta; dark: #C25AB0 */ /* cat-6 (azure #1E88D8) — 6-й слот, заведён 22.09.2026 под ВТОРОЙ производный ценовой ряд графика «Динамика по дням» (direct.reprem.ru): «Цена продажи» (расход/продажи). Default-OFF (одновременно горят максимум 4 линии). Прогнан scripts/validate_palette.js на наборе из 6 в КАНОН-методе chart-cat (adjacent, как и отгруженная пятёрка): ALL CHECKS PASS — cat-6 не входит ни в одну слабую пару, единственная слабая пара набора (red↔amber, all-pairs) предсуществует и от cat-6 не зависит. Синий, а НЕ зелёный: зелёный сталкивается с teal cat-4 даже для нормального зрения (ΔE 7.9), синий же держит normal-floor. Оттенок #1E88D8 (не --series-blue #0284c7 и не насыщённый синий): отстроен разом от purple cat-2 (deutan ΔE 9.1, PASS) и teal cat-4 (normal ΔE 15.3, PASS). Пара blue↔purple под CVD живёт в WARN-полосе — легально при вторичном кодировании (чип легенды + подсказка с названием ряда) и усилено тем, что ряд default-off. */ --chart-cat-6: #1E88D8; /* azure; dark: #4098DE */ /* —— DATAVIZ · tint-ступени категориальной палитры (мягкие подложки) —— Заведены 18.09.2026 единообразно для всех 5 категорий по образцу --color-accent-tint. Назначение: мягкая подложка СТРОКИ таблицы, на которой читается обычный текст --color-ink (контраст ink к каждому tint ≈ 16:1, AAA). cat-2-tint = --color-accent-tint (cat-2 == --color-accent). Это НЕ первичный код категории (пастель, при CVD tint-ы сближаются) — первичный носитель смысла остаётся чип с цветом --chart-cat-N + подпись. */ --chart-cat-1-tint: #fbe8ea; --chart-cat-2-tint: #efeaff; /* = --color-accent-tint */ --chart-cat-3-tint: #fdf0dd; --chart-cat-4-tint: #e0f5f1; --chart-cat-5-tint: #f8e6f4; --chart-cat-6-tint: #e4f0fc; /* azure tint, пара к --chart-cat-6 */ /* —— DATAVIZ · СДЕРЖАННАЯ категориальная палитра «ответственный/владелец» —— Префикс --cat-muted-* . Заведена 18.09.2026 по обратной связи владельца: яркий набор --chart-cat-* на деловом ОТЧЁТЕ (подсветка строк таблицы по 5 ответственным) читался как «радуга». Это отдельный набор ИМЕННО для категории-владельца в деловых таблицах/карточках; --chart-cat-* НЕ трогаем — он нужен ярким линиям графиков монитора. Характер: приглушённые «пыльные» тона близкой насыщенности (C* ≈ 28..34) — спокойный, деловой вид, но всё ещё различимые, в т.ч. при дальтонизме. Порядок закреплён за смыслом, не за местом: 1 терракота · 2 охра · 3 тил · 4 сине-стальной · 5 слива. Контраст каждого основного как МЕЛКИЙ ТЕКСТ на --color-surface (белый): 4.6..6.5:1 (AA) — годится и для подписи, и для тонкой вертикальной полосы-акцента слева у строки/карточки. CVD (Machado 2009, протанопия/дейтеранопия): минимальный ΔE00 между любой парой = 12.4 (лимитирует 4↔5), т.е. пять тонов остаются различимы; всё равно кодируем вторично — полоса + чип с подписью ответственного. Тёмная тема — своя светлая ступень (L*≈70, контраст 7.2:1 к --color-dark), см. cat-muted-dark в tokens.json; включать через [data-theme="dark"]. */ --cat-muted-1: #8B4D43; /* терракота; dark: #E0998D */ --cat-muted-2: #8B723B; /* охра; dark: #C4A86E */ --cat-muted-3: #3B7E67; /* тил; dark: #75B89F */ --cat-muted-4: #5A75AE; /* сине-стальной; dark: #92AAE7 */ --cat-muted-5: #844B76; /* слива; dark: #D698C6 */ /* —— DATAVIZ · tint-подложки сдержанной палитры (единое полотно) —— ОЧЕНЬ светлые и близкие по светлоте (L* ≈ 96.2..96.4, разброс 0.3) — таблица читается как единое полотно, а не набор цветных строк. Обычный тёмный текст --color-ink на каждой ≈ 17:1 (AAA). Это НЕ код категории (при CVD tint-ы почти сливаются) — первичный носитель смысла остаётся вертикальная полоса --cat-muted-N слева + чип с подписью. */ --cat-muted-1-tint: #fef2f0; --cat-muted-2-tint: #fbf3e7; --cat-muted-3-tint: #e7f8f1; --cat-muted-4-tint: #f1f4ff; --cat-muted-5-tint: #fff1fa; /* ============================================================ ЛЕГАСИ-ПАЛИТРА «Аналитики» платформы Авито (avito.reprem.ru/analytics) Префикс --av-* . Копия значений из index.css/Analytics.css платформы, канонизирована для ТОЧНОГО (1:1) повторения таблицы статистики — прямое требование владельца (Илья, 07.09.2026: «точь в точь как аналитика платформы»). Область применения: ТОЛЬКО data-таблицы, реплицирующие «Аналитику» платформы. НЕ использовать в новом UI — там действует основная палитра --color-* выше. Значения зафиксированы здесь, чтобы design-lint признавал их hex. Синхронизация — от платформы Авито, а не от Figma. См. components.md → «Легаси data-таблица „Аналитика платформы"». ============================================================ */ --av-bg-main:#F9F9FB; --av-bg-white:#FFFFFF; --av-bg-hover:#F4F4F8; --av-tx-primary:#262343; --av-tx-secondary:#5C5A72; --av-tx-tertiary:#9291A1; --av-border:#E7E7EF; --av-border-light:#F0F0F4; --av-primary:#E81717; --av-primary-tint:#FDE7E9; --av-ok:#1a7a3e; --av-ok-bg:#e6f6ec; --av-blue-bg:#EEF4FF; --av-blue-label:#dde8ff; --av-blue-total:#d6e4ff; --av-blue-tx:#3a5fd9; --av-red-label:#f9d4d4; --av-red-total:#f5c0c0; --av-green-label:#cdead8; --av-green-total:#bfe4cd; --av-total-bg:#f4f3fa; --av-col-hover:#eef1f8; --av-col-picked:#e4e9f7; --av-fs-cap:11px; --av-fs-sm:12px; --av-fs-tbl:13.5px; --av-fs-h3:15px; --av-radius-lg:16px; /* stroke-цвета recharts-линий «Аналитики» платформы (Analytics.jsx, строки ~382-386). Та же область применения: ТОЛЬКО графики, реплицирующие «Аналитику» платформы. */ --av-chart-blue:#4a7cf6; --av-chart-green:#2e9e5b; --av-chart-red:#e05050; --av-chart-dark:#262343; --av-chart-gray:#9aa0b4; --av-chart-gold:#c47f18; /* ============================================================ ТОКЕН-СЛОЙ marketing-monitor (monitor.reprem.ru). Префикс --mm-* . Data-дашборд со СВОИМ слоем (шрифт Inter, семантические имена --accent / --tx-* / --bg-* / --good/--warn/--bad / --chart-* / --sb-*, светлая + тёмная темы). Базовая палитра --color-* / Manrope тут НЕ применяется. Значения канонизированы здесь (единый источник, allowlist design-lint); base.html монитора держит их инлайн-зеркало (страница самодостаточна, tokens.css не подгружает) и ссылается на семантику через var(--mm-*). Синхронизация — от base.html монитора. Тёмные ступени — суффикс -dark (в base.html активируются через [data-theme="dark"], переопределяя --mm-* базу; семантические алиасы var(--mm-*) подхватывают их сами). Экранная палитра, НЕ печать; не для нового UI вне монитора (там --color-*). См. components.md → «Токен-слой marketing-monitor». ============================================================ */ /* Акцент (красный монитора). ВНИМАНИЕ: #E8192C ≠ бренд --color-action #e81717 — это исторический красный монитора, сохранён точь-в-точь; кандидат на сведение к --color-action решением владельца, пока НЕ снапаем. */ --mm-accent: #E8192C; --mm-accent-hover: #C8101F; --mm-accent-tint: var(--color-action-tint); /* #fde7e9 */ --mm-accent-on: var(--color-on-action); /* #fff */ --mm-accent-dark: #FF5A66; --mm-accent-hover-dark: #FF7079; --mm-accent-on-dark: #1A1622; /* Текст (иерархия, индиго-нав) */ --mm-tx-primary: var(--color-navy); /* #262343 */ --mm-tx-secondary: #5C5A72; --mm-tx-tertiary: var(--color-ink-3); /* #9291a1 */ --mm-tx-quaternary: #BFBECB; --mm-tx-on-dark: #F2F2F5; --mm-tx-primary-dark: #ECEBF2; --mm-tx-secondary-dark: #A9A8BC; --mm-tx-tertiary-dark: #76748A; --mm-tx-quaternary-dark:#54526A; /* Поверхности (3 уровня глубины + фон сайдбара всегда-тёмный) */ --mm-bg-canvas: #F4F4F6; --mm-bg-surface: var(--color-surface); /* #fff */ --mm-bg-surface-2: #F7F7F9; --mm-bg-sidebar: #1A1A1A; --mm-bg-sidebar-active: #252525; --mm-bg-canvas-dark: var(--color-dark-2); /* #121020 */ --mm-bg-surface-dark: #1A1A1A; --mm-bg-surface-2-dark: #232233; --mm-bg-sidebar-dark: #0E0C18; /* Статусы (контраст текста на белом ≥ 4.5:1; светлая + тёмная ступени) */ --mm-good: #1F7A33; --mm-good-bg: #E3F6E6; --mm-good-dark: #5DD27A; --mm-warn: #9A4E00; --mm-warn-bg: #FCEFDD; --mm-warn-dark: #F0A742; --mm-bad: var(--chart-cat-1); /* #C0182A, красный-статус как ТЕКСТ (AA на белом) */ --mm-bad-dark: #FF6B78; /* График: линия сетки Chart.js (светлая; в тёмной — translucent rgba в base.html) */ --mm-chart-grid: #F0F0F0; /* Сайдбар — самостоятельная ВСЕГДА-ТЁМНАЯ поверхность (не зависит от темы) */ --mm-sb-separator: #2E2E2E; --mm-sb-tx: #D6D6D6; --mm-sb-tx-strong: #E8E8E8; --mm-sb-tx-group: #E1E1E1; --mm-sb-tx-user: #ccc; --mm-sb-tx-cap: #8A8A8A; --mm-sb-tx-muted: #666; --mm-sb-tx-dim: #555; /* Доп. семантика: глубокий синий «входящее направление» (страница «Монитор звонков») */ --mm-info: #1E4D7B; /* Мягкая красная рамка error-бокса (страница входа /login) */ --mm-danger-border: #FFCDD2; /* Линейные графики «Вебмастера» (страница /seo, Chart.js): собственный категориальный набор клики/показы/позиции/страницы/HTTP-коды. Сохранён точь-в-точь (владелец «не менять визуально»); КАНДИДАТ на сведение к общей dataviz-палитре --chart-cat-* решением владельца. red-слот = --mm-accent. */ --mm-wm-blue: #3b82f6; --mm-wm-green: #10b981; --mm-wm-orange: #f59e0b; --mm-wm-gray: #94a3b8; /* —— marketing-monitor · палитра Material Web (@material/web) —— Страницы sales_1c/all_leads/ad_expenses (.s1-page/.al-page/.mm-mvp) темизируют сторонние MWC-компоненты через контракт --md-sys-color-* (Material Design 3). Это ФИКСИРОВАННАЯ светлая тональная палитра Material (контрастные пары on-*), сохранена точь-в-точь как узаконенное component-исключение (по образцу --av-*). Совпадающие роли берут общий монитор-токен: primary = --mm-accent, primary-container = --color-action-tint, secondary = --mm-tx-secondary, success-container = --mm-good-bg. Ниже — только собственные тона Material. */ --mm-md-on-primary-container: #650511; --mm-md-on-secondary-container: #22213A; --mm-md-surface-container-low: #FBFCFD; --mm-md-surface-container: #F4F5F7; --mm-md-surface-container-high: #EBEEF2; --mm-md-on-surface: #1D1B20; --mm-md-on-surface-variant: #5F5D6B; --mm-md-outline: #9A98A6; --mm-md-outline-variant: #DADCE3; --mm-md-on-success-container: #155C26; --mm-md-neutral-container: #EEF1F5; --mm-md-error: #B3261E; }