/* ============================================================================= FM · Design tokens Единственный источник правды по цвету, типографике, отступам и движению. Меняешь здесь — меняется во всём приложении. Хардкода цветов больше нигде нет. Система построена на двух цветах и держится их без исключений. ПЕТРОЛЬ #12414F — структура: навигация, ссылки, подтверждённое, закрытое, «идёт по плану». Цвет спокойствия. ВЕРМИЛЬОН #C2470F — действие и тревога: главная кнопка, просрочка, брак, перерасход. Цвет, который требует реакции. Правило контраста: заливка кнопок и плотных плашек — #C2470F (белый текст даёт 5.0:1). Яркий #F0703A идёт только туда, где текста нет: ромбы, полосы, столбцы графиков, индикаторы. Нейтральные оттенки тонированы петролем — тёплых серых в проекте нет. ========================================================================== */ :root { /* --- 1. Петроль — основной ---------------------------------------------- */ --fm-brand: #12414F; /* базовый: ссылки, активный пункт, «ок» */ --fm-brand-soft: #1E6273; /* светлее: наведение, обводка фокуса */ --fm-brand-deep: #0C2C36; /* глубокий: тёмные поверхности, текст */ --fm-brand-tint: #D6E7EA; /* подложка плашек и выделенных строк */ --fm-brand-line: #9FCBD3; /* граница на светлом, текст на тёмном */ /* Производные от той же пары — нужны для зебры таблиц и мягких границ. Это интерполяции #D6E7EA → белый и #D6E7EA → #9FCBD3, семья та же. */ --fm-brand-tint-2: #E9F2F4; --fm-brand-line-2: #C3DDE2; /* Псевдонимы для старого кода: brand-strong читался как «глубокий». */ --fm-brand-strong: var(--fm-brand-deep); --fm-brand-on-dark: var(--fm-brand-line); /* --- 2. Вермильон — второй главный -------------------------------------- */ --fm-accent: #C2470F; /* ЗАЛИВКА: кнопки, плотные плашки */ --fm-accent-bright: #F0703A; /* ТОЛЬКО без текста: ромбы, полосы, графики */ --fm-accent-deep: #A8410F; /* ТЕКСТ на светлом фоне */ --fm-accent-tint: #FDEAE0; /* подложка */ --fm-accent-line: #F2B698; /* граница */ --fm-accent-tint-2: #FEF4EF; /* производная: самая светлая подложка */ --fm-accent-strong: var(--fm-accent); /* псевдоним для старого кода */ /* --- 3. Поверхности ------------------------------------------------------ Все нейтральные тонированы петролем: один семейный оттенок серого, тёплых примесей нет. */ --fm-bg: #F1F5F6; /* фон страницы */ --fm-surface: #FFFFFF; /* карточка, таблица */ --fm-surface-subtle: #F7FAFB; /* поле ввода, шапка таблицы, подвал карточки */ --fm-surface-sunken: #E7EFF1; /* утопленное: дорожка прогресса, скелетон */ --fm-border: #DCE7EA; --fm-border-soft: #E8F0F2; --fm-border-input: #CFDFE3; /* --- 4. Тёмная навигация ------------------------------------------------- Сайдбар — «диспетчерская»: глубокий петроль, а не чёрный. Тот же цвет, что и бренд, только на два шага темнее. */ --fm-nav-bg: #0C2C36; --fm-nav-bg-2: #113844; --fm-nav-border: #1B4B58; --fm-nav-edge: #082028; --fm-nav-text: #9FCBD3; --fm-nav-text-strong: #F1F5F6; /* Приглушённый на тёмном: 4.8:1 к самой светлой тёмной поверхности — карточке пользователя --fm-nav-bg-2. Темнее делать нельзя: на нём набраны подписи групп навигации, роль пользователя и счётчики. */ --fm-nav-text-mute: #86A7B0; --fm-nav-active-bg: linear-gradient(90deg, #174C5C, #113844); /* --- 5. Текст ------------------------------------------------------------ Три уровня, и все три проходят WCAG AA (4.5:1) на самом светлом фоне проекта — #F1F5F6. Четвёртый уровень намеренно ниже порога и годится только для плейсхолдеров и декоративных прочерков: стандарт их не требует, а осмысленный текст им набирать нельзя. text 13.9:1 заголовки, значения, имена text-2 6.8:1 основной текст списков и подписей text-3 4.6:1 подсказки, надзаголовки, вторичные подписи — предел text-4 3.3:1 ТОЛЬКО плейсхолдер и прочерк, не для чтения */ --fm-text: #0C2C36; --fm-text-2: #3D5A64; --fm-text-3: #52737D; --fm-text-4: #6B8B95; --fm-text-on-brand: #FFFFFF; /* --- 6. Сигналы ---------------------------------------------------------- Четыре состояния собраны из тех же двух цветов. Различаются не только оттенком, но и плотностью — заливка против подложки. Поэтому их видно и при дальтонизме, и на чёрно-белой печати: ок петроль, ЗАЛИВКА закрыто, подтверждено, оплачено инфо петроль, подложка справочная плашка, подсказка внимание вермильон, подложка ждёт действия, приближается срок ошибка вермильон, ЗАЛИВКА брак, просрочка, перерасход */ --fm-ok-bg: var(--fm-brand-tint); --fm-ok-fg: var(--fm-brand-deep); --fm-ok-line: var(--fm-brand-line); --fm-ok-solid: var(--fm-brand); --fm-info-bg: var(--fm-brand-tint-2); --fm-info-fg: var(--fm-brand); --fm-info-line: var(--fm-brand-line-2); --fm-warn-bg: var(--fm-accent-tint); --fm-warn-fg: var(--fm-accent-deep); --fm-warn-line: var(--fm-accent-line); --fm-warn-solid: var(--fm-accent-bright); --fm-danger-bg: var(--fm-accent-tint); --fm-danger-fg: var(--fm-accent-deep); --fm-danger-line: var(--fm-accent-line); --fm-danger-solid: var(--fm-accent); --fm-neutral-bg: var(--fm-surface-subtle); --fm-neutral-fg: var(--fm-text-2); --fm-neutral-line: var(--fm-border); /* --- 7. Типографика ------------------------------------------------------ Два семейства — ровно столько же, сколько цветов. Onest — заголовки, подписи, интерфейс. Кириллица родная (шрифт рисовался под неё), геометричный, с характером. Веса 400–800 дают полную иерархию без второго семейства. JetBrains Mono — суммы, номера вагонов, СТИР, даты, ID. Цифры одной ширины выстраиваются в столбик, а кириллица нужна для подписей вроде «ТШ-19006». Оба покрывают кириллицу — это обязательное условие: интерфейс на русском и узбекском. Шрифты без кириллицы сюда не ставить. */ --fm-font-display: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; --fm-font-text: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fm-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fm-fs-display: 28px; --fm-fs-h1: 21px; --fm-fs-h2: 17px; --fm-fs-h3: 15px; --fm-fs-body: 13.5px; --fm-fs-sm: 12.5px; --fm-fs-xs: 11.5px; --fm-fs-label: 10px; /* моно-надзаголовок, uppercase, letter-spacing */ --fm-lh-tight: 1.12; --fm-lh-base: 1.5; --fm-lh-loose: 1.6; /* Трекинг: крупный текст сжимаем, мелкий капс разводим. */ --fm-tr-display: -.028em; --fm-tr-title: -.015em; --fm-tr-label: .1em; /* --- 8. Сетка и размеры --------------------------------------------------- */ --fm-sidebar-w: 254px; --fm-topbar-h: 62px; --fm-page-x: 30px; --fm-space-1: 4px; --fm-space-2: 8px; --fm-space-3: 12px; --fm-space-4: 16px; --fm-space-5: 22px; --fm-space-6: 30px; --fm-space-7: 40px; /* Радиусы концентричные: внешняя оболочка мягче внутреннего ядра. Вложенная карточка внутри контейнера берёт на шаг меньший радиус. */ --fm-radius-xs: 5px; --fm-radius-sm: 7px; --fm-radius: 9px; --fm-radius-lg: 13px; --fm-radius-xl: 18px; --fm-radius-pill: 100px; /* --- 9. Тени ------------------------------------------------------------- Тонированы петролем, а не чёрным: тень на странице выглядит частью палитры, а не грязью под карточкой. Свет всегда сверху. */ --fm-shadow-sm: 0 1px 2px rgba(12, 44, 54, .06); --fm-shadow-md: 0 1px 2px rgba(12, 44, 54, .05), 0 10px 26px -18px rgba(12, 44, 54, .42); --fm-shadow-lg: 0 1px 2px rgba(12, 44, 54, .05), 0 22px 46px -26px rgba(12, 44, 54, .46); /* Подъём при наведении на кликабельную карточку */ --fm-shadow-hover: 0 1px 2px rgba(12, 44, 54, .06), 0 16px 32px -20px rgba(12, 44, 54, .5); /* Внутренний блик по верхней кромке — даёт поверхности физическую толщину */ --fm-inset-top: inset 0 1px 0 rgba(255, 255, 255, .6); --fm-ring: 0 0 0 3px rgba(30, 98, 115, .22); --fm-ring-danger: 0 0 0 3px rgba(194, 71, 15, .20); /* --- 10. Слои ------------------------------------------------------------ */ --fm-z-sidebar: 40; --fm-z-topbar: 30; --fm-z-dropdown: 60; --fm-z-modal: 80; --fm-z-toast: 90; --fm-z-grain: 95; /* --- 11. Движение -------------------------------------------------------- Никакого linear и ease-in-out: интерфейс должен ощущаться как предмет с массой. Быстрый старт, мягкая остановка. */ --fm-ease: cubic-bezier(.22, .61, .36, 1); /* базовая: выезд, наведение */ --fm-ease-out: cubic-bezier(.32, .72, 0, 1); /* тяжёлая: панели, модалки */ --fm-ease-in: cubic-bezier(.4, 0, 1, 1); /* уход с экрана */ --fm-t-fast: 140ms var(--fm-ease); --fm-t-base: 220ms var(--fm-ease); --fm-t-slow: 420ms var(--fm-ease-out); /* --- 12. Фирменные приёмы ------------------------------------------------ Ромб — знак FM: повёрнутый квадрат в марке, перед заголовком, в маркерах. Диагональная штриховка — «внимание»: ею помечаются просроченные строки и заблокированные зоны. Оба используют яркий вермильон без текста. */ --fm-hatch: repeating-linear-gradient( 135deg, rgba(240, 112, 58, .13) 0 5px, transparent 5px 10px); --fm-hatch-strong: repeating-linear-gradient( 135deg, rgba(240, 112, 58, .28) 0 4px, transparent 4px 9px); } /* Плотный режим таблиц — включается классом на , см. профиль пользователя */ html[data-density="compact"] { --fm-fs-body: 12.5px; --fm-fs-sm: 11.5px; }