/* ============================================================================ WATS CRM — дизайн-токены. 10.08.2026. Образ: спокойный операционный пульт продаж. Графит оборудования, тёплая бумага документов, бирюзовый индикатор нормальной работы, жёлтая этикетка ручной проверки, красная отметка исключения. ПОРЯДОК ПОДКЛЮЧЕНИЯ: fonts.css → tokens.css → style.css. Токены объявляются до style.css, чтобы существующие компоненты подхватили их через мост в конце файла. ЧТО ЗДЕСЬ НЕ ДЕЛАЕТСЯ. Не переопределяются --wats-navy и --wats-yellow: на них держится текущая шапка, а её перестройка — этап 3. Трогать сейчас значит сломать вид до того, как появится замена. ТЁМНАЯ ТЕМА. Все цвета объявлены парами «значение сейчас / комментарий про тёмное», поэтому она добавляется одним блоком prefers-color-scheme в конце и не требует правок в компонентах. CSS-функция light-dark() из прототипа НЕ используется: она требует Chrome 123+ и Firefox 120+, а на более старом браузере отвалились бы все цвета разом. ========================================================================= */ :root { /* ── Поверхности и текст ─────────────────────────────────────────────── Четыре уровня текста, как требует аудит: основной, вторичный, метаданные, отключённый. */ --wats-paper: #f5f4ef; /* фон приложения, тёплая бумага */ --wats-sheet: #ffffff; /* поверхность карточек */ --wats-inset: #ecebe5; /* утопленные области, полосы таблиц */ --wats-ink: #172226; /* основной текст, графит */ --wats-pencil: #687276; /* вторичный текст */ --wats-meta: #8a9296; /* метаданные, подписи */ --wats-disabled: #aab1b4; /* отключённое */ --wats-rule: rgba(23, 34, 38, .10); /* тихая граница */ --wats-rule-strong: rgba(23, 34, 38, .18); /* граница, которую видно */ /* ── Семантика. Одно правило: цвет НИКОГДА не единственный носитель смысла. Рядом обязателен текст или иконка с доступным названием. */ --wats-signal: #087a78; /* бирюзовый WATS: единственный акцент */ --wats-signal-soft: #dcefed; --wats-label: #e1aa2d; /* жёлтый: ТОЛЬКО ручная проверка */ --wats-label-soft: #fbf0cf; --wats-label-ink: #8a6410; /* жёлтый нечитаем как текст — вот текстовый */ --wats-alert: #b43a38; /* красный: ТОЛЬКО блокер, ошибка, просрочка */ --wats-alert-soft: #f8e2df; --wats-ok: #2d7a4f; /* зелёный: ТОЛЬКО подтверждённый результат */ --wats-ok-soft: #e0efe5; /* ── Типографика ────────────────────────────────────────────────────── Моноширинный — для артикулов, ИНН, номеров документов, времени, количеств и сумм. Фолбэки обязательны: интерфейс не должен зависеть от того, доехал ли шрифт. */ --wats-font: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --wats-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace; --wats-text-xs: 12px; --wats-text-sm: 13px; --wats-text-base: 15px; /* основной размер не уменьшаем ради плотности */ --wats-text-lg: 17px; --wats-text-xl: 21px; --wats-text-2xl: 27px; --wats-leading: 1.5; --wats-leading-tight: 1.25; /* ── Шаг сетки: 4 px ──────────────────────────────────────────────── */ --wats-space-1: 4px; --wats-space-2: 8px; --wats-space-3: 12px; --wats-space-4: 16px; --wats-space-5: 20px; --wats-space-6: 24px; --wats-space-8: 32px; --wats-space-10: 40px; /* ── Размеры контролов ──────────────────────────────────────────────── Высота частых контролов 36–40 px, но фактическая зона нажатия не меньше 44 px — её добирают отступами, а не высотой самой кнопки. */ --wats-control-sm: 32px; --wats-control: 36px; --wats-control-lg: 40px; --wats-tap-min: 44px; /* ── Радиусы ─────────────────────────────────────────────────────── */ --wats-radius-sm: 7px; --wats-radius-md: 11px; --wats-radius-lg: 16px; --wats-radius-pill: 999px; /* ── Глубина. Тень только там, где есть настоящий слой: меню, modal, popover. Карточки различаются границей, а не тенью. */ --wats-shadow-menu: 0 4px 16px rgba(23, 34, 38, .12); --wats-shadow-modal: 0 16px 48px rgba(23, 34, 38, .20); /* ── Слои ─────────────────────────────────────────────────────────── */ --wats-z-base: 0; --wats-z-sticky: 100; --wats-z-drawer: 200; --wats-z-menu: 300; --wats-z-modal: 400; --wats-z-toast: 500; /* ── Движение. Всё отключается через prefers-reduced-motion ниже. */ --wats-motion-fast: 120ms; --wats-motion-base: 180ms; --wats-ease: cubic-bezier(.2, .0, .2, 1); } /* ── Точки перелома ───────────────────────────────────────────────────── В CSS-переменных медиазапросы использовать нельзя, поэтому значения зафиксированы здесь как документация и повторяются в @media буквально: 360px — минимальная рабочая ширина, горизонтального переполнения быть не должно ни на одном ключевом сценарии; 768px — планшет, боковая навигация сворачивается; 1100px — плотный desktop; 1400px — широкий desktop. */ /* ============================================================================ МОСТ К СУЩЕСТВУЮЩИМ КОМПОНЕНТАМ. Здесь и только здесь происходит визуальный сдвиг: старые имена токенов перенаправляются на новую палитру. Сорок шаблонов при этом не трогаются. Оговорка честная: мимо токенов в проекте зашито 166 цветов в style.css и 153 в шаблонах. Они переедут по экранам на этапах 3-5, а не одним махом. ========================================================================= */ :root { --bg: var(--wats-paper); --bg-card: var(--wats-sheet); --ink: var(--wats-ink); --ink-soft: var(--wats-pencil); --line: var(--wats-rule); --accent: var(--wats-signal); --accent-soft: var(--wats-signal-soft); --error: var(--wats-alert); --error-soft: var(--wats-alert-soft); --radius: var(--wats-radius-sm); --mono: var(--wats-font-mono); /* Нейтральные поверхности старой палитры — на новую бумагу */ --wats-bg: var(--wats-sheet); --wats-bg-alt: var(--wats-paper); --wats-text: var(--wats-ink); --wats-muted: var(--wats-pencil); --wats-border: var(--wats-rule); /* Семантический слой (заведён 21.05.2026) сохраняется целиком: правило «цвет = семантика» уже было верным, меняются только сами цвета. */ --state-success-fg: var(--wats-ok); --state-success-bg: var(--wats-ok-soft); --state-success-border: var(--wats-ok); --state-warn-fg: var(--wats-label-ink); --state-warn-bg: var(--wats-label-soft); --state-warn-border: var(--wats-label); --state-danger-fg: var(--wats-alert); --state-danger-bg: var(--wats-alert-soft); --state-danger-border: var(--wats-alert); --state-info-fg: var(--wats-signal); --state-info-bg: var(--wats-signal-soft); --state-info-border: var(--wats-signal); --state-neutral-fg: var(--wats-pencil); --state-neutral-bg: var(--wats-inset); --state-neutral-border: var(--wats-rule); } /* ── База документа ──────────────────────────────────────────────────── */ body { font-family: var(--wats-font); font-size: var(--wats-text-base); line-height: var(--wats-leading); color: var(--wats-ink); background: var(--wats-paper); } /* Цифры в колонках должны стоять столбиком: суммы, количества, остатки. */ .mono, code, kbd, samp, pre, td.num, th.num, .num { font-family: var(--wats-font-mono); font-variant-numeric: tabular-nums; } /* Видимый фокус — обязателен: по интерфейсу должно быть можно ходить с клавиатуры, а не только мышью. */ :focus-visible { outline: 2px solid var(--wats-signal); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }