/* Токены оформления. Единственный источник цвета, радиуса, тени и шрифта. Читают: экран покупателя (копирует значения внутрь страницы), каркас панели, генератор обложек. Имена зафиксированы в contracts/design-handoff.md. Переименование ломает три задачи сразу, поэтому имена не трогаем, значения — можно. ── Почему тёмная тема записана ОДИН раз ────────────────────────────────── В ggsel-dd373 тёмная тема описана дважды: блоком внутри @media (prefers-color-scheme: dark) и блоком :root[data-theme="dark"] для ручного тумблера. Правка обязана идти в оба места, расхождение видно только на машине, где система светлая, а панель переключена руками, — то есть почти никогда, и всегда поздно. Здесь каждое значение цвета стоит в файле ровно один раз: пара «светлое, тёмное» живёт внутри light-dark(). Какое из двух подставится, решает свойство color-scheme, а его выставляют три коротких правила ниже — по системе и по атрибуту data-theme. Расходиться нечему: копии нет. Тени тоже единственны: геометрия у обеих тем одна, различается только цвет тени, а он — обычный цвет, и берётся тем же light-dark(). В тёмной теме тень карточки прозрачна — это и есть «тени нет», рамки достаточно. ── Роли цвета ──────────────────────────────────────────────────────────── Статус (--ok / --warn / --bad / --info), серия графика (--data-1..4) и навигация. Рабочая область нейтральная, а синий отмечает действие и текущий раздел. Статус никогда не работает в одиночку: точка плюс слово. Порядок серий на графике: --data-1 → --data-3 → --data-4 → --data-2. Не подряд: зелёный (--data-2) и янтарный (--data-3) при протанопии дают ΔE 3.3 при пороге 8 — для дальтоника это один цвет, и соседями в одной легенде они не ставятся. ── Контраст ───────────────────────────────────────────────────────────── Ступени текста считаны на самом невыгодном фоне каждой темы — --surface-2, а не на белом и не на чёрном: подписи живут и на подложках. --ink-4 нетекстовый: 1.7:1. Разделители, точки статуса, полосы стакана — его работа; надпись им набирать нельзя. Токен рамки или сетки в роли текста запрещён так же. Статусы доведены до 4.5:1 НА ПОДЛОЖКЕ ПИЛЮЛИ (over(--*-bg, --surface-2)), а не на голом фоне: пилюля подмешивает под текст свой фон, и композит темнее любого из двух. */ :root { /* Обе темы разрешены; конкретную выбирает система. */ color-scheme: light dark; /* ── Поверхности ─────────────────────────────────────────────────────── */ --bg: light-dark(#EEF2F7, #090D13); --panel: light-dark(#F8FAFC, #0D131C); --surface: light-dark(#FFFFFF, #121A25); --surface-2: light-dark(#E8EDF4, #1B2634); --surface-3: light-dark(#D6DEE9, #2A3849); /* ── Рамки ───────────────────────────────────────────────────────────── */ --border: light-dark(rgba(15, 23, 42, .13), rgba(226, 232, 240, .12)); --border-strong: light-dark(rgba(15, 23, 42, .24), rgba(226, 232, 240, .24)); /* ── Текст, четыре ступени ───────────────────────────────────────────── */ --ink: light-dark(#0F172A, #F8FAFC); /* тело, числа, заголовки */ --ink-2: light-dark(#3F4C5F, #C2CCDA); /* подписи, второстепенные числа */ --ink-3: light-dark(#5F6E82, #98A7BA); /* время, ключи, методика */ --ink-4: light-dark(#A8B3C2, #526174); /* НЕ текст: точки, разделители */ /* Синий акцент связывает активный раздел, выбранный фильтр и действие. */ --accent: light-dark(#1D4ED8, #78A7FF); --accent-hover: light-dark(#173FAF, #94BAFF); --accent-soft: light-dark(rgba(29, 78, 216, .10), rgba(120, 167, 255, .15)); --accent-text: light-dark(#FFFFFF, #08101F); /* Навигация остаётся тёмной в обеих темах: это устойчивый ориентир между разделами, а синий обозначает только текущий раздел. */ --rail: light-dark(#111827, #070B11); --rail-hover: light-dark(rgba(255, 255, 255, .08), rgba(255, 255, 255, .09)); --rail-border: light-dark(rgba(255, 255, 255, .12), rgba(255, 255, 255, .10)); --rail-text: light-dark(#F8FAFC, #F8FAFC); --rail-muted: light-dark(#AAB6C7, #9CAABD); /* ── Статусы ─────────────────────────────────────────────────────────── */ --ok: light-dark(#0F7240, #3ED07E); --warn: light-dark(#8D5404, #F5B143); --bad: light-dark(#B0362E, #F2685C); --info: light-dark(#2565DA, #5AA0FA); --ok-bg: light-dark(rgba(18, 138, 78, .11), rgba(62, 208, 126, .13)); --warn-bg: light-dark(rgba(178, 106, 6, .13), rgba(245, 177, 67, .13)); --bad-bg: light-dark(rgba(206, 63, 54, .11), rgba(242, 104, 92, .13)); --info-bg: light-dark(rgba(37, 101, 218, .11), rgba(90, 160, 250, .13)); --dim-bg: light-dark(rgba(136, 145, 159, .14), rgba(108, 117, 129, .18)); /* ── Серии графиков ──────────────────────────────────────────────────── */ /* Светлый --data-3 затемнён с #E08A0B: янтарь давал к белой карточке 2.69:1 при пороге 3:1, который графику нужен для линии. */ --data-1: light-dark(#0E9AB4, #1B9BB2); --data-2: light-dark(#16A34A, #2AAE6C); --data-3: light-dark(#C87908, #BE7D28); --data-4: light-dark(#6D4EE0, #8878EA); --grid: light-dark(rgba(16, 20, 28, .07), rgba(255, 255, 255, .06)); --baseline: light-dark(rgba(16, 20, 28, .16), rgba(255, 255, 255, .14)); --line-cmp: light-dark(#9AA3AF, #5D6773); /* референс-линия, не серия */ /* ── Тени ────────────────────────────────────────────────────────────── */ --elev-bg: light-dark(#FFFFFF, #1B2634); --elev-edge: light-dark(rgba(15, 23, 42, .18), rgba(226, 232, 240, .22)); --sh-near: light-dark(rgba(15, 23, 42, .06), rgba(0, 0, 0, .46)); --sh-far: light-dark(rgba(15, 23, 42, .10), rgba(0, 0, 0, .58)); --elev-sh: 0 1px 2px var(--sh-near), 0 12px 30px var(--sh-far); --card-sh: 0 1px 2px light-dark(rgba(16, 20, 28, .05), rgba(0, 0, 0, 0)); --tip-sh: 0 10px 30px light-dark(rgba(16, 20, 28, .16), rgba(0, 0, 0, .6)); --focus: light-dark(rgba(29, 78, 216, .58), rgba(120, 167, 255, .68)); /* ── Радиусы ─────────────────────────────────────────────────────────── */ --r-shell: 20px; /* оболочка страницы, крупные полотна */ --r-card: 16px; /* карточка */ --r-ctl: 10px; /* кнопка, поле, чип */ --r-badge: 999px; /* пилюля статуса, точка */ /* ── Шрифты ──────────────────────────────────────────────────────────── */ /* Системные нарочно: страницы открываются без сети. */ --font-ui: -apple-system, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* Шкала кеглей панели — девять ступеней, и низ у неё 11 px. Разница кегля обязана нести смысл: 14 против 13 — «имя, по которому ищут» против «числа у найденной строки»; 16 против 14 — «раздел» против «строки». */ --fs-xs: 11px; /* глиф «?», счётчики вкладок */ --fs-sm: 12px; /* второй ярус: подписи, время, ключи */ --fs-md: 13px; /* таблицы, кнопки, чипы, поля */ --fs-base: 13.5px; /* тело панели */ --fs-lg: 14px; /* имя позиции, пункт рельса */ --fs-xl: 16px; /* заголовок раздела внутри карточки */ --fs-h1: 22px; /* заголовок страницы */ --fs-num: 24px; /* число-плитка */ --fs-hero: 28px; /* число-герой */ /* Экран покупателя читают с телефона и один раз — там шкала крупнее. */ --fs-b-note: 13px; --fs-b-body: 15.5px; --fs-b-step: 16px; --fs-b-h1: 21px; --fs-b-hero: 26px; /* ── Ритм и размеры ──────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --ctl-h: 32px; /* одна высота на все контролы панели */ --rail-w: 224px; /* левая навигация */ --ease: cubic-bezier(.23, 1, .32, 1); } /* Ручной тумблер темы. Ровно два правила и ни одного повторённого цвета: меняется только то, из какой половины light-dark() берётся значение. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* Системная тёмная — тем же способом, для читателя, который ищет здесь привычный медиазапрос. Правило ничего не переопределяет: color-scheme выше уже разрешает обе темы, и браузер выбирает тёмную сам. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }