/* Copack — дизайн-токены (Material 3). Единственный файл, где допустимы литеральные цвета. Ось темы — атрибут data-theme на : light (по умолчанию) и dark. */ :root, [data-theme="light"] { /* --- Цветовые роли: светлая тема --- */ --primary: #415f91; --on-primary: #ffffff; --primary-container: #d6e3ff; --on-primary-container: #001b3d; --secondary: #565f71; --on-secondary: #ffffff; --secondary-container: #dae2f9; --on-secondary-container: #131c2b; --error: #ba1a1a; --on-error: #ffffff; --error-container: #ffdad6; --on-error-container: #410002; --surface: #f9f9ff; --on-surface: #191c20; --on-surface-variant: #44474e; --surface-container-lowest: #ffffff; --surface-container-low: #f3f3fa; --surface-container: #edeef4; --surface-container-high: #e7e8ee; --surface-container-highest: #e2e2e9; --outline: #74777f; --outline-variant: #c4c6d0; --inverse-surface: #2e3036; --inverse-on-surface: #f0f0f7; --inverse-primary: #aac7ff; --success: #3a6a3f; --success-container: #bcf0bb; --on-success-container: #00210a; --warning: #7d5700; --warning-container: #ffddb2; --on-warning-container: #281800; /* Навигатор нейтрально-серый: роли поверхности, а не собственная палитра. Ссылки var() разрешаются при использовании, поэтому тёмная тема переопределяет только --nav-surface, остальное следует за ролями автоматически. */ --nav-surface: var(--surface-container-high); --nav-on-surface: var(--on-surface); --nav-on-surface-variant: var(--on-surface-variant); --nav-active-surface: var(--secondary-container); --nav-active-on-surface: var(--on-secondary-container); --nav-outline: var(--outline-variant); /* Подложка модальных слоёв. */ --scrim: rgb(0 0 0 / 40%); /* --- Типографика --- */ --font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-size-base: 13px; --font-size-small: 12px; --font-size-label: 11px; --font-size-title: 18px; --font-size-brand: 15px; --line-height-base: 1.45; /* --- Сетка и размеры (шаг 8px) --- */ --space-half: 4px; --space: 8px; --space-double: 16px; --space-triple: 24px; --corner-xs: 4px; --corner-s: 8px; --corner-m: 12px; --corner-l: 16px; --corner-full: 999px; --nav-width: 250px; --nav-width-collapsed: 64px; --topbar-height: 56px; --field-height: 40px; --row-height: 34px; /* Высота таблицы: экран минус шапка, панель действий и заголовок раздела. */ --grid-max-height: calc(100vh - 210px); --control-height: 32px; /* --- Тени --- */ --elev-1: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%); --elev-2: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%); --elev-3: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px rgb(0 0 0 / 30%); /* --- Прочее --- */ --transition-fast: 120ms ease; --transition: 200ms ease; --disabled-opacity: 0.38; } [data-theme="dark"] { --primary: #aac7ff; --on-primary: #0a305f; --primary-container: #284777; --on-primary-container: #d6e3ff; --secondary: #bec6dc; --on-secondary: #283141; --secondary-container: #3e4759; --on-secondary-container: #dae2f9; --error: #ffb4ab; --on-error: #690005; --error-container: #93000a; --on-error-container: #ffdad6; --surface: #111318; --on-surface: #e2e2e9; --on-surface-variant: #c4c6d0; --surface-container-lowest: #0c0e13; --surface-container-low: #191c20; --surface-container: #1d2024; --surface-container-high: #282a2f; --surface-container-highest: #33353a; --outline: #8e9099; --outline-variant: #44474e; --inverse-surface: #e2e2e9; --inverse-on-surface: #2e3036; --inverse-primary: #415f91; --success: #a1d3a2; --success-container: #22512a; --on-success-container: #bcf0bb; --warning: #ffba50; --warning-container: #5f4100; --on-warning-container: #ffddb2; --nav-surface: var(--surface-container); --scrim: rgb(0 0 0 / 60%); }