/* ========================================================================== sb-tokens.css - слой токенов дизайн-системы status-board. Визуальный язык 2026: «спокойный пульт». Приложение открыто весь рабочий день на втором мониторе и в телефоне, поэтому основа - глубокие холодные поверхности с малым перепадом светлоты, один акцент (синий Across) и пять статусных тонов, которые несут смысл. Всё остальное нейтрально и уступает данным. Два слоя: 1. ПАЛИТРА (--p-*) - сырые значения, одинаковые в обеих темах. Меняется только когда меняется бренд. 2. РОЛИ (--sb-*) - "поверхность страницы", "основной текст". Тема переопределяет роли, а не палитру. Компоненты обязаны читать ТОЛЬКО роли. Палитра в разметке - ошибка. Контрасты не подбираются на глаз: их пересчитывает design-system/check-contrast.js на каждом прогоне smoke. Файл подключается ПЕРВЫМ на каждой странице: здесь же лежат @font-face, чтобы шрифт начинал грузиться раньше стилей разделов. ========================================================================== */ /* -------------------------------------------------------------------------- Manrope - гарнитура интерфейса. Геометрический гротеск с полноценной кириллицей и табличными цифрами (tnum): доска обновляется по Socket.IO, и время с счётчиками не должны дёргаться. Переменное начертание 200-800, четыре подмножества - браузер скачивает только нужные. Лежит локально (frontend/fonts): внешние CDN в контуре закрыты. Лицензия SIL OFL - fonts/MANROPE-OFL.txt. -------------------------------------------------------------------------- */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } :root { /* ====================================================================== 1. Палитра. Не использовать напрямую в компонентах. ====================================================================== */ /* Нейтральные, тёмная ветвь. Холодный сине-чёрный: перепад между соседними ступенями 3-4% светлоты - слои различимы, но полотно не становится «полосатым». */ --p-ink-950: #070B13; --p-ink-900: #0A0F19; --p-ink-850: #0E1522; --p-ink-800: #121A29; --p-ink-750: #172133; --p-ink-700: #1C283C; --p-ink-650: #223047; --p-ink-600: #2B3A53; /* Нейтральные, светлая ветвь */ --p-gray-050: #FFFFFF; --p-gray-075: #F9FAFC; --p-gray-100: #F3F5F9; --p-gray-150: #EEF1F6; --p-gray-200: #E8ECF2; --p-gray-300: #E1E6EE; --p-gray-400: #D3DAE4; /* #5A6879 - самый светлый серый, что держит 4.5:1 на полотне и панели светлой темы. Светлее нельзя: проверено check-contrast.js. */ --p-gray-600: #56647A; --p-gray-700: #3F4D63; --p-gray-900: #0D1523; /* Текст на тёмном */ --p-ice-100: #EDF2F9; --p-ice-300: #A9B6CA; --p-ice-400: #8594AB; /* Знак Across: два цветных круга логотипа. */ --p-brand-amber: #BF8000; --p-brand-olive: #808000; /* Акцент - синий Across. */ --p-blue-300: #7DB6F5; --p-blue-400: #4D9BF0; /* тёмная тема */ --p-blue-600: #1D74D6; --p-blue-700: #1668C4; /* светлая тема */ --p-blue-rgb: 77, 155, 240; --p-blue-700-rgb: 22, 104, 196; /* Сигнальные. Тройки RGB - чтобы собирать заливки rgba() из одного тона, а не заводить отдельный хардкод под каждую прозрачность. */ --p-green-rgb: 52, 178, 118; --p-green-300: #7ED9A9; --p-green-800: #0F6E47; --p-amber-rgb: 230, 168, 48; --p-amber-300: #F0CD7E; --p-amber-800: #875705; --p-red-rgb: 235, 96, 96; --p-red-300: #F4A3A3; --p-red-800: #A12A2A; /* Статусы присутствия. Пять различимых тонов. Статус везде дублируется иконкой и подписью (правило A11Y-2): при дейтеранопии худшая пара держится именно на этом. */ --p-status-office: #3F95D2; --p-status-office-rgb: 63, 149, 210; --p-status-home: #3DAA74; --p-status-home-rgb: 61, 170, 116; --p-status-field: #C9951F; --p-status-field-rgb: 201, 149, 31; --p-status-vacation: #B593EC; --p-status-vacation-rgb: 181, 147, 236; --p-status-sick: #DD6F6F; --p-status-sick-rgb: 221, 111, 111; /* ====================================================================== 2. Шкалы. Общие для тем. ====================================================================== */ /* Шаг 4px. Всё, что не ложится на шаг, - повод пересмотреть блок, а не добавить токен. */ --sb-space-0: 2px; /* волосяной отступ: пилюля, подпись под числом */ --sb-space-1: 4px; --sb-space-2: 8px; --sb-space-3: 12px; --sb-space-4: 16px; --sb-space-5: 24px; --sb-space-6: 32px; --sb-space-7: 48px; /* Кегли. Семь ступеней интерфейса и две крупные - для чисел. Ниже 10px в интерфейсе не опускаемся. */ --sb-text-micro: 10px; /* счётчики в бейджах, дни недели в сетке */ --sb-text-xs: 11px; /* пилюли, вспомогательные подписи */ --sb-text-sm: 12px; /* подписи полей, легенда, примечания, шапка таблицы */ --sb-text-md: 13px; /* база: значения, ячейки, поля, кнопки */ --sb-text-lg: 15px; /* заголовки панелей и модальных окон */ --sb-text-touch: 16px; /* поля ввода на телефоне: меньше - iOS увеличит страницу */ --sb-text-xl: 18px; /* заголовок страницы */ --sb-text-2xl: 26px; /* число в плитке показателя */ --sb-text-3xl: 34px; /* ключевое число экрана (время чек-ина) */ --sb-weight-regular: 450; --sb-weight-medium: 600; --sb-weight-bold: 700; --sb-weight-heavy: 780; /* только крупные числа */ --sb-leading-tight: 1.1; /* крупные числа */ --sb-leading-snug: 1.3; /* заголовки */ --sb-leading-normal: 1.5; /* текст и подписи */ /* Трекинг. Manrope широкий: заголовки поджимаем, прописные подписи чуть разрежаем. */ --sb-tracking-caps: 0.06em; --sb-tracking-tight: -0.01em; --sb-tracking-tighter: -0.025em; --sb-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --sb-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace; /* Радиусы: маркер, контрол, поверхность, окно, крупная поверхность. */ --sb-radius-xs: 4px; --sb-radius-sm: 9px; --sb-radius-md: 13px; --sb-radius-lg: 18px; --sb-radius-xl: 24px; --sb-radius-full: 999px; /* Высоты контролов. */ --sb-control-sm: 30px; --sb-control-md: 36px; --sb-control-lg: 44px; /* Слои. */ --sb-z-sticky: 10; --sb-z-rail: 100; --sb-z-dropdown: 400; --sb-z-modal: 900; --sb-z-toast: 1000; /* Движение. Состояние - быстро, раскладка - медленнее, выход быстрее входа. Кривая «уверенного прибытия» без отскока. */ --sb-duration-instant: 90ms; --sb-duration-fast: 140ms; --sb-duration-base: 220ms; --sb-duration-slow: 380ms; --sb-ease: cubic-bezier(0.2, 0, 0, 1); --sb-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sb-ease-in: cubic-bezier(0.4, 0, 1, 1); /* ====================================================================== 3. Роли. Тёмная тема - основная. ====================================================================== */ color-scheme: dark; --sb-surface-page: var(--p-ink-950); --sb-surface-rail: var(--p-ink-900); --sb-surface-card: var(--p-ink-800); --sb-surface-raised: var(--p-ink-750); --sb-surface-hover: var(--p-ink-700); --sb-surface-input: var(--p-ink-900); --sb-border: var(--p-ink-650); --sb-border-soft: var(--p-ink-700); --sb-border-strong: var(--p-ink-600); --sb-text-primary: var(--p-ice-100); --sb-text-secondary: var(--p-ice-300); --sb-text-muted: var(--p-ice-400); --sb-brand-mark-a: var(--p-brand-amber); --sb-brand-mark-b: var(--p-brand-olive); --sb-accent: var(--p-blue-400); --sb-accent-hover: var(--p-blue-300); --sb-accent-ink: var(--p-ink-950); /* текст НА акценте тёмный: белый даёт 2.89:1 */ --sb-accent-soft: rgba(var(--p-blue-rgb), 0.14); --sb-accent-line: rgba(var(--p-blue-rgb), 0.42); --sb-accent-glow: rgba(var(--p-blue-rgb), 0.28); --sb-ok-bg: rgba(var(--p-green-rgb), 0.14); --sb-ok-line: rgba(var(--p-green-rgb), 0.40); --sb-ok-ink: var(--p-green-300); --sb-warn-bg: rgba(var(--p-amber-rgb), 0.14); --sb-warn-line: rgba(var(--p-amber-rgb), 0.42); --sb-warn-ink: var(--p-amber-300); --sb-bad-bg: rgba(var(--p-red-rgb), 0.14); --sb-bad-line: rgba(var(--p-red-rgb), 0.42); --sb-bad-ink: var(--p-red-300); /* Заливка статуса - тот же тон, что и рамка, на 13-16% прозрачности. В светлой теме заливки непрозрачные: полупрозрачный тон на белом вымывается до неразличимого. */ --sb-status-office-bg: rgba(var(--p-status-office-rgb), 0.14); --sb-status-office-line: var(--p-status-office); --sb-status-office-ink: #AAD4F2; --sb-status-home-bg: rgba(var(--p-status-home-rgb), 0.14); --sb-status-home-line: var(--p-status-home); --sb-status-home-ink: #9FE0BF; --sb-status-field-bg: rgba(var(--p-status-field-rgb), 0.16); --sb-status-field-line: var(--p-status-field); --sb-status-field-ink: #EFCD80; --sb-status-vacation-bg: rgba(var(--p-status-vacation-rgb), 0.16); --sb-status-vacation-line: var(--p-status-vacation); --sb-status-vacation-ink: #CBC0F5; --sb-status-sick-bg: rgba(var(--p-status-sick-rgb), 0.14); --sb-status-sick-line: var(--p-status-sick); --sb-status-sick-ink: #F3B4B4; /* Высоты. Тень не украшение: она отделяет слой от полотна, поэтому у неё есть смещение и мягкое размытие, а ступеней ровно столько, сколько слоёв. Блик сверху (--sb-highlight) - край поверхности, на который падает свет: в тёмной теме он отделяет карточку лучше любой рамки. */ --sb-elev-0: none; --sb-elev-1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 1px rgba(0, 0, 0, 0.18); --sb-elev-2: 0 10px 24px -8px rgba(0, 0, 0, 0.55), 0 3px 6px -2px rgba(0, 0, 0, 0.30); --sb-elev-3: 0 28px 64px -16px rgba(0, 0, 0, 0.70), 0 10px 20px -10px rgba(0, 0, 0, 0.45); --sb-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.045); /* Свечение полотна: едва заметный свет акцента в верхнем углу. Задаёт глубину без декоративных градиентов на самих данных. */ --sb-page-glow: radial-gradient(1100px 520px at 88% -8%, rgba(var(--p-blue-rgb), 0.085), transparent 62%), radial-gradient(900px 480px at -10% 105%, rgba(var(--p-status-vacation-rgb), 0.045), transparent 60%); /* Выходные и праздники в сетках календарей: тон «пропуска», но едва заметный - сотни ячеек не должны кричать. */ --sb-nonwork-bg: rgba(var(--p-red-rgb), 0.06); --sb-holiday-bg: rgba(var(--p-red-rgb), 0.13); --sb-scrim: rgba(3, 6, 12, 0.66); --sb-glass: rgba(10, 15, 25, 0.72); /* липкие шапки поверх прокрутки */ /* Бумага. Не роль темы, а физическое свойство носителя: документ, который печатают, остаётся чёрным по белому и в тёмной теме, и в светлой - поэтому эти токены ниже не переопределяются. */ --sb-paper-bg: #FFFFFF; --sb-paper-ink: #111111; --sb-paper-ink-soft: #555555; --sb-paper-line: #111111; /* Фокус виден всегда и одинаково. */ --sb-focus-ring: 0 0 0 3px var(--sb-accent-soft); --sb-focus-outline: 2px solid var(--sb-accent); --sb-selection: rgba(var(--p-blue-rgb), 0.32); --sb-scrollbar: var(--p-ink-650); --sb-scrollbar-hover: var(--p-ink-600); } [data-theme="light"] { color-scheme: light; --sb-surface-page: var(--p-gray-100); --sb-surface-rail: var(--p-gray-150); --sb-surface-card: var(--p-gray-050); --sb-surface-raised: var(--p-gray-075); --sb-surface-hover: var(--p-gray-150); --sb-surface-input: var(--p-gray-050); --sb-border: var(--p-gray-300); --sb-border-soft: var(--p-gray-200); --sb-border-strong: var(--p-gray-400); --sb-text-primary: var(--p-gray-900); --sb-text-secondary: var(--p-gray-700); --sb-text-muted: var(--p-gray-600); --sb-accent: var(--p-blue-700); --sb-accent-hover: var(--p-blue-600); --sb-accent-ink: var(--p-gray-050); --sb-accent-soft: rgba(var(--p-blue-700-rgb), 0.09); --sb-accent-line: rgba(var(--p-blue-700-rgb), 0.34); --sb-accent-glow: rgba(var(--p-blue-700-rgb), 0.22); --sb-ok-bg: rgba(var(--p-green-rgb), 0.12); --sb-ok-ink: var(--p-green-800); --sb-warn-bg: rgba(var(--p-amber-rgb), 0.14); --sb-warn-ink: var(--p-amber-800); --sb-bad-bg: rgba(var(--p-red-rgb), 0.11); --sb-bad-ink: var(--p-red-800); --sb-status-office-bg: #E6F1FB; --sb-status-office-line: #2F83C0; --sb-status-office-ink: #165D8F; --sb-status-home-bg: #E4F4EB; --sb-status-home-line: #2F8C5A; --sb-status-home-ink: #1E613D; --sb-status-field-bg: #FBF2DE; --sb-status-field-line: #BF8912; --sb-status-field-ink: #7A5605; --sb-status-vacation-bg: #EFECFB; --sb-status-vacation-line: #6F5FC0; --sb-status-vacation-ink: #4A3D8C; --sb-status-sick-bg: #FCEBEB; --sb-status-sick-line: #BE4B4B; --sb-status-sick-ink: #8C3131; --sb-elev-1: 0 1px 2px rgba(13, 21, 35, 0.06), 0 1px 1px rgba(13, 21, 35, 0.04); --sb-elev-2: 0 10px 24px -10px rgba(13, 21, 35, 0.16), 0 3px 6px -3px rgba(13, 21, 35, 0.08); --sb-elev-3: 0 28px 64px -18px rgba(13, 21, 35, 0.26), 0 10px 20px -10px rgba(13, 21, 35, 0.12); --sb-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9); --sb-page-glow: radial-gradient(1100px 520px at 88% -8%, rgba(var(--p-blue-700-rgb), 0.07), transparent 62%), radial-gradient(900px 480px at -10% 105%, rgba(var(--p-status-vacation-rgb), 0.06), transparent 60%); --sb-nonwork-bg: rgba(var(--p-red-rgb), 0.05); --sb-holiday-bg: rgba(var(--p-red-rgb), 0.11); --sb-scrim: rgba(13, 21, 35, 0.40); --sb-glass: rgba(243, 245, 249, 0.78); --sb-selection: rgba(var(--p-blue-700-rgb), 0.18); --sb-scrollbar: var(--p-gray-400); --sb-scrollbar-hover: var(--p-gray-600); } /* ========================================================================== Совместимость со старыми именами. theme.css и встроенные