/* Токены дизайн-системы ARKADA. * * Единственное место, где в приложении заведены цвета, радиусы, отступы и размеры шрифта. * Хардкод любого из них внутри компонента — дефект: тёмная тема ломается в одном месте, * и заметить это можно только глазами. * * Значения перенесены из утверждённого прототипа (contracts/unified_pwa/ARKADA PWA prototype.html, * кадр 1c «Токены и каталог компонентов»). Прототип объявляет их на обёртке макета телефона; * здесь они на :root — иначе тему не переключить классом на . * * Тема по умолчанию — светлая. Тёмная включается классом ark-dark на и переопределяет * ТОЛЬКО цвета и тени: шкалы, размеры и тач-цели от темы не зависят. */ :root { /* Синий бренда. На полтона светлее синего из логотипа (#0154A3): контраст с белым 7,2:1 — читается на солнце и проходит AA для мелкого текста. */ --ark-brand: #0B57A4; --ark-brand-press: #08406F; --ark-brand-soft: #E1EBF5; /* Второй голос: быстрые действия, информационные плашки, переработка. */ --ark-accent: #1B7FC4; --ark-accent-soft: #E1EEF8; --ark-on-brand: #FFFFFF; --ark-ink: #182836; --ark-bg: #EEF2F6; --ark-surface: #FFFFFF; --ark-surface-2: #E6ECF2; --ark-fg: #17232F; --ark-fg-2: #546373; --ark-fg-3: #8494A3; --ark-line: #D8E0E8; /* Статусы функциональные: зелёный «принят / на смене», янтарный «ожидает / офлайн», красный «сломан / ошибка / требует действия». */ --ark-ok: #12704A; --ark-ok-soft: #DFF0E8; --ark-warn: #8C5A12; --ark-warn-soft: #FAEEDA; --ark-danger: #B32E24; --ark-danger-soft: #FAE6E4; /* Два токена сверх таблицы контракта — и оба про одно: шапка и тост стоят на --ark-ink ВСЕГДА, в обеих темах. Значит «цвет на этой поверхности» от темы не зависит и ниже, в блоке тёмной темы, не переопределяется. Без --ark-fg-on-ink пришлось бы взять --ark-on-brand, а это в тёмной теме #0B1219 на #0D141C — контраст 1,02:1, текста просто не видно. Значения взяты из прототипа, где стояли хардкодом. */ --ark-fg-on-ink: #FFFFFF; --ark-ok-on-ink: #3FBF7A; --ark-shadow-1: 0 1px 2px rgba(46,43,37,.14); --ark-shadow-2: 0 12px 32px rgba(46,43,37,.22); /* Радиусы: плашка / карточка и кнопка / панель и лист / только круги. Кнопки не пилюли — радиус кнопки равен радиусу карточки. */ --ark-r-sm: 8px; --ark-r-md: 16px; --ark-r-lg: 28px; --ark-r-full: 999px; /* Шаг сетки 4 px, поля экрана — 16 px. */ --ark-space-1: 4px; --ark-space-2: 8px; --ark-space-3: 12px; --ark-space-4: 16px; --ark-space-5: 24px; --ark-space-6: 32px; /* Тело не мельче 14 px: текст читают на улице, часто в перчатках и на солнце. */ --ark-type-display: 28px; --ark-type-title: 20px; --ark-type-body: 16px; --ark-type-label: 14px; --ark-type-caption: 12px; /* Тач-цель и полевое действие (отметка прихода, скан). */ --ark-tap: 48px; --ark-tap-hero: 64px; --ark-dur: 200ms; --ark-ease: cubic-bezier(.2,.7,.3,1); /* Единственный стек. Кириллицы в Figtree нет — она идёт системным шрифтом, как в утверждённом прототипе. */ --ark-font: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Тема приложения включается классом на . Второй селектор нужен витрине и вообще любому месту, где две темы показывают рядом: тогда класс можно повесить на любой узел, а значения остаются в одном месте. */ :root.ark-dark, .ark-dark { --ark-brand: #5BA3EA; --ark-brand-press: #3D8AD4; --ark-brand-soft: #152738; --ark-accent: #4FA5DE; --ark-accent-soft: #12293A; /* В тёмной теме текст на синем — тёмный. Он же спасает красную кнопку: белое на #F0716A даёт около 2,5:1, тёмное — около 7:1. */ --ark-on-brand: #0B1219; --ark-ink: #0D141C; --ark-bg: #0D141C; --ark-surface: #152230; --ark-surface-2: #1D2E3F; --ark-fg: #E9F0F6; --ark-fg-2: #9CAEBE; --ark-fg-3: #6D8093; --ark-line: #26384A; --ark-ok: #4CBE86; --ark-ok-soft: #12291F; --ark-warn: #E0A44A; --ark-warn-soft: #2A2013; --ark-danger: #F0716A; --ark-danger-soft: #2C1615; --ark-shadow-1: 0 2px 10px rgba(0,0,0,.35); --ark-shadow-2: 0 -10px 40px rgba(0,0,0,.6); }