/* ============================================================
Marketplace-Assist — Единая тема
Подключить:
Содержит CSS-переменные для тёмной и светлой тем.
Управляется через app-settings.js (атрибут data-theme на ).
============================================================ */
/* === Spacing и Typography (общие для обеих тем) === */
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-pill: 9999px;
/* === Канон геометрии таблиц (ЕДИНЫЙ ИСТОЧНИК для ВСЕХ движков, 2026-06-12) ===
Размеры (НЕ цвета) — одинаковы в обеих темах, поэтому в общем :root.
Эталон = AG-Grid /analytics/. Эти токены потребляют ВСЕ табличные слои:
AG-Grid (aggrid-grouping.css), TableEngine (.te-table в base.css +
table-layout.css) и bespoke-таблицы (.data-table / .cat-table / payroll
и т.п.). Правка размера строки/шапки/шрифта таблицы = ОДНА строка здесь →
следуют все таблицы портала. */
--table-font-size: 13px; /* тело таблицы, нормальный режим */
--table-font-size-compact: 12px; /* тело таблицы, компактный режим */
--table-row-h: 34px; /* высота строки, нормальный режим */
--table-row-h-compact: 26px; /* высота строки, компактный режим */
--table-header-h: 32px; /* высота шапки (thead) */
/* === Бренд-цвет (ИДЕНТИЧНОСТЬ, фиксирован в обеих темах) ===
--brand = единый бренд-синий логотипа (= знак ICON_SVG #5b6ef5).
Намеренно ОТДЕЛЁН от --accent (интерактивный акцент UI, тюнингуется
по теме под контраст: #2563eb светлая / #6e80f7 тёмная).
Логотип-вордмарк «Ассист» использует --brand, чтобы знак и «Ассист»
были ОДНИМ синим везде. Канон 2026-06-07 (решение по drift знак↔accent). */
--brand: #5b6ef5;
--brand-gradient-end: #8b5cf6; /* конец градиента плитки знака */
}
/* === Тёмная тема === */
[data-theme="dark"] {
--bg: #0f1117;
--surface: #1a1d27;
--surface2: #242836;
--card: #1a1d27;
--border: #2d3140;
--text: #e4e6f0;
--text2: #9196ab;
--accent: #6e80f7;
--accent-primary: #6e80f7; /* alias of --accent (см. ADR-0017 Stage 2) */
--accent-hover: #8494f9;
--accent-light: rgba(110,128,247,0.12);
/* Мягкая акцентная подложка (кольцо/ободок активного эскиза в галерее фото,
лёгкая акцентная заливка). Светлее --accent-light, под рамку выбранного
эскиза в лайтбоксе фото (MA_AG_Photo, 2026-06-15). Тёмная тема. */
--accent-soft: rgba(110,128,247,0.22);
/* Затемнение-подложка модальных оверлеев/лайтбоксов (scrim). Единый токен для
фон-затемнения галереи фото и full-screen зума (MA_AG_Photo, 2026-06-15).
Тёмная тема плотнее (фон уже тёмный → нужно сильнее отделить контент). */
--scrim: rgba(0,0,0,0.76);
--on-accent: #ffffff; /* текст/иконка поверх заливки --accent (2026-05-31) */
/* Кольцо фокуса клавиатуры (:focus-visible) — единый токен a11y (№33, 2026-06-11).
Намеренно = --accent (тот же интерактивный акцент, что hover/border). Отдельный
токен, чтобы при необходимости подкрутить контраст кольца независимо от акцента.
Тёмная тема: #6e80f7 на --surface #1a1d27 ≈ 5.0:1 (WCAG AA для не-текстового UI ≥3:1). */
--focus-ring: var(--accent);
--row-highlight: rgba(110,128,247,0.18); /* фон выделенных строк (bulk select) */
--xlsx-highlight: #FFC107; /* жёлтый ARGB для подсветки в xlsx */
--edit-pending: rgba(234,179,8,0.18); /* фон ячейки во время сохранения inline-edit */
--edit-error: rgba(239,68,68,0.18); /* фон ячейки при ошибке inline-edit */
--code-number: #60a5fa;
--code-string: #34d399;
--green: #22c55e;
--yellow: #eab308;
--red: #ef4444;
--orange: #f97316;
--success: #22c55e;
--success-bg: rgba(34,197,94,0.1);
--error: #ef4444;
--error-bg: rgba(239,68,68,0.1);
--warning: #eab308;
--warning-bg: rgba(234,179,8,0.1);
--warning-border: rgba(234,179,8,0.3);
/* Горчичный маркер пользовательской (вычисляемой) колонки —
ADR-0029-v2 W1 §7. НЕ зелёный (heatmap --green), НЕ синий
(--accent expand/zebra), семантически разведён с --warning
(broken-operand). Dark: ярче/желтее, фон заметнее (тёмный фон
требует больше сигнала). Контраст #FBBF24 на --surface ≈ 9.8:1. */
--te-usercol-accent: #FBBF24;
--te-usercol-bg: rgba(251,191,36,0.12);
/* Тинт раскрытых групп колонок (aggrid-group-tint.js/css):
A — слабый акцентный синий, B — слабый зеленоватый нейтральный.
Очень мало альфы: только читаемость-подсказка, не визуальный шум. */
--ma-gt-a-cell: rgba(110,128,247,0.07);
--ma-gt-a-header: rgba(110,128,247,0.13);
--ma-gt-b-cell: rgba(52,211,153,0.07);
--ma-gt-b-header: rgba(52,211,153,0.13);
--radius: 10px;
--shadow: 0 2px 8px rgba(0,0,0,0.3);
/* Скроллбар — тёмная тема: тонтированный синеватый, не серый-белый ОС */
--scrollbar-thumb: rgba(110,128,247,0.35);
--scrollbar-thumb-hover: rgba(110,128,247,0.60);
--scrollbar-track: transparent;
/* === Семантические токены (рестайл-канон 2026-06-08) ===
decision id='hardcoded-colors', вариант='colors-tokens' (вердикт: 4 мало → 6).
Аддитивные алиасы поверх базовой палитры — единый смысловой слой для
прибыли/убытка/тепловой карты маржи/нейтрали. Цвет берётся из существующих
токенов; новые HEX НЕ вводим. Тёмная тема. */
--color-profit-pos: var(--success); /* прибыль · положит. значения */
--color-profit-neg: var(--error); /* убыток · отриц. значения */
--color-heat-high: color-mix(in srgb, var(--green) 16%, transparent); /* тепловая: высокая маржа (≥15%) */
--color-heat-mid: color-mix(in srgb, var(--yellow) 16%, transparent); /* тепловая: средняя маржа (0..15%) */
--color-heat-low: color-mix(in srgb, var(--red) 16%, transparent); /* тепловая: низкая / отриц. маржа */
--color-neutral: var(--text2); /* нейтрально · нет данных «—» */
/* === Гео-карта «География продаж» (choropleth, geo-map-spec §5.2) ===
Квантильная синяя монохром-шкала плотности заказов/выручки по регионам.
НЕ зелёный→красный (красный = «много» = хорошо для селлера → ложная семантика).
Δhue от --accent минимальный (тот же cool-синий). q0 = «нет данных / <порога».
Тёмная тема: интенсивность через альфу базового --accent #6e80f7. */
--geo-fill-q0: var(--surface2); /* нет данных (<3 заказов) */
--geo-fill-q1: rgba(110,128,247,0.15); /* нижний квантиль */
--geo-fill-q2: rgba(110,128,247,0.30);
--geo-fill-q3: rgba(110,128,247,0.50);
--geo-fill-q4: rgba(110,128,247,0.75);
--geo-fill-q5: rgba(110,128,247,0.95); /* densest */
--geo-border: rgba(255,255,255,0.06); /* тонкая граница полигона (тёмный фон) */
--geo-border-strong: rgba(255,255,255,0.40); /* hover/selected граница */
/* Объёмные грани регионов (3D-экструзия «приподнятая плита», 2026-06-20).
Тёмная тема: фон уже тёмный → грани почти чёрные с синевой, чтобы «край»
региона читался на тёмной поверхности. extrude-2 = нижний/дальний слой. */
--geo-extrude-1: rgba(0,0,0,0.72);
--geo-extrude-2: rgba(0,0,0,0.94);
/* === Цвета площадок для полосы «Баланс» (balance-column-spec §5.3) ===
Сегменты кросс-МП полосы продаж на «Все МП»: каждая площадка — свой
фирменный цвет. НЕ статусные токены (--success/--warning/--red — те для
вердикта «Ровно/Перекос»), а ИДЕНТИЧНОСТЬ площадки. Дизайн-surface: HEX
определяется ТОЛЬКО здесь (как --geo-fill-*), фронт берёт через var().
Тёмная тема: значения ОСВЕТЛЕНЫ относительно фирменных, чтобы оставаться
читаемыми на тёмной поверхности --surface #1a1d27 (особенно жёлтый ЯМ и
фиолетовый WB — тёмные фирменные на тёмном фоне сливаются).
Контраст к --surface #1a1d27 (не-текстовый UI, порог AA ≥3:1):
--mp-ozon #4d8bff ≈ 5.6:1 · --mp-wb #c95ce0 ≈ 5.4:1 · --mp-ym #ffce3a ≈ 11.8:1.
4-я площадка (будущая, напр. AliExpress) добавляется ПАРОЙ строк
--mp- в ОБЕ темы по тому же правилу (фирменный light / осветлённый dark). */
--mp-ozon: #4d8bff; /* Ozon — синий (фирм. #005bff, осветлён для тёмного фона) */
--mp-wb: #c95ce0; /* WB — фиолетово-маджента (фирм. #a020c0, осветлён) */
--mp-ym: #ffce3a; /* Яндекс Маркет — жёлтый (фирм. #f5b800, осветлён) */
}
/* === Светлая тема === */
[data-theme="light"] {
--bg: #f5f6fa;
--surface: #ffffff;
--surface2: #f0f1f5;
--card: #ffffff;
--border: #e0e3eb;
--text: #1a1d26;
--text2: #5f6575;
--accent: #2563eb;
--accent-primary: #2563eb; /* alias of --accent (см. ADR-0017 Stage 2) */
--accent-hover: #1d4ed8;
--accent-light: #eff6ff;
/* Мягкая акцентная подложка (кольцо/ободок активного эскиза в галерее фото,
лёгкая акцентная заливка). Светлая тема: чуть насыщеннее --accent-light. */
--accent-soft: rgba(37,99,235,0.18);
/* Затемнение-подложка модальных оверлеев/лайтбоксов (scrim). Светлая тема —
светлее тёмной (фон светлый → достаточно мягкого затемнения для фокуса). */
--scrim: rgba(14,17,26,0.66);
--on-accent: #ffffff; /* текст/иконка поверх заливки --accent (2026-05-31) */
/* Кольцо фокуса клавиатуры (:focus-visible) — единый токен a11y (№33, 2026-06-11).
Намеренно = --accent. Светлая тема: #2563eb на --surface #fff ≈ 5.2:1 (WCAG AA
для не-текстового UI ≥3:1 с запасом). */
--focus-ring: var(--accent);
--row-highlight: rgba(37,99,235,0.12); /* фон выделенных строк (bulk select) */
--xlsx-highlight: #FFC107; /* жёлтый ARGB для подсветки в xlsx */
--edit-pending: rgba(217,119,6,0.18); /* фон ячейки во время сохранения inline-edit */
--edit-error: rgba(220,38,38,0.18); /* фон ячейки при ошибке inline-edit */
--code-number: #2563eb;
--code-string: #059669;
--green: #16a34a;
--yellow: #d97706;
--red: #dc2626;
--orange: #ea580c;
--success: #16a34a;
--success-bg: #f0fdf4;
--error: #dc2626;
--error-bg: #fef2f2;
--warning: #d97706;
--warning-bg: #fffbeb;
--warning-border: #fde68a;
/* Горчичный маркер пользовательской (вычисляемой) колонки —
ADR-0029-v2 W1 §7. Жжёный сахар #B45309 (темнее/насыщеннее
--warning #d97706) — отличим от heatmap-зелёного (Δhue ~110°,
дальтоник-safe) и синего --accent. Контраст #B45309 на
--surface #fff ≈ 5.9:1 (AA), на --surface2 ≈ 5.4:1. */
--te-usercol-accent: #B45309;
--te-usercol-bg: rgba(180,83,9,0.07);
/* Тинт раскрытых групп колонок (aggrid-group-tint.js/css):
A — слабый акцентный синий, B — слабый зеленоватый нейтральный.
Очень мало альфы: только читаемость-подсказка, не визуальный шум. */
--ma-gt-a-cell: rgba(37,99,235,0.055);
--ma-gt-a-header: rgba(37,99,235,0.10);
--ma-gt-b-cell: rgba(5,150,105,0.055);
--ma-gt-b-header: rgba(5,150,105,0.10);
--radius: 10px;
--shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
/* Скроллбар — светлая тема: сдержанный серо-синий бордер-тон */
--scrollbar-thumb: rgba(95,101,117,0.35);
--scrollbar-thumb-hover: rgba(95,101,117,0.60);
--scrollbar-track: transparent;
/* === Семантические токены (рестайл-канон 2026-06-08) ===
Те же 6 токенов для светлой темы — значения наследуются от light-палитры
(--success/--error/--green/--yellow/--red/--text2). Контраст и насыщенность
уже подстроены под светлый фон в базовых токенах выше. */
--color-profit-pos: var(--success); /* прибыль · положит. значения */
--color-profit-neg: var(--error); /* убыток · отриц. значения */
--color-heat-high: color-mix(in srgb, var(--green) 16%, transparent); /* тепловая: высокая маржа (≥15%) */
--color-heat-mid: color-mix(in srgb, var(--yellow) 16%, transparent); /* тепловая: средняя маржа (0..15%) */
--color-heat-low: color-mix(in srgb, var(--red) 16%, transparent); /* тепловая: низкая / отриц. маржа */
--color-neutral: var(--text2); /* нейтрально · нет данных «—» */
/* === Гео-карта «География продаж» (choropleth, geo-map-spec §5.2) ===
Светлая тема: монохром-синий от --accent #2563eb. q0 = «нет данных».
Контраст текста на ступенях проверен в spec §5.2 (q1/q2 → тёмный текст,
q3-q5 → белый). HEX-значения определены ТОЛЬКО здесь (единый дизайн-surface). */
--geo-fill-q0: var(--surface2); /* нет данных (<3 заказов) */
--geo-fill-q1: #dbeafe; /* 3–10 */
--geo-fill-q2: #93c5fd; /* 11–30 */
--geo-fill-q3: #3b82f6; /* 31–80 */
--geo-fill-q4: #1d4ed8; /* 81–200 */
--geo-fill-q5: #1e3a8a; /* 200+ (densest) */
--geo-border: rgba(0,0,0,0.25); /* тонкая граница полигона (светлый фон) */
--geo-border-strong: rgba(0,0,0,0.55); /* hover/selected граница */
/* Объёмные грани регионов (3D-экструзия «приподнятая плита», 2026-06-20).
Светлая тема: грани тёмные (slate) — дают контраст и объём на светлом фоне. */
--geo-extrude-1: rgba(30,41,59,0.58);
--geo-extrude-2: rgba(15,23,42,0.80);
/* === Цвета площадок для полосы «Баланс» (balance-column-spec §5.3) ===
Светлая тема: ФИРМЕННЫЕ цвета площадок без осветления (на белом --surface
#ffffff фирменные значения читаемы и сохраняют узнаваемость бренда МП).
Контраст к --surface #ffffff (не-текстовый UI, порог AA ≥3:1):
--mp-ozon #005bff ≈ 4.9:1 · --mp-wb #a020c0 ≈ 5.9:1 · --mp-ym #f5b800 ≈ 1.6:1.
⚠️ Жёлтый ЯМ на белом фоне даёт <3:1 как заливка-на-белом — но в полосе
сегмент несёт собственную ширину (≥8%) и соседствует с другими сегментами/
рамкой --border, а не висит изолированно на белом; различимость площадки
обеспечивает И цвет, И позиция, И легенда «?» (a11y §13 — «не только цвет»).
Для текста ЯМ-долей фронт использует --text/--text2, НЕ заливку как цвет
текста. 4-я площадка добавляется парой строк --mp- по тому же правилу. */
--mp-ozon: #005bff; /* Ozon — фирменный синий */
--mp-wb: #a020c0; /* WB — фирменная фиолетово-маджента */
--mp-ym: #f5b800; /* Яндекс Маркет — фирменный жёлтый */
}