/* ───────────────────────────────────────────────────────────────────────────── Тема инстанса «Арифметрикс» (арифметрикс.рф). Кладётся вместо src/assets/theme/config.css при сборке этого инстанса. Палитра снята с логотипа и сайта: красный #C42029 (знак «А1»; кнопки сведены к нему 16.10, белый текст на нём 5,9:1), графит #2F2F2F (шапка сайта), чёрный текст. Логотипы, фавикон и красный кот-помощник лежат рядом, в assets/theme/, и тема сразу на них ссылается; надписи на плашке поэтому не нужны. ──────────────────────────────────────────────────────────────────────── */ :root { /* ── Brand palette ────────────────────────────── */ --navy: #C42029; /* красный: кнопки, активные пункты, акценты */ --navy-light: #FCE8E8; /* его светлая подложка: выделенные строки */ --blue-btn: #2F2F2F; /* графит: второстепенный акцент, как шапка сайта */ --red-dot: #C42029; /* ── Плашка бренда ────────────────────────────── */ /* Логотип «Арифметрикс» вместо зашитого «Omni 360». На входе — полный, с подписью «рекламная онлайн-платформа» (logo-login.png, 3,3:1); в левой панели и в верхней строке телефона — только знак и слово (logo.png, 4,7:1). Плашки подогнаны под пропорции, иначе логотип сжимается и подпись перестаёт читаться. */ --brand-logo: url("/assets/theme/images/logo.png"); --brand-logo-login: url("/assets/theme/images/logo-login.png"); --brand-logo-bg: transparent; --brand-text-display: none; /* прячет зашитое «Omni 360» */ --brand-logo-w: 240px; --brand-logo-h: 72px; --brand-logo-sidebar-w: 124px; --brand-logo-sidebar-h: 26px; /* ── Кот-помощник ─────────────────────────────── */ /* Те же кадры, перекрашенные в красный логотипа (#C42029), лежат в assets/theme/buddy/. Синий ореол вокруг красного кота смотрится чужим — тень тёплая, графитовая. */ --buddy-sprites: "/assets/theme/buddy/"; --buddy-glow: drop-shadow(0 4px 7px rgba(43, 42, 41, .32)) drop-shadow(0 0 2px rgba(196, 32, 41, .45)); /* ── Surface & background ─────────────────────── */ --bg: #F3F5F7; --surface: #FFFFFF; --border: #E3E8ED; --chip-bg: #E3E8ED; /* 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; /* ── Text ─────────────────────────────────────── */ --text: #121212; --text-muted: #606771; /* ── Radius & shadow ──────────────────────────── */ --radius: 8px; --radius-sm: 6px; --radius-pill: 999px; --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: #322452; --secondary-color: #606771; --scroll-bar-color: #2F2F2F; --label-color: #606771; --additional-label-color: #9DA9BB; --input-border-color: #E3E8ED; --input-border-error-color: #ef4444; --input-required-mark-color: #ef4444; --button-background-color: #322452; --button-color: #ffffff; --danger-color: #ef4444; /* Мастер и карточка креатива пишут var(--danger, …) и var(--danger-light, …): без этих токенов подсветка ошибок падала на запасной цвет и в тёмной теме светилась белым (в общей теме добавлены 22.09). */ --danger: #ef4444; --danger-light: #FEE4E2; --warning-color: #f59e0b; --badge-color: #16a34a; --table-header-color: #F9FAFB; --table-even-row-color: #F7F5FA; --table-focus-color: #C42029; --table-not-editable-color: #f97316; --ag-checkbox-checked-color: #322452; --checkbox-background-color: #322452; --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: #15803D; --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; /* 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/theme/images/logo.png"); --logo-width: 110px; --logo-height: 32px; /* ── Typography ───────────────────────────────── */ --default-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --theme-font-family: 'Inter', sans-serif; /* ── Footer ───────────────────────────────────── */ --footer-text: "Арифметрикс"; /* Добавлено по списку токенов основного config.css (тест css-tokens). */ --navy-text: #C42029; --surface-hover: #F3F4F6; --tooltip-bg: #1F2937; --alert-danger-bg: #fef2f2; --alert-danger-border: #fecaca; --alert-danger-text: #ef4444; --alert-danger-bg-strong: #FEE2E2; } /* ── 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; /* Слово логотипа графитовое и на тёмном фоне пропадает — тут тот же логотип со светлым словом, красный знак не меняется. */ --brand-logo: url("/assets/theme/images/logo-dark.png"); --brand-logo-login: url("/assets/theme/images/logo-login-dark.png"); --bg: #10131C; --surface: #1B1F2B; --surface-hover: rgba(255,255,255,.06); /* 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: rgba(255,255,255,.12); --chip-bg: rgba(255,255,255,.06); --skel-1: rgba(255,255,255,.05); --skel-2: rgba(255,255,255,.11); --text: #E7E9EE; --text-muted: #98A0B3; --secondary-color: #98A0B3; --label-color: #98A0B3; --additional-label-color: #6B7280; --input-border-color: rgba(255,255,255,.12); --table-header-color: #1B1F2B; --table-even-row-color: #20263A; --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; /* Добавлено по списку токенов основного config.css (тест css-tokens). */ --tooltip-bg: #343D52; --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); }