/* ============================================================ RuMetric 2.0 — ДИЗАЙН-ТОКЕНЫ (core/ui/theme.css) ЕДИНСТВЕННЫЙ файл, который правится при редизайне. Тема v5 «Emerald Dashboard» — по референсу 12.07.2026: изумруд #07966F, фиолетовый info, оранжевый warning, Inter (локальный, без CDN), радиусы 10/14/20/24, двойные мягкие тени, светлый фон с зелёным подтоном. ============================================================ */ /* ---------- Шрифт: Inter Variable, ЛОКАЛЬНО (в РФ без CDN) ---------- */ @font-face { font-family: 'Inter'; src: url('/core/ui/assets/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ---------- Цвет: база (светлый фон с зелёным подтоном) ---------- */ --rm-bg: #f4f7f6; --rm-surface: #ffffff; --rm-surface-2: #f0f4f2; --rm-border: #e7ecea; --rm-border-strong: #d5ddda; /* ---------- Цвет: текст ---------- */ --rm-text: #12211c; --rm-text-soft: #5f6f69; --rm-text-faint: #9aa8a2; --rm-text-invert: #ffffff; /* ---------- Цвет: акцент — изумруд ---------- */ --rm-accent: #07966f; --rm-accent-strong: #067a5b; --rm-accent-soft: #e2f3ed; /* градиент для primary-кнопок (этап 2) */ --rm-accent-grad: linear-gradient(180deg, #0aa87d 0%, #07966f 100%); /* ---------- Семантика ---------- */ --rm-ok: #07966f; --rm-ok-soft: #e2f3ed; --rm-info: #7257d9; /* фиолетовый — токены, системные события */ --rm-info-soft: #efeafb; --rm-warn: #d97a10; /* оранжевый — 429, ретраи */ --rm-warn-soft: #fdf1e2; /* UI-CONTRAST-01. Цвет статуса и цвет ТЕКСТА статуса — разные вещи. Токены выше рассчитаны на заливку, рамку и иконку; тем же цветом набранный текст на своей же мягкой подложке читается плохо. Замер обходом в светлой теме: ok 3.26, warn 2.80, info 4.37, danger 3.83 при норме 4.5 для кегля 12px. Ниже — те же цвета, затемнённые ровно настолько, чтобы текст проходил норму на своей подложке: 5.67 / 5.38 / 6.07 / 5.03. В тёмной теме затемнять нечего — там подложка тёмная и текущие цвета уже дают 5.1–6.9, поэтому в тёмной секции эти токены равны исходным. */ --rm-ok-text: #056b50; --rm-warn-text: #96520a; --rm-info-text: #5b41bd; --rm-danger-text: #c62222; --rm-danger: #de3b3b; --rm-danger-soft: #fdecec; /* ---------- Сайдбар (белый, отделён границей) ---------- */ --rm-side-bg: #ffffff; --rm-side-text: #5f6f69; --rm-side-text-strong: #12211c; --rm-side-logo: #12211c; --rm-side-active: #e2f3ed; --rm-side-accent: #07966f; /* ---------- Типографика: Inter, спокойный масштаб ---------- */ --rm-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --rm-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --rm-font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace; --rm-fs-xs: 12px; --rm-fs-sm: 13px; --rm-fs-md: 14px; /* базовый */ --rm-fs-lg: 16px; --rm-fs-xl: 22px; --rm-fs-xxl: 28px; /* «Добро пожаловать, …» */ --rm-line-height: 1.55; /* базовый интерлиньяж — переопределяется плотностью */ --rm-fw-normal: 400; --rm-fw-medium: 500; --rm-fw-semi: 600; --rm-fw-bold: 700; --rm-fw-display: 700; /* заголовки — жирный Inter, не отдельный шрифт */ /* ---------- Геометрия (радиусы из ТЗ: 10/14/20/24) ---------- */ --rm-radius-sm: 10px; --rm-radius-md: 14px; --rm-radius-lg: 20px; /* карточки 18–22 */ --rm-radius-xl: 24px; --rm-gap-xs: 4px; --rm-gap-sm: 8px; --rm-gap-md: 16px; --rm-gap-lg: 24px; --rm-gap-xl: 36px; --rm-sidebar-w: 248px; --rm-sidebar-w-collapsed: 64px; --rm-content-max: 1400px; /* ---------- Тени: двойные, мягкие (ТЗ §16) ---------- */ --rm-shadow-sm: 0 1px 2px rgba(6, 42, 32, .04), 0 4px 12px rgba(6, 42, 32, .05); --rm-shadow-md: 0 2px 4px rgba(6, 42, 32, .05), 0 10px 28px rgba(6, 42, 32, .08); --rm-shadow-lg: 0 4px 10px rgba(6, 42, 32, .08), 0 20px 48px rgba(6, 42, 32, .14); /* мягкое зелёное свечение для focus-ring (этап 2) */ --rm-focus-ring: 0 0 0 4px rgba(7, 150, 111, .16); /* ---------- Движение ---------- */ --rm-t-fast: 120ms ease; --rm-t-med: 200ms ease; } /* ============================================================ ТЁМНАЯ ТЕМА — те же токены. Включается data-theme='dark' (выбор юзера) либо системной темой при первом входе (kit.js). ============================================================ */ :root[data-theme='dark'] { --rm-bg: #0e1412; --rm-surface: #161d1a; --rm-surface-2: #1c2420; --rm-border: rgba(255, 255, 255, .07); --rm-border-strong: rgba(255, 255, 255, .16); --rm-text: #eef4f1; --rm-text-soft: #9db0a8; --rm-text-faint: #66766f; --rm-text-invert: #0e1412; --rm-accent: #22c493; --rm-accent-strong: #3bd3a5; --rm-accent-soft: #123529; --rm-accent-grad: linear-gradient(180deg, #26cf9c 0%, #16b485 100%); --rm-ok: #22c493; --rm-ok-soft: #123529; --rm-info: #9d87ea; --rm-info-soft: #241d40; --rm-warn: #eda23e; --rm-warn-soft: #33260f; /* В тёмной теме подложка тёмная, и текущие цвета статусов уже читаются: ok 5.99, info 5.35, warn 6.90, danger 5.13. Затемнять нечего. */ --rm-ok-text: var(--rm-ok); --rm-warn-text: var(--rm-warn); --rm-info-text: var(--rm-info); --rm-danger-text: var(--rm-danger); --rm-danger: #f0655f; --rm-danger-soft: #3a1715; --rm-side-bg: #121917; --rm-side-text: #9db0a8; --rm-side-text-strong: #eef4f1; --rm-side-logo: #eef4f1; --rm-side-active: #123529; --rm-side-accent: #22c493; --rm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .35); --rm-shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .45); --rm-shadow-lg: 0 4px 10px rgba(0, 0, 0, .5), 0 20px 48px rgba(0, 0, 0, .55); --rm-focus-ring: 0 0 0 4px rgba(34, 196, 147, .22); } /* ============================================================ ПЛОТНОСТЬ ИНТЕРФЕЙСА — только размерные токены (страница НЕ масштабируется). AUTOREPLY-UX-03-FAST §1: новая видимая лестница размеров 55/70/85. Storage-контракт прежний (compact|standard|large), но визуальные уровни сдвинуты вниз, чтобы весь сервис стал компактнее: large → «Крупно» 85% — совпадает со СТАРЫМ large-уровнем токенов; standard → «Компактно» 70% (default) — уровень прежнего compact; compact → «Мини» 55% — новый, заметно мельче прежнего compact. Базовый :root (auth-страницы без data-density) НЕ трогаем. Ортогонально теме: цвета/тени/радиусы/ширины здесь не меняются. ============================================================ */ /* 55% «Мини» — новый нижний уровень (мельче прежнего compact). */ :root[data-density='compact'] { --rm-fs-xs: 10px; --rm-fs-sm: 11px; --rm-fs-md: 12px; --rm-fs-lg: 13px; --rm-fs-xl: 17px; --rm-fs-xxl: 21px; --rm-gap-xs: 2px; --rm-gap-sm: 5px; --rm-gap-md: 10px; --rm-gap-lg: 15px; --rm-gap-xl: 24px; --rm-line-height: 1.4; } /* 70% «Компактно» — DEFAULT. Уровень прежнего compact-набора токенов. */ :root[data-density='standard'] { --rm-fs-xs: 11px; --rm-fs-sm: 12px; --rm-fs-md: 13px; --rm-fs-lg: 15px; --rm-fs-xl: 20px; --rm-fs-xxl: 25px; --rm-gap-xs: 3px; --rm-gap-sm: 6px; --rm-gap-md: 12px; --rm-gap-lg: 18px; --rm-gap-xl: 28px; --rm-line-height: 1.45; } /* 85% «Крупно» — совпадает со старым large-уровнем токенов (§1 критично). */ :root[data-density='large'] { --rm-fs-xs: 13px; --rm-fs-sm: 14px; --rm-fs-md: 16px; --rm-fs-lg: 18px; --rm-fs-xl: 24px; --rm-fs-xxl: 32px; --rm-gap-xs: 5px; --rm-gap-sm: 10px; --rm-gap-md: 20px; --rm-gap-lg: 30px; --rm-gap-xl: 44px; --rm-line-height: 1.60; } @media (prefers-reduced-motion: reduce) { :root { --rm-t-fast: 0ms; --rm-t-med: 0ms; } }