/* ЕГЭLand — единый источник дизайн-токенов. * * Подключается ОДНИМ И ТЕМ ЖЕ файлом из двух мест: * 1. frontend/index.html — React-приложение * 2. frontend/public/*/index.html — 5 встроенных дашбордов * * До этого файла токены были продублированы семь раз: свой набор в App.css и * ещё по своему в каждом дашборде, причём в трёх разных словарях * (--card/--ink/--line vs --paper/--panel/--body vs --bg2/--text/--border). * Отсюда и разъезжались цвета: у research был свой лайм #d8ff3e, у trends — * свой --muted. Теперь значение живёт здесь, а локальные имена дашбордов * становятся псевдонимами (--card: var(--bg2)) — селекторы не переименованы, * вёрстка не тронута. * * Лежит в public/, а не в src/, потому что дашборды — статические файлы без * сборки: сослаться на бандл Vite они не могут. Файл не хеширован по имени, * поэтому proxy.js отдаёт нехешированный CSS с no-cache — иначе после деплоя * новый бандл приезжал бы со старыми переменными. */ /* ── Шрифты бренда — Druk Cyr (дисплей) + Gilroy (текст), из /public/fonts. Диапазоны весов раскладывают запрошенный вес на реальные файлы: у Druk Cyr есть только Medium/Bold/Heavy, поэтому запрос 600–700 попадает в Bold, а не в несуществующее светлое начертание. ── */ @font-face { font-family: 'Druk Cyr'; src: url('/fonts/DrukCyr-Medium.woff2') format('woff2'); font-weight: 400 550; font-style: normal; font-display: swap; } @font-face { font-family: 'Druk Cyr'; src: url('/fonts/DrukCyr-Bold.woff2') format('woff2'); font-weight: 551 799; font-style: normal; font-display: swap; } @font-face { font-family: 'Druk Cyr'; src: url('/fonts/DrukCyr-Heavy.woff2') format('woff2'); font-weight: 800 950; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('/fonts/Gilroy-Regular.woff2') format('woff2'); font-weight: 300 450; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('/fonts/Gilroy-Medium.woff2') format('woff2'); font-weight: 451 549; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('/fonts/Gilroy-SemiBold.woff2') format('woff2'); font-weight: 550 649; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('/fonts/Gilroy-Bold.woff2') format('woff2'); font-weight: 650 799; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('/fonts/Gilroy-Black.woff2') format('woff2'); font-weight: 800 950; font-style: normal; font-display: swap; } :root { color-scheme: light; /* Foreground rgb — drives every alpha border/hover/fill; flips per theme so the whole UI can swap light↔dark from one variable. */ --ink-rgb: 27, 25, 26; /* Backgrounds — ЕГЭLand light theme (cream page, white surfaces) */ --bg: #F3F2EE; --bg2: #FFFFFF; --bg3: #ECEAE2; --bg-elevated: #FFFFFF; /* Псевдоним: UserSettings.css ссылался на --bg-secondary, которого не существовало и без фоллбэка — фон просто не рисовался. */ --bg-secondary: var(--bg3); /* Borders */ --border: rgba(var(--ink-rgb), 0.10); --border-strong: rgba(var(--ink-rgb), 0.16); --border-focus: rgba(98, 126, 224, 0.55); /* Псевдоним: ActionCenter.css рисовал засечки шкалы через var(--line). Токен не был определён и без фоллбэка, поэтому background становился невалидным и засечки были не видны вовсе. */ --line: var(--border); /* Lime accent family (brand signature — identical in both themes) */ --accent: #D7F853; --accent-interactive: #C6E93F; --accent-hover: #E2FF6E; --accent-dim: rgba(215, 248, 83, 0.18); --accent-glow: rgba(215, 248, 83, 0.35); --accent-surface: rgba(215, 248, 83, 0.12); --on-accent: #1B191A; /* text on SOLID lime — always dark, never flips */ --accent-text: #4F6A0F; /* accent as TEXT (dark lime on light) */ /* Псевдонимы к --accent: без них подсветка выбранной строки уходила в серый (--accent-rgb падал в --ink-rgb), а accent-color чекбоксов — в почти чёрный #10130c. */ --accent-rgb: 215, 248, 83; --accent-ink: var(--on-accent); /* Brand secondary palette */ --brand-blue: #627EE0; --brand-lavender: #E2D1FF; --brand-purple: #9268D6; /* Semantic */ --green: #1A6755; --amber: #D59A27; --red: #CD1928; /* Спутники к семантике — тем же приёмом, что --ink-rgb и --accent-rgb. Нужны там, где цвет берут с произвольной альфой: подложек и границ в коде полсотни, и альфы у них все разные (0.04…0.75). Фиксированные --ok-surface / --err-border такое не покрывают, а привязка к ним сплющила бы прозрачности. С -rgb альфа сохраняется точной, тон становится брендовым, и всё это ещё и флипается по теме. */ --green-rgb: 26, 103, 85; --amber-rgb: 213, 154, 39; --red-rgb: 205, 25, 40; --brand-blue-rgb: 98, 126, 224; --brand-purple-rgb: 146, 104, 214; /* Текстовые варианты акцентных цветов. Заливка и текст — разные роли: #D59A27 на кремовом даёт 2.21:1, читать нельзя, но как фон плашки он хорош. Пара «заливка + -text» уже была в системе как --accent / --accent-text, здесь она просто достроена. Считать контраст надо не по --bg, а по самой тёмной светлой поверхности --bg3 #ECEAE2 — именно она связывает. Каждый цвет получен затемнением исходного вдоль того же тона, поэтому цветового сдвига нет. Минимум по трём фонам: 4.66 / 4.67 / 4.68. */ --amber-text: #866119; --brand-blue-text: #4D63B1; --brand-purple-text: #7855B0; /* Text scale */ --text: #1B191A; --text-secondary: #4A4749; /* #85807E давал 3.48:1 на --bg и всего 3.24 на --bg3 — ниже AA, а этим цветом набраны почти все подписи 11–12px. #6B6665 держит 5.05 / 5.65 / 4.69 по трём светлым фонам: тот же тон, на 20% темнее. */ --muted: #6B6665; --disabled: #B3AEA9; /* Glass surfaces */ --glass: rgba(var(--ink-rgb), 0.03); --glass-hover: rgba(var(--ink-rgb), 0.06); --glass-border: rgba(var(--ink-rgb), 0.10); --glass-frost: rgba(243, 242, 238, 0.82); --glass-card: var(--bg2); --glass-card-border: rgba(var(--ink-rgb), 0.10); /* ── Шкала радиусов ─────────────────────────────────────────────────────── Чётный шаг 4–20 плюс волосяная и пилюля. Выведена из фактического распределения (18 разных значений на ~190 объявлений), а не из идеала: схлопнуты только соседи, сдвиг нигде не больше 1px — 5 и 7 к 6, 9 к 8, 11 к 10, мелочь 1/1.5/3 к 2. Подтягивать 8→10 или 12→14 значило бы двигать вид, а не приводить его к системе. Имена по ЗНАЧЕНИЮ — той же конвенцией, что --sp-*. Прежние xs/sm/md/lg/xl оставлены псевдонимами: на них ссылаются семь файлов. */ --radius-2: 2px; /* волосяная: засечки шкал, тонкие полоски ← 1, 1.5, 3 */ --radius-4: 4px; --radius-6: 6px; /* ← 5, 7 */ --radius-8: 8px; /* ← 9 */ --radius-10: 10px; /* ← 11 */ --radius-12: 12px; --radius-14: 14px; --radius-16: 16px; --radius-18: 18px; --radius-20: 20px; --radius-pill: 999px; --radius-xs: var(--radius-4); --radius-sm: var(--radius-6); --radius-md: var(--radius-10); --radius-lg: var(--radius-14); --radius-xl: var(--radius-18); /* Type + motion */ --font-display: 'Druk Cyr', system-ui, sans-serif; /* display: large headings only (≥22px) */ --font-text: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --transition: 0.18s ease; --transition-slow: 0.32s cubic-bezier(0.4, 0, 0.2, 1); /* Shadows */ --shadow-sm: 0 1px 3px rgba(27, 25, 26, 0.08); --shadow-md: 0 4px 14px rgba(27, 25, 26, 0.10), 0 1px 4px rgba(27, 25, 26, 0.06); --shadow-lg: 0 10px 30px rgba(27, 25, 26, 0.14), 0 2px 8px rgba(27, 25, 26, 0.08); --shadow-glow: 0 0 20px rgba(215, 248, 83, 0.30); /* Layout. --sidebar-width убран вместе с самим сайдбаром: его CSS удалён как недостижимый (ни одного упоминания в .tsx). --right-panel-width оставлен — на него опирается ScheduledReports.css, компонент сейчас спящий, но код мы не удаляем. */ --right-panel-width: 340px; /* ── Шкала кегля ────────────────────────────────────────────────────────── Выведена из фактического распределения (753 объявления font-size, 32 разных значения), а не из идеала — чтобы миграция была визуально нейтральной. Значения в CSS-px, не в rem: .app-main несёт zoom: 1.25, и rem от этого не спасает, а привязка к root-font-size только мешает читать диффы. ВАЖНО для дашбордов: у reglament и research zoom вложенный (1.25 × 1.15), у остальных — 1.25, у приложения — 1.25. Один и тот же токен кегля нарисовался бы на разных поверхностях разным физическим размером, поэтому дашборды берут отсюда цвет, радиус и тень, но НЕ размеры шрифта. Дробные 9.5 / 10.5 / 11.5 / 12.5 / 13.5 схлопываются к соседям: сдвиг ±0.5px, глазом не ловится. Отдельно оставлен --fs-body-sm 12.5px — это кегль плотных таблиц, 79 объявлений, округлять его вниз значит терять строку на экране. */ --fs-micro: 10px; /* ← 9, 9.5, 10, 10.5 */ --fs-caption: 11px; /* ← 11, 11.5 */ --fs-label: 12px; /* ← 12 */ --fs-body-sm: 12.5px; /* плотные таблицы */ --fs-body: 13px; /* ← 13, 13.5 */ --fs-body-lg: 14px; /* ← 14, 14.5 — канонический body по DESIGN_CODE */ --fs-subhead: 15px; --fs-subhead-lg: 16px; /* ← 16, 17 */ --fs-title: 18px; /* ← 18, 19 */ --fs-title-lg: 20px; /* ← 20, 21 */ /* Порог Druk Cyr: ниже 22px дисплейный шрифт не ставим (docs/DESIGN_CODE.md) */ --fs-display: 22px; --fs-display-lg: 26px; --fs-hero-sm: 32px; --fs-stat-lg: 36px; --fs-hero: 38px; --fs-hero-lg: 42px; --fs-stat-xl: 46px; /* ── Шкала начертаний ───────────────────────────────────────────────────── Двадцать одно значение (400…800, включая 480/510/540/551/560/580/650/760) создавало иллюзию шкалы: @font-face подключены ДИАПАЗОНАМИ, поэтому 480/500/510/540 уже сегодня рисуются одним и тем же файлом Gilroy-Medium. Схлопывание к пяти реальным начертаниям не меняет на экране ничего. Осторожно с дисплейным шрифтом: у Druk Cyr граница проходит по 550/551, а не по 549/550. Поэтому на элементе с var(--font-display) вес 400–550 даст Medium, а не Bold. Все текущие места с --font-display стоят на 600/700 — то есть в Bold, как и задумано. */ --fw-regular: 400; /* Gilroy-Regular (диапазон 300–450) */ --fw-medium: 500; /* Gilroy-Medium (451–549) ← 480, 510, 540 */ --fw-semibold: 600; /* Gilroy-SemiBold (550–649) ← 550, 560, 580 */ --fw-bold: 700; /* Gilroy-Bold (650–799) ← 650, 760 */ --fw-black: 800; /* Gilroy-Black (800–950) */ /* ── Шкала отступов ─────────────────────────────────────────────────────── Чётный шаг: интерфейс плотный (медиана отступа 8–12px), на нечётных значениях никакого ритма не построить, а разница в 1px глазом не читается. Крупная часть идёт реже — 28 / 32 / 40 / 48. Имена по ЗНАЧЕНИЮ, а не по индексу. Индексная запись (--sp-3: 8px) заставляет держать таблицу в голове; --sp-8 говорит сам за себя, а проверять шкалу машинно это не мешает. Значения крупнее 48px (56, 60, 64, 96) и одиночные 26/30/34 намеренно остались литералами: подтягивать их к шкале значило бы двигать раскладку на 2–72px, то есть менять дизайн, а не приводить его к системе. */ --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; --sp-18: 18px; --sp-20: 20px; --sp-22: 22px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; /* ── Слои ───────────────────────────────────────────────────────────────── Было 20 сырых значений от 1 до 9000 и коллизия трёх разных слоёв на 200. Именуются только слои уровня приложения; внутрикомпонентные 1/5/10/20 остаются как есть — это порядок внутри одного stacking context, а не слой. */ --z-sticky: 30; --z-rail: 60; --z-overlay: 90; --z-popover: 100; --z-modal: 200; --z-toast: 400; /* ── Статусные поверхности ──────────────────────────────────────────────── Пара «граница + подложка» для предупреждения повторена в коде дословно восемь раз, и рядом с ней в тех же правилах стоят то брендовые токены, то остатки Tailwind. Три роли × три слоя закрывают все баннеры, плашки и теги разом. */ --ok-text: var(--green); --ok-border: rgba(26, 103, 85, 0.35); --ok-surface: rgba(26, 103, 85, 0.10); --warn-text: var(--amber-text); --warn-border: rgba(213, 154, 39, 0.45); --warn-surface: rgba(213, 154, 39, 0.10); --err-text: var(--red); --err-border: rgba(205, 25, 40, 0.35); --err-surface: rgba(205, 25, 40, 0.10); --info-text: var(--brand-blue-text); --info-border: rgba(98, 126, 224, 0.35); --info-surface: rgba(98, 126, 224, 0.10); } /* ── Dark theme — flips the foreground rgb + surfaces + text; lime accent and its dark on-text stay identical (lime works on both). Toggled via a data-theme attribute on from App.tsx, so it swaps with no reload. ── */ :root[data-theme="dark"] { color-scheme: dark; --ink-rgb: 243, 242, 238; /* cream — every alpha border/fill flips light */ --bg: #17140F; --bg2: #221E18; --bg3: #13100C; --bg-elevated: #221E18; --border-focus: rgba(130, 158, 240, 0.6); --accent-text: #D7F853; /* accent-as-text goes light lime on dark */ /* Был #34D399 — это Tailwind emerald-400 (тон 158°), чужой палитре. #3CCEAC стоит на брендовом тоне 166° и по светлоте почти совпадает со старым (9.28 против 9.55 на --bg), поэтому тёмная тема визуально не съезжает. */ --green: #3CCEAC; --amber: #E7B23A; --red: #FF6B72; --green-rgb: 60, 206, 172; --amber-rgb: 231, 178, 58; --red-rgb: 255, 107, 114; /* На тёмном фоне заливочные оттенки уже проходят AA как текст (9.47 / 4.88 / 4.52), поэтому текстовые варианты совпадают с основными. */ --amber-text: var(--amber); --brand-blue-text: var(--brand-blue); --brand-purple-text: var(--brand-purple); --text: #F3F2EE; --text-secondary: #C6C2B9; --muted: #8F8A80; --disabled: #5C574F; --glass-frost: rgba(23, 20, 15, 0.82); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 20px rgba(215, 248, 83, 0.22); /* Статусные поверхности пересчитаны на светлые версии семантических цветов: подложка из тёмного #1A6755 на фоне #17140F была бы неразличима. Альфы подняты — на тёмном тот же процент читается глуше. */ --ok-border: rgba(60, 206, 172, 0.35); --ok-surface: rgba(60, 206, 172, 0.14); --warn-border: rgba(231, 178, 58, 0.40); --warn-surface: rgba(231, 178, 58, 0.14); --err-border: rgba(255, 107, 114, 0.38); --err-surface: rgba(255, 107, 114, 0.14); --info-border: rgba(98, 126, 224, 0.40); --info-surface: rgba(98, 126, 224, 0.16); }