:root { /* ── Ширина страниц ───────────────────────────── */ /* Таблицы, сетки и дашборды тянутся до края рабочей области (её ограничивает dsp-root, 1920). Читаемый текст держит ширину строки через --read-max на абзацах, а не на контейнере страницы. */ --page-max: none; --read-max: 68ch; /* ── Brand palette ────────────────────────────── */ --navy: #09183F; /* --navy как ЦВЕТ ТЕКСТА. Токен спрашивают 16 файлов, а определён он не был нигде — каждое место молча рисовало свой запасной хекс, и в тёмной теме это тёмно-синий по тёмному фону. ThemeService перекрывает его accentText'ом; здесь — значение до его запуска. */ --navy-text: #00749F; --navy-light: #EAF6FB; --blue-btn: #00C2FF; --red-dot: #FF6B5A; /* Текст на --red-dot (точка уведомлений): тёмный, 6,2:1 к #FF6B5A и 4,8:1 к #F74522. */ --red-dot-text: #09183F; /* ── Surface & background ─────────────────────── */ --bg: #F3F6FA; --surface: #FFFFFF; /* Наведение на строку/пункт. В светлой теме токена не было вовсе (был только в тёмной), и компоненты писали своё запасное значение. */ --surface-hover: #EAF0F6; --border: #DCE3EC; --chip-bg: #DCE3EC; /* Skeleton shimmer tones (.dsp-skel, .kpi-skeleton). Were referenced with light fallbacks only, so placeholders flashed white in dark mode. */ --skel-1: #EAEDF1; --skel-2: #DDE2E8; /* Облачко подсказки графика: тёмное в обеих темах, в тёмной — на тон светлее карточки, иначе сливается с ней. */ --tooltip-bg: #1F2937; /* ── Text ─────────────────────────────────────── */ --text: #09183F; --text-muted: #4D5B76; /* ── Radius & shadow ──────────────────────────── */ --radius: 8px; --radius-sm: 4px; --radius-pill: 999px; --radius-lg: 12px; /* Плашка под логотип агентства: белая в обеих темах, чтобы тёмные знаки не пропадали. */ --logo-plate: #FFFFFF; --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow: 0 2px 8px rgba(0,0,0,.10); /* ── Layout ───────────────────────────────────── */ --sidebar-w: 148px; /* Телефон: высоты верхней строки и нижней панели разделов вместе с безопасными зонами. Раньше 56px были вписаны в четырёх файлах по отдельности, и подпирающий контент разъезжался, стоило поменять панель в одном из них. */ --m-top-h: calc(52px + env(safe-area-inset-top)); --m-bar-h: calc(60px + env(safe-area-inset-bottom)); /* ── Legacy / component aliases ──────────────── */ --primary-color: #00749F; --secondary-color: #4D5B76; --scroll-bar-color: #09183F; --label-color: #4D5B76; --additional-label-color: #9DA9BB; --input-border-color: #DCE3EC; --input-border-error-color: #ef4444; --input-required-mark-color: #ef4444; --button-background-color: #00C2FF; --button-color: #09183F; --danger-color: #ef4444; /* Четыре места в мастере и карточке креатива пишут var(--danger, …) и var(--danger-light, …), а таких токенов не было — каждое молча рисовало свой запасной хекс. Тинт важнее красного: #FEE4E2 это бледно-розовая подложка hover, на тёмной теме она светится пятном. */ --danger: #ef4444; --danger-light: #FEE4E2; --warning-color: #f59e0b; --badge-color: #16a34a; --table-header-color: #F9FAFB; --table-even-row-color: #F9FAFB; --table-focus-color: #00C2FF; --table-not-editable-color: #f97316; --ag-checkbox-checked-color: #09183F; --checkbox-background-color: #09183F; --statistics-count-color: #16a34a; --statistics-count-second-color: #f59e0b; /* Semantic badges: saturated colour on a translucent fill works on both light and dark surfaces without producing pale solid rectangles. */ --status-success-bg: rgba(34, 197, 94, .22); --status-success-text: #136F36; --status-warning-bg: rgba(245, 158, 11, .24); --status-warning-text: #92400E; /* Ярусы оценок экранов: жёлтый и оранжевый между зелёным и красным. */ --score-high: #A16207; --score-mid: #C2410C; --status-danger-bg: rgba(239, 68, 68, .22); --status-danger-text: #B91C1C; --status-info-bg: rgba(59, 130, 246, .20); --status-info-text: #1D4ED8; --status-neutral-bg: rgba(100, 116, 139, .18); --status-neutral-text: #475569; --status-purple-bg: rgba(139, 92, 246, .20); --status-purple-text: #6D28D9; /* Заливки статусов — для полос и шкал, где цвет занимает площадь, а не буквы. Текстовые токены (--status-*-text) для этого слишком тёмные: жёлтая полоса темпа выходила тёмно-янтарной. */ --status-success-fill: #22C55E; --status-warning-fill: #F59E0B; --status-danger-fill: #EF4444; --status-info-fill: #3B82F6; /* Плашка ошибки (сохранение, запуск в мастере). Светлые значения — прежние зашитые цвета плашки; --status-danger-bg на белом дал бы другой оттенок. */ --alert-danger-bg: #fef2f2; --alert-danger-border: #fecaca; --alert-danger-text: #ef4444; /* Наведение и выбор поверх плашки (строка экрана без трафика). */ --alert-danger-bg-strong: #FEE2E2; /* New-component aliases — keep the parallel design system on the same light/dark surfaces instead of falling back to hardcoded light values. */ --color-background-primary: var(--surface); --color-background-secondary: var(--bg); --color-border-secondary: var(--border); --color-text-primary: var(--text); --color-text-secondary: var(--text-muted); --color-text-tertiary: var(--additional-label-color); /* ── Logo ─────────────────────────────────────── */ --logo-path: url("/assets/images/logo.png"); --logo-width: 110px; --logo-height: 32px; /* ── Typography ───────────────────────────────── */ --default-font-family: 'Open Runde', -apple-system, 'Segoe UI', sans-serif; --theme-font-family: 'Open Runde', -apple-system, 'Segoe UI', sans-serif; --mono-font-family: 'Geist Mono', ui-monospace, monospace; /* ── Footer ───────────────────────────────────── */ --footer-text: "Omni360"; } /* ── Dark theme ─────────────────────────────────────── Overrides the surface/text tokens above when the user turns on dark mode (ThemeService stamps data-theme="dark" on ). --navy/--navy-light/ --blue-btn are left alone — they're the user's chosen accent (button/active backgrounds), which still reads fine on a dark page; only the neutral surface/border/text tokens actually need a dark variant. Components that use --navy as TEXT colour on a transparent background may still read low- contrast here — that needs per-component follow-up as it's found, a full contrast audit of every screen isn't done in this pass. */ :root[data-theme="dark"] { /* Тинт опасности: светлый #FEE4E2 на тёмном фоне читается как подсветка. */ --danger-light: rgba(239, 68, 68, .22); color-scheme: dark; --bg: #060E26; --surface: #0D1A3B; --surface-hover: #13224A; /* Softer, translucent instead of a solid hex — blends into the dark background rather than reading as a hard box edge everywhere (segmented pills, filter panels, card outlines). */ --border: #1E2C52; --chip-bg: rgba(255,255,255,.06); --skel-1: rgba(255,255,255,.05); --skel-2: rgba(255,255,255,.11); --tooltip-bg: #1E2C52; --text: #E8EEF8; --text-muted: #97A3BC; --secondary-color: #97A3BC; --label-color: #97A3BC; --additional-label-color: #6B7280; --input-border-color: #1E2C52; --table-header-color: #0D1A3B; --table-even-row-color: #0D1A3B; --shadow-sm: 0 1px 3px rgba(0,0,0,.32); --shadow: 0 2px 10px rgba(0,0,0,.38); --status-success-bg: rgba(34, 197, 94, .28); --status-success-text: #86EFAC; --status-warning-bg: rgba(245, 158, 11, .28); --status-warning-text: #FCD34D; --score-high: #FCD34D; --score-mid: #FB923C; --status-danger-bg: rgba(239, 68, 68, .28); --status-danger-text: #FCA5A5; --status-info-bg: rgba(59, 130, 246, .26); --status-info-text: #93C5FD; --status-neutral-bg: rgba(148, 163, 184, .20); --status-neutral-text: #CBD5E1; --status-purple-bg: rgba(139, 92, 246, .28); --status-purple-text: #C4B5FD; --status-success-fill: #4ADE80; --status-warning-fill: #FBBF24; --status-danger-fill: #F87171; --status-info-fill: #60A5FA; --alert-danger-bg: rgba(239, 68, 68, .16); --alert-danger-border: rgba(239, 68, 68, .40); --alert-danger-text: #FCA5A5; --alert-danger-bg-strong: rgba(239, 68, 68, .26); }