/* ============================================================================ DevMetrix · tokens.css — единый слой дизайн-токенов (Phase 0) ---------------------------------------------------------------------------- ЕДИНЫЙ источник правды для цвета, типографики, ритма и радиусов. Имена переменных сохранены обратно-совместимыми с прежним base_admin.html, поэтому существующие шаблоны продолжают работать без правок. Один акцент вместо прежних трёх синих (#4f6ef7 / #2f81f7 / #6c5ce7): dark = #5b94dd, light = #2e6cb8. Цветность сознательно понижена (было C 0.19-0.20, стало 0.125-0.135): на почти-чёрном фоне высокая цветность синего вибрирует и читается как крик. Контраст при этом вырос, а не упал. Тема выбирается атрибутом (см. base_admin.html). ========================================================================== */ :root { /* — Шрифты (реально загружаются через в base_admin.html) — */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace; /* — Сайдбар: всегда тёмный (не зависит от темы, как в GitHub/Linear) — */ --sidebar-bg: #0d1117; --sidebar-hover: #1f2733; /* Активный пункт — приглушённая подсветка + светлый акцентный текст и полоска-индикатор. Раньше здесь была сплошная заливка #1f6feb: самый насыщенный синий системы (C 0.20) большим пятном на почти-чёрном фоне — главный источник «крика» в интерфейсе. */ --sidebar-active: rgba(91, 148, 221, 0.16); --sidebar-active-fg: #b7d4f9; --sidebar-indicator: #5b94dd; --text-sidebar: #8b949e; --text-sidebar-active: #ffffff; /* — Ритм: сетка 4pt — */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 72px; /* — Радиусы — */ --radius-card: 12px; --radius-input: 8px; --radius-pill: 999px; --radius-sm: 6px; /* — Типо-шкала — */ --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; /* — Движение — */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.15s; --dur-med: 0.25s; /* — Дефолтная (no-JS) тема ≈ светлая; JS ставит data-theme=dark до рендера — */ --content-bg: #f5f7fa; --bg-dark: #f5f7fa; --card-bg: #ffffff; --bg-card: #ffffff; --bg-input: #f0f2f5; --text-primary: #1a1d29; --text-secondary: #57606a; --text-tertiary: #8b949e; --border-color: #e0e4ec; --border-soft: #edf0f4; --accent-color: #2e6cb8; --accent-hover: #155aa7; --accent-tint: rgba(46, 108, 184, 0.10); --accent-cyan: #327e86; --success-color: #2e7b3f; --warning-color: #966c13; --danger-color: #b64340; --shadow-card: 0 1px 3px rgba(140, 149, 159, 0.12); --shadow-pop: 0 8px 30px rgba(140, 149, 159, 0.20); /* — Категориальная палитра графиков (light): отдельные, более тёмные ступени тех же оттенков — светлые на белом теряли контраст. Все соседние пары ΔE ≥ 13 при всех типах дальтонизма. — */ --chart-1: #2e6cb8; --chart-2: #b16f23; --chart-3: #7857ab; --chart-4: #206b38; --chart-5: #bb6690; --chart-other: #57606a; --chart-grid: #e0e4ec; } /* — Светлая тема (явно) — */ html[data-theme="light"] { --content-bg: #f5f7fa; --bg-dark: #f5f7fa; --card-bg: #ffffff; --bg-card: #ffffff; --bg-input: #f0f2f5; --text-primary: #1a1d29; --text-secondary: #57606a; --text-tertiary: #8b949e; --border-color: #e0e4ec; --border-soft: #edf0f4; --accent-color: #2e6cb8; --accent-hover: #155aa7; --accent-tint: rgba(46, 108, 184, 0.10); --accent-cyan: #327e86; --success-color: #2e7b3f; --warning-color: #966c13; --danger-color: #b64340; --shadow-card: 0 1px 3px rgba(140, 149, 159, 0.12); --shadow-pop: 0 8px 30px rgba(140, 149, 159, 0.20); /* — Категориальная палитра графиков (light): отдельные, более тёмные ступени тех же оттенков — светлые на белом теряли контраст. Все соседние пары ΔE ≥ 13 при всех типах дальтонизма. — */ --chart-1: #2e6cb8; --chart-2: #b16f23; --chart-3: #7857ab; --chart-4: #206b38; --chart-5: #bb6690; --chart-other: #57606a; --chart-grid: #e0e4ec; } /* — Тёмная тема (основная) — */ html[data-theme="dark"] { --content-bg: #0d1117; --bg-dark: #0d1117; --card-bg: #161b22; --bg-card: #161b22; --bg-input: #21262d; --text-primary: #f0f6fc; --text-secondary: #8b949e; --text-tertiary: #6e7681; --border-color: #30363d; --border-soft: #262c36; --accent-color: #5b94dd; --accent-hover: #70aaf5; --accent-tint: rgba(91, 148, 221, 0.14); --accent-cyan: #71c7d1; --success-color: #67bb75; --warning-color: #d7a955; --danger-color: #e66e68; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.45); /* — Категориальная палитра графиков (dark). Проверена на цветовую слепоту: все соседние пары ΔE ≥ 9 (OKLab×100) при deuter/protan/tritanopia. НЕ переиспользует семантические цвета (success/warning/danger). — */ --chart-1: #5b94dd; --chart-2: #f1ae6b; --chart-3: #a485da; --chart-4: #8fd89e; --chart-5: #e38ab5; --chart-other: #8b949e; /* «Другое» — вне ротации, всегда с подписью */ --chart-grid: #30363d; } /* ── База ── */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); background-color: var(--content-bg); color: var(--text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Числа в метриках и таблицах выравниваем по разрядам */ .num, .stat-value, .stat-tile .v, td.n, .metric-value { font-variant-numeric: tabular-nums; } /* Кастомный скроллбар */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #484f58; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #6e7681; } /* Доступность: видимый фокус */ :focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }