/* ============================================================================= ЕДИНЫЙ ИСТОЧНИК НОВЫХ ЦВЕТОВ. Компоненты используют переменные отсюда; отдельные legacy fallback-цвета в постраничных CSS остаются техдолгом и не являются образцом для нового кода. Структура: светлая тема - :root; темная - :root[data-theme="dark"] (атрибут вешает shell.js на ; см. _theme-dark.css для не-цветовой логики темной темы - смена логотипа и т.п.). Цвета именуются по КОНТЕКСТУ, а не по оттенку. Статусы окрашиваются по смысловому контексту (initial/in_progress/success/failure/warning/neutral), одинаково во всех доменах (товары, партии, заказы, финансы, задачи). ============================================================================= */ :root { /* ---- базовая палитра (публичный сайт + общие) ---- */ --bg: #ffffff; --bg-soft-aqua: #f2fffb; --bg-soft-taupe: #f7f4f3; --text: #111111; --text-primary: #111111; --text-secondary: #3a3a3a; --text-muted: #8a817c; --aqua: #7fffd4; --aqua-dark: #66ccaa; --aqua-deep: #336655; --aqua-soft: #e5fff7; --taupe: #8a817c; --taupe-dark: #6f6762; --taupe-light: #dad2cd; --taupe-soft: #f7f4f3; --surface-soft: #f7f4f3; --border: #e6e1de; --border-strong: #dad2cd; --primary: #66ccaa; --primary-hover: #4c9980; --link: #336655; --link-hover: #19332b; --nav-active-bg: #d9f7ee; --nav-active-text: #1f4f43; --focus-ring: rgba(127, 255, 212, 0.35); --shadow-sm: 0 4px 18px rgba(17, 17, 17, 0.06); --shadow-md: 0 10px 30px rgba(17, 17, 17, 0.08); /* ---- приложение: поверхности / текст / линии / акцент ---- */ --app-bg: #f6f8f7; --app-surface: #ffffff; --app-surface-soft: #f9fcfb; --app-text: #111111; --app-text-secondary: #4f5b57; --app-text-muted: #7c8783; --app-line: #e3ebe7; --app-line-strong: #d6e2dc; /* мягкие алиасы */ --app-line-soft: var(--app-line); --app-border-soft: var(--app-line); --app-text-soft: var(--app-text-muted); --app-accent: var(--aqua-dark); --app-accent-soft: #e9f8f2; --app-accent-soft-strong: #dbf4ea; --app-accent-deep: #285447; /* текст поверх общей accent-заливки: светлая - белый */ --text-on-accent: #ffffff; /* заполненные primary-кнопки: отдельная темно-зеленая палитра */ --button-primary-bg: #336052; --button-primary-hover: #2d5448; --button-primary-fg: #ffffff; --app-shadow-sm: 0 8px 24px rgba(17, 17, 17, 0.06); --app-shadow-md: 0 18px 40px rgba(17, 17, 17, 0.08); --app-shadow-lg: 0 20px 60px rgba(17, 17, 17, 0.18); /* модалки/диалоги */ /* затемнение-подложка (скрим) под модалками */ --app-overlay: rgba(17, 17, 17, 0.45); /* сплошной черный фон под видео/леттербоксом - не зависит от темы */ --app-scrim-solid: #000; /* ---- статус-контексты (пилюли) - одинаковы во всех доменах ---- */ --status-initial-bg: #e2e8f0; --status-initial-fg: #334155; --status-initial-border: #cbd5e1; --status-progress-bg: #dbeafe; --status-progress-fg: #1e40af; --status-progress-border: #bfdbfe; --status-success-bg: #d1fae5; --status-success-fg: #065f46; --status-success-border: #a7f3d0; --status-failure-bg: #fee2e2; --status-failure-fg: #991b1b; --status-failure-border: #fecaca; --status-warning-bg: #fef3c7; --status-warning-fg: #78350f; --status-warning-border: #fcd34d; --status-neutral-bg: #e7e5e4; --status-neutral-fg: #44403c; --status-neutral-border: #d6d3d1; /* ---- мягкие подсветки (ячейки/сводки: слабее пилюль) ---- */ --soft-success-bg: #ecfdf5; --soft-success-fg: #047857; --soft-danger-bg: #fef2f2; --soft-danger-fg: #b91c1c; --soft-warning-bg: #fff8e6; --soft-warning-fg: #92400e; /* ---- прогноз конца стока: яркий светофор НА ТЕКСТЕ (должен выделяться) ---- */ --forecast-crit: #dc2626; --forecast-soon: #ea580c; --forecast-ok: #15803d; --forecast-faint: var(--app-text-muted); /* ---- сплошной «опасный» (кнопки удаления, тосты-ошибки) ---- */ --danger-solid-bg: #c0473d; --danger-solid-hover: #8b1f1a; --danger-solid-fg: #ffffff; /* заполненные danger-кнопки: отдельная кирпично-красная палитра */ --button-danger-bg: #8c4b46; --button-danger-hover: #7b423e; --button-danger-fg: #ffffff; /* ---- аватар: фон/буква выводятся из --avatar-color через color-mix ---- */ --avatar-mix-color: #ffffff; --avatar-mix-amount: 85%; --avatar-fg-mix-color: #000000; --avatar-fg-mix-amount: 30%; /* ---- свечение акцентом + градиент hero-блоков ---- */ --accent-glow: rgba(127, 255, 212, 0.14); --hero-grad-from: #ffffff; --hero-grad-to: #fbfcfc; /* подложка под QR/штрихкод - всегда белая (нужна для считывания) */ --qr-surface: #ffffff; /* ---- палитра графиков (analytics) ---- */ --chart-1: #2563eb; /* sky/blue */ --chart-2: #10b981; /* emerald */ --chart-3: #f59e0b; /* amber */ --chart-4: #8b5cf6; /* violet */ --chart-5: #ef4444; /* red */ --chart-grid: #e3ebe7; --chart-axis: #7c8783; /* ---- точки-индикаторы статусов (легенда фильтров склада) ---- Насыщенные тона (Tailwind-400): различимы и в светлой, и в темной теме, поэтому отдельных темных значений не требуют. */ --dot-slate: #94a3b8; --dot-stone: #a8a29e; --dot-emerald: #34d399; --dot-emerald-strong: #10b981; --dot-teal: #2dd4bf; --dot-blue: #60a5fa; --dot-indigo: #818cf8; --dot-violet: #a78bfa; --dot-amber: #fbbf24; --dot-orange: #fb923c; --dot-red: #f87171; --dot-rose: #fb7185; --dot-pink: #f472b6; /* ---- визуальная шкала ставок сотрудников ---- */ --wage-rate-low: var(--dot-red); --wage-rate-mid: var(--dot-amber); --wage-rate-high: var(--dot-emerald); --wage-rate-segment-fg: #111111; /* ---- редактор шаблонов ---- */ --tpl-directive: #b98245; /* ---- полоски выполнения (задачи): заливка градиентом + лейбл ---- */ --bar-time-from: #bae6fd; --bar-time-to: #7dd3fc; --bar-time-label: #0c4a6e; --bar-qty-from: #ddd6fe; --bar-qty-to: #c4b5fd; --bar-qty-label: #4c1d95; --bar-overdue-from: #fecaca; --bar-overdue-to: #fca5a5; --bar-overdue-label: #7f1d1d; /* ---- общая заливка временных полос ---- */ --app-bar-fill: var(--dot-blue); --work-session-active-fill: var(--dot-emerald-strong); --app-accent-soft-weak: var(--app-accent-soft); /* ---- не-цветовые токены ---- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --container-width: 1180px; --knowledge-article-width: 1040px; --knowledge-article-left-rail: 200px; --knowledge-article-right-rail: 260px; --knowledge-article-gap: 14px; --knowledge-article-padding-inline: clamp(18px, 5vw, 64px); --knowledge-prose-width: 74ch; --knowledge-print-text: #111111; --knowledge-print-muted: #555555; --knowledge-print-line: #b8b8b8; --knowledge-print-soft: #f3f3f3; --knowledge-print-surface: #ffffff; /* Привилегированная предметная область knowledge: отдельное глубокое золото. */ --knowledge-herrschaftswissen-fg: #8a6500; } /* ============================================================================= ТЕМНАЯ ТЕМА. Те же контекстные имена, темные значения. Активируется . На публичном сайте атрибут не ставится, поэтому этот блок там не влияет. ============================================================================= */ :root[data-theme="dark"] { /* нативные контролы (чекбоксы, date-input, скроллбары) - темные */ color-scheme: dark; --bg: #151918; --bg-soft-aqua: #10241f; --bg-soft-taupe: #211e1d; --text: #f4f1ee; --text-primary: #f4f1ee; --text-secondary: #c8c1bd; --text-muted: #8f8580; --aqua: #7fffd4; --aqua-dark: #5fcaa9; --aqua-deep: #9af5da; --aqua-soft: #17352d; --taupe: #a79d97; --taupe-dark: #8f8580; --taupe-light: #3a3431; --taupe-soft: #211e1d; --surface-soft: #1d2220; /* контрастные границы */ --border: #3d3a36; --border-strong: #57514b; --primary: #5fcaa9; --primary-hover: #7fffd4; --link: #9af5da; --link-hover: #c9fff0; --nav-active-bg: #17352d; --nav-active-text: #b8ffe9; --focus-ring: rgba(127, 255, 212, 0.28); --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.45); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55); --app-bg: #171716; --app-surface: #1d2220; --app-surface-soft: #191e1c; --app-text: #f4f1ee; --app-text-secondary: #c8c1bd; --app-text-muted: #8f8580; --app-line: #3d3a36; --app-line-strong: #57514b; --app-accent: #5fcaa9; /* не #7fffd4 - он в темной слишком ярок */ --app-accent-soft: #17352d; --app-accent-soft-strong: #1d4a3d; --app-accent-deep: #9af5da; --text-on-accent: #0f1d18; /* темные «чернила» поверх яркого aqua */ --button-primary-bg: #1e4b3f; --button-primary-hover: #1a4237; --button-primary-fg: #f4f1ee; --app-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.45); --app-shadow-md: 0 18px 40px rgba(0, 0, 0, 0.55); --app-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6); /* скрим плотнее: затемнение поверх уже темной страницы иначе не читается */ --app-overlay: rgba(0, 0, 0, 0.6); --app-scrim-solid: #000; --status-initial-bg: #2a313b; --status-initial-fg: #cbd5e1; --status-initial-border: #3a4452; --status-progress-bg: #1e2f52; --status-progress-fg: #93c5fd; --status-progress-border: #2f4a7c; --status-success-bg: #1b3e32; --status-success-fg: #6ee7b7; --status-success-border: #255e49; --status-failure-bg: #472c2c; --status-failure-fg: #fca5a5; --status-failure-border: #6c3e3d; --status-warning-bg: #3a341a; --status-warning-fg: #fcd34d; --status-warning-border: #605121; --status-neutral-bg: #2e2b29; --status-neutral-fg: #d6d3d1; --status-neutral-border: #423d39; --soft-success-bg: #203d32; --soft-success-fg: #6ee7b7; --soft-danger-bg: #422f2e; --soft-danger-fg: #fca5a5; --soft-warning-bg: #383520; --soft-warning-fg: #fcd34d; /* прогноз конца стока: ярче (на темном фоне 400-тона читаются лучше) */ --forecast-crit: #f87171; --forecast-soon: #fb923c; --forecast-ok: #4ade80; --forecast-faint: var(--app-text-muted); --tpl-directive: #e2b978; --danger-solid-bg: #b03830; --danger-solid-hover: #c0473d; --danger-solid-fg: #f4f1ee; --button-danger-bg: #682e29; --button-danger-hover: #5c2824; --button-danger-fg: #f4f1ee; --avatar-mix-color: #000000; --avatar-mix-amount: 58%; --avatar-fg-mix-color: #ffffff; --avatar-fg-mix-amount: 50%; --accent-glow: rgba(127, 255, 212, 0.10); --hero-grad-from: #1d2220; --hero-grad-to: #181d1b; --qr-surface: #ffffff; --chart-1: #38bdf8; --chart-2: #34d399; --chart-3: #fbbf24; --chart-4: #a78bfa; --chart-5: #f87171; --chart-grid: #3d3a36; --chart-axis: #8f8580; --knowledge-herrschaftswissen-fg: #d8b84c; /* полоски: насыщеннее (пастель на темном бледнеет), лейбл - светлый */ --bar-time-from: #0284c7; --bar-time-to: #0ea5e9; --bar-time-label: #f4f1ee; --bar-qty-from: #7c3aed; --bar-qty-to: #8b5cf6; --bar-qty-label: #f4f1ee; --bar-overdue-from: #dc2626; --bar-overdue-to: #ef4444; --bar-overdue-label: #f4f1ee; }