/* ═══════════════════════════════════════════════════════════════ CONTAB — Color Tokens (дизайн-система «Точка Роста», iOS Liquid Glass) Акцент: лайм CONTAB #AACF38 (hover #8DB82E, текст на светлом #5F7A1A). ⚠️ На лаймовых заливках текст ТЁМНЫЙ (#1A2405), не белый: #AACF38 на белом даёт ~1.6:1. Тёмная тема — [data-theme="dark"] на (механизм CONTAB). Для тематизации с повышением специфичности — :is(), НИКОГДА :where(). Внизу — легаси-алиасы CONTAB (--bg, --surface-2, --brand …): их используют 62 шаблона с extra_css, они обязаны резолвиться. ═══════════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { /* BRAND: primary = графит (кнопки, заголовки), НЕ акцентный цвет */ --brand-primary: #18181B; --brand-soft: #34343A; --ink: #111113; --ink-warm: #26262A; /* ACCENT — лайм CONTAB */ --accent: #AACF38; --accent-hover: #8DB82E; --accent-grad-2: #C6E06A; --accent-strong: #5F7A1A; /* текст/ссылки на светлом, ~5.1:1 */ --accent-soft: rgba(170, 207, 56, 0.14); --accent-text: #1A2405; /* тёмный ink на лаймовой заливке */ /* Нейтрали форм */ --form-input-bg: #F8F8F4; --form-input-bg-hover: #F1F1ED; --form-input-border: #E2E2DC; --form-focus-ring: rgba(170, 207, 56, 0.30); /* Поверхности */ --bg-canvas: #F7F8F9; --bg-surface: #FFFFFF; --bg-soft: #EFF0F2; --bg-elevated: #FFFFFF; --bg-paper: #F7F8F9; /* Сайдбар */ --side-bg: #FBFBFC; --side-border: #E7E8EB; --side-text: #52565E; --side-text-strong: #0E0F11; --side-muted: #868A92; --side-hover: #F0F1F3; --side-active: rgba(170, 207, 56, 0.16); /* iOS Liquid Glass. --app-bg заметно живее плоского градиента: аврора-подтоны (лайм / небесный / розовый) — чтобы сквозь стеклянные карточки контента было ВИДНО фон. Пресеты пикера — static/js/appbg.js. */ --app-bg: radial-gradient(90% 72% at 8% -6%, rgba(170,207,56,.20) 0%, rgba(170,207,56,0) 55%), radial-gradient(72% 60% at 102% 14%, rgba(112,156,255,.16) 0%, rgba(112,156,255,0) 60%), radial-gradient(64% 70% at 76% 104%, rgba(255,166,196,.13) 0%, rgba(255,166,196,0) 62%), linear-gradient(158deg, #F0F2F7 0%, #DFE4EE 100%); --glass-blur: 30px; --glass-sb: rgba(255, 255, 255, 0.55); --glass-chrome: rgba(255, 255, 255, 0.58); --glass-chrome-strong: rgba(255, 255, 255, 0.74); /* .is-scrolled шапка */ --glass-edge: rgba(17, 22, 32, 0.08); --glass-hi: rgba(255, 255, 255, 0.60); /* Стекло КОНТЕНТНЫХ поверхностей (.card, .c-metric, .c-filterbar, .c-empty): чуть плотнее хрома — под ним текст страниц. Blur умереннее (26px), только на контейнерах, никогда на строках таблиц. */ --glass-card: rgba(255, 255, 255, 0.60); --glass-card-strong: rgba(255, 255, 255, 0.66); --glass-card-blur: 26px; --glass-card-solid: #FDFDFE; /* фолбэк prefers-reduced-transparency / print */ /* Границы */ --line: #E5E6E9; --line-strong: #D3D5D9; --border-soft: #ECEDF0; /* Текст */ --text-default: #0E0F11; --text-faint: #9CA0A8; /* Семантика */ --success: #1E9E5C; --success-soft: rgba(30,158,92,.12); --success-text: #157A45; --warning: #F59E0B; --warning-soft: rgba(245,158,11,.14); --warning-text: #B45309; --danger: #E5484D; --danger-soft: rgba(229,72,77,.12); --danger-text: #C2363B; --info: #3B82F6; --info-soft: rgba(59,130,246,.10); --info-text: #2563EB; --violet: #7C5BD6; --violet-text: #6D45C9; /* ═══ РОЛИ ЦВЕТА (закон, эталон docs/design/etalon-dashboard.html) ═══ Правило одной строкой: ЛАЙМ — ТОЛЬКО бренд (лого, active-nav, primary-CTA, бейдж бренда) и серия «Выручка». Долги — ТОЛЬКО красная семья. Статус-зелёный ≠ лайм (он темнее и холоднее, различим рядом). Роли закреплены жёстко; менять только вместе с эталоном. */ /* Выручка (бары = градиентная пара, линия/спарклайн = --chart-revenue-line) */ --chart-revenue: #A8CE3B; --chart-revenue-2: #85B117; --chart-revenue-line: #79A11E; /* Направления бизнеса (прогресс-бары, square-бейджи, серии) */ --dir-accounting: #85B117; /* Бухобслуживание — лайм */ --dir-subarenda: #2A9D8F; /* Субаренда — бирюза */ --dir-legal: #7C6BC7; /* Юруслуги — фиолет */ --dir-ved: #D08A18; /* ВЭД — янтарь */ /* Долг / просрочка — единственная семья для долгов */ --debt: #C0394B; --debt-text: #C0394B; /* Статус «хорошо / выполнено» */ --ok: #3E9B4F; --ok-text: #2E7D3C; /* Статус «внимание / скоро» */ --warn: #D08A18; --warn-text: #8F6100; /* Информация / нейтральные серии («Расходы») */ --info-chart: #4C7FBF; --info-chart-text: #3E6FA8; /* «Не требуется» — серый: используйте --muted-2 / ink-3 */ /* Тематические пары карточек (пастель + глубокий badge того же тона) */ --c-navy-bg: #F1F1EE; --c-navy-rail: #45433D; --c-navy-badge: #38362F; --c-navy-soft: #E2E1DA; --c-lime-bg: #F3F8E1; --c-lime-rail: #AACF38; --c-lime-badge: #5F7A1A; --c-lime-soft: #E2EFB4; --c-mint-bg: #E6F5EC; --c-mint-rail: #1E9E5C; --c-mint-badge: #157A45; --c-mint-soft: #CCEAD6; --c-warm-bg: #FCF4D9; --c-warm-rail: #D9A400; --c-warm-badge: #927000; --c-warm-soft: #F2E5AE; --c-violet-bg: #F0EAFA; --c-violet-rail: #7C5BD6; --c-violet-badge: #5A3CB0; --c-violet-soft: #DECFF4; --c-rose-bg: #FCEBEF; --c-rose-rail: #E0577A; --c-rose-badge: #B23355; --c-rose-soft: #F6CFD9; /* «Денежные» градиенты */ --grad-hero: radial-gradient(130% 150% at 100% -12%, rgba(186,219,80,.50) 0%, rgba(170,207,56,0) 46%), linear-gradient(152deg, #2A2A30 0%, #101012 78%); --grad-hero-ring: rgba(255,255,255,.14); --grad-hero-shadow: 0 22px 44px -22px rgba(170,207,56,.45), 0 2px 10px rgba(0,0,0,.28); --grad-mint: linear-gradient(155deg, rgba(30,158,92,.15) 0%, transparent 62%); --grad-sky: linear-gradient(155deg, rgba(59,130,246,.15) 0%, transparent 62%); --grad-amber: linear-gradient(155deg, rgba(245,158,11,.17) 0%, transparent 62%); --grad-violet: linear-gradient(155deg, rgba(124,91,214,.15) 0%, transparent 62%); --grad-lime: linear-gradient(155deg, rgba(170,207,56,.18) 0%, transparent 62%); --grad-rose: linear-gradient(155deg, rgba(229,72,77,.14) 0%, transparent 62%); --grad-graph: linear-gradient(155deg, rgba(90,96,110,.10) 0%, transparent 62%); /* ── ЛЕГАСИ-АЛИАСЫ CONTAB (канонические имена 62 шаблонов) ── */ --bg: var(--bg-canvas); --surface: var(--bg-surface); --surface-2: var(--bg-soft); --surface2: var(--bg-soft); --surface-3: #E7E9EC; --surface3: #E7E9EC; --text: var(--text-default); --muted: #6A6F78; /* = --text-muted нового набора */ --muted-2: var(--text-faint); --muted2: var(--text-faint); --border: var(--line); --border-2: var(--line-strong); --border2: var(--line-strong); --brand: var(--accent); --brand-dk: var(--accent-strong); /* текст/ссылки — читаемый тёмный лайм */ --brand-bg: var(--accent-soft); /* Статусные алиасы подчинены закону ролей: зелёный = статус-зелёный (НЕ лайм), красный = долг-красный, оранжевый = warn, синий = info. */ --green: var(--ok-text); --green-bg: var(--success-soft); --red: var(--debt); --red-bg: var(--danger-soft); --orange: var(--warn); --orange-bg: var(--warning-soft); --blue: var(--info-chart); --blue-bg: var(--info-soft); --btn-primary-bg: var(--brand-primary); --btn-primary-color: #FFFFFF; --btn-primary-hover: var(--brand-soft); --topbar-bg: var(--glass-chrome); --topbar-border: var(--glass-edge); /* Легаси main.css-эпохи (403.html и пр.) */ --text-primary: var(--text-default); --text-secondary: var(--muted); --text-muted: var(--muted); --border-strong: var(--line-strong); } [data-theme="dark"] { --bg-canvas: #08090A; --bg-surface: #101113; --bg-soft: #1B1C20; --bg-elevated: #16181B; --bg-paper: #08090A; --side-bg: #0C0D0F; --side-border: rgba(255,255,255,0.06); --side-text: #B4B8BF; --side-text-strong: #F7F8F8; --side-muted: #7C818B; --side-hover: rgba(255,255,255,0.04); --side-active: rgba(170,207,56,0.20); --app-bg: radial-gradient(90% 72% at 8% -6%, rgba(170,207,56,.11) 0%, rgba(170,207,56,0) 55%), radial-gradient(72% 60% at 102% 14%, rgba(92,128,235,.13) 0%, rgba(92,128,235,0) 60%), radial-gradient(64% 70% at 76% 104%, rgba(214,92,146,.09) 0%, rgba(214,92,146,0) 62%), linear-gradient(158deg, #101216 0%, #07080B 100%); --glass-sb: rgba(22,23,27,0.55); --glass-chrome: rgba(24,25,29,0.55); --glass-chrome-strong: rgba(26,27,32,0.74); --glass-edge: rgba(255,255,255,0.08); --glass-hi: rgba(255,255,255,0.06); --glass-card: rgba(20, 20, 24, 0.52); --glass-card-strong: rgba(24, 25, 30, 0.62); --glass-card-solid: #131417; --line: #23252B; --line-strong: #34363D; --border-soft: #1A1C20; --text-default: #F7F8F8; --text-faint: #5C606A; --accent-soft: rgba(170,207,56,0.18); --accent-strong: #C6E06A; /* в dark accent-strong СВЕТЛЕЕТ (текст на тёмном) */ --form-input-bg: #16181B; --form-input-bg-hover: #1B1D21; --form-input-border: #2A2C32; --success-soft: rgba(30,158,92,.20); --success-text: #34D399; --warning-soft: rgba(245,158,11,.20); --warning-text: #FBBF24; --danger-soft: rgba(229,72,77,.20); --danger-text: #F87171; --info-soft: rgba(96,165,250,.16); --info-text: #60A5FA; --violet-text: #A78BFA; } /* ═══ РОЛИ ЦВЕТА — тёмная тема (закон, эталон docs/design/etalon-dashboard.html) :is() — сохраняем специфичность, НИКОГДА :where(). Лайм — только бренд и выручка; долги — только красная семья; статус-зелёный ≠ лайм. */ :is([data-theme="dark"]) { --chart-revenue: #9CBB3A; --chart-revenue-2: #84A324; --chart-revenue-line: #C6E06A; --dir-accounting: #84A324; --dir-subarenda: #1096A5; --dir-legal: #8F7DDC; --dir-ved: #C08420; --debt: #D9556A; --debt-text: #E76A78; --ok: #5FBF72; --ok-text: #5FBF72; --warn: #C08420; --warn-text: #E0A339; --info-chart: #4E80C8; --info-chart-text: #7FA8DC; } [data-theme="dark"] { --c-navy-bg: #26261F; --c-navy-badge: #D8D5C6; --c-navy-soft: #34332A; --c-lime-bg: #222B0C; --c-lime-badge: #C6E06A; --c-lime-soft: #2F3C12; --c-mint-bg: #102C1C; --c-mint-badge: #6FD39A; --c-mint-soft: #17402A; --c-warm-bg: #302708; --c-warm-badge: #E8C55A; --c-warm-soft: #43370E; --c-violet-bg: #251D3B; --c-violet-badge: #B79DF0; --c-violet-soft: #33294F; --c-rose-bg: #331B22; --c-rose-badge: #F090AA; --c-rose-soft: #45222D; --grad-hero: radial-gradient(130% 150% at 100% -12%, rgba(186,219,80,.36) 0%, rgba(170,207,56,0) 46%), linear-gradient(152deg, #1B1C20 0%, #050506 80%); --grad-hero-shadow: 0 22px 46px -24px rgba(170,207,56,.34), 0 2px 10px rgba(0,0,0,.5); --grad-mint: linear-gradient(155deg, rgba(52,211,153,.16) 0%, transparent 62%); --grad-sky: linear-gradient(155deg, rgba(96,165,250,.16) 0%, transparent 62%); --grad-amber: linear-gradient(155deg, rgba(251,191,36,.16) 0%, transparent 62%); --grad-violet: linear-gradient(155deg, rgba(167,139,250,.16) 0%, transparent 62%); --grad-lime: linear-gradient(155deg, rgba(198,224,106,.16) 0%, transparent 62%); --grad-rose: linear-gradient(155deg, rgba(248,113,113,.15) 0%, transparent 62%); --grad-graph: linear-gradient(155deg, rgba(160,166,180,.09) 0%, transparent 62%); /* ── ЛЕГАСИ-АЛИАСЫ, dark ── */ --surface-3: #232529; --surface3: #232529; --muted: #8A8F98; --muted-2: var(--text-faint); --muted2: var(--text-faint); --brand: var(--accent); --brand-dk: var(--accent-strong); /* #C6E06A — читаемый на тёмном */ --brand-bg: var(--accent-soft); /* Primary-кнопка в dark — светлая (инверсия CONTAB, контраст сохранён) */ --btn-primary-bg: #E8E8EA; --btn-primary-color: #131316; --btn-primary-hover: #D2D3D7; }