/* Палитра и размеры. ИСТОЧНИК ПРАВДЫ — ../../DESIGN.md (закон вёрстки сайта, ведёт архитектор). Значения здесь меняются только вслед за ним, не наоборот. Раньше указатель вёл в «Референсы дизайна/02_Дизайн-система/НАПРАВЛЕНИЕ.md» — там теперь образ и палитра ВСЕЙ экосистемы (бот, форма, мини-апп), а правила вёрстки сайта разведены в DESIGN.md (03.08.2026). Чего здесь пока НЕТ и что ждёт задания: шрифтовые слоты внизу файла всё ещё расходятся с DESIGN.md — Golos Text, FiraXC и Mavka приходят шагом 2 задания «главная из прототипа», вместе с @font-face. Всё описано в DESIGN.md, раздел 5. */ :root { /* Мы — светлые. Без этого авто-тёмный режим Chrome на Android сам перекрашивает палитру в непредсказуемую грязь. */ color-scheme: light; /* Цвета */ --bg: #F1E6D2; /* фон страницы */ --surface: #FFFDF8; /* карточки, поля, модальные окна */ --surface-warm: #F7E7DC; /* выделенные блоки, наведение */ --border: #E6D9C2; /* рамки полей и карточек */ --border-strong: #DACBB4; /* разделители */ --text: #382F27; /* заголовки и основной текст */ --text-soft: #4A4133; /* длинные абзацы */ --text-muted: #6E6152; /* подписи, пояснения. Ровно настолько тёмный, чтобы проходить контраст 4.5:1 на всех трёх фонах палитры (аудит 01.08.2026); светлее нельзя */ /* Псевдонимы ряда (DESIGN.md §2). Источник — ряд ниже, старое имя на него ССЫЛАЕТСЯ. Держать здесь второй раз тот же hex нельзя: однажды поправят одну строку из двух. Порядок объявления значения не имеет — переменная разворачивается в месте использования, а не в месте описания. Живут, пока на них ссылаются старые страницы; перейдёт последняя — удалим. */ --accent: var(--terra-500); /* главные кнопки, ссылки */ --accent-light: var(--terra-400); /* рамки акцентов, иконки */ --gold: var(--gold-400); /* ТОЛЬКО награда и «результат зафиксирован» */ --success: var(--pine-400); /* выполненный шаг */ /* Не псевдоним: ступени с таким значением в ряду нет. Выводится из обращения шагом 5, до тех пор лежит числом (DESIGN.md, «Выводится из обращения»). */ --accent-deep: #A63A2A; /* нажатое состояние, важные заголовки */ /* Громкий ретро-оранжевый. Решено 08.08.2026, числа — DESIGN.md §2. ТОЛЬКО огромные буквы, плакатные пятна, полосы и рамки: ни на одном кремовом фоне он не даёт 4,5:1, поэтому мелкий текст им не пишут — ни этим цветом, ни белым поверх него. Кнопки и ссылки остаются терракотовыми, --hot не кнопочный цвет. Отклонён #E83818: чище и злее, но выпадает из палитры. */ --hot: #E1461F; /* Тот же тон (12°), яркость ниже на треть — вот этим текст любого размера можно: 4,83:1 на --bg, 5,87:1 на --surface. Но только на кремовом: на тёмной секции даёт 2,69, там акцент берётся из --terra-300. Прежний #C62E12 снят — другой тон (9°) и 4,47:1 на --bg, недобор. */ --hot-ink: #B43819; /* ── Ряды цвета (DESIGN.md §2) ── Ступени одного тона: от светлой подложки к тёмному срезу под клавишей. Заведены затем, чтобы состояния кнопок брались из ряда, а не изобретались инлайном на каждой странице — раньше объём выходил всюду разный. Ряд — источник правды. Старые имена выше на него ссылаются: --accent-light → terra-400, --accent → terra-500, --gold → gold-400, --success → pine-400. Правишь ступень — меняется и псевдоним. */ --terra-50: #FAF0EA; --terra-100: #F3DCD0; --terra-200: #E7BCA6; --terra-300: #D8977A; /* акцент НА ТЁМНОМ: terra-500 там даёт 2,78:1 */ --terra-400: #C25E38; --terra-500: #A54B2A; /* рабочий цвет главной кнопки */ --terra-600: #8E3D20; --terra-700: #722F18; --terra-800: #4E2011; --gold-100: #F7ECD3; --gold-200: #EFD9A8; --gold-400: #D9A94E; /* ТОЛЬКО награда и «результат зафиксирован» */ --gold-600: #B0842F; --gold-700: #86611F; --pine-100: #DDEBE7; --pine-400: #4E8A7E; --pine-600: #37665C; /* Материал предмета №20 — имена и назначение в DESIGN.md. */ --panel-title: #FFF8DF; --panel-status: #FFECA9; --panel-status-dot: #88B64A; --panel-key-top: #F0E1CA; --panel-key-top-lit: #FFFCF6; --panel-key-top-shadow: #DFCCAB; --panel-key-side-top: #E3D0AE; --panel-key-side-right: #9F8259; --panel-key-side-front: #B29267; --panel-key-side-left: #CAB08C; --panel-key-selected-top: #F4E8D5; --panel-key-selected-inset: #E5D2B4; --panel-key-selected-side-top: #E8C79C; --panel-key-selected-side-right: #A85218; --panel-key-selected-side-front: #9D4410; --panel-key-selected-side-left: #D37E25; --panel-key-disabled-side-top: #E7DACA; --panel-key-disabled-side-right: #D8C7B4; --panel-key-disabled-side-front: #D2C0AB; --panel-key-disabled-side-left: #EFE6DB; --error: #8A2233; /* решён 03.08.2026, в токенах его до сих пор не было */ /* Спутник для ободка. rgba() принимает ТРОЙКУ ЧИСЕЛ, а не hex, поэтому var(--terra-400) внутрь rgba() не подставится. Тот же приём, что у --shade. */ --terra-400-rgb: 194, 94, 56; /* Тёмная поверхность. Секция такая на сайте одна — «Дальше — бот». */ --ink-900: #16232B; /* фон тёмной секции */ --ink-800: #1D2C36; /* карточка на тёмном */ /* Следующая ступень ряда, заведена 14.08.2026 под паз рельса. ПОСЧИТАНА, А НЕ СНЯТА ПИПЕТКОЙ: шаг 800 → 900 по каналам 0,759 / 0,795 / 0,796, применён к 900 ещё раз. В макете на этом месте #0C161A — шаг крупнее нашего ряда, и взять его значило бы порвать ряд ради одной детали. Одной заливкой паз не читается: #111C22 на --ink-900 даёт 1,08:1. Паз собирается СВЕТОМ — светлая волосяная кромка сверху и слева. */ --ink-950: #111C22; /* дно паза, вырез в тёмной поверхности */ /* Геометрия */ --radius-card: 20px; --radius-btn: 16px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; /* ── Свет и высота (DESIGN.md §3) ── Один источник света на весь сайт: слева сверху. Поэтому тени смещены ВПРАВО-вниз, а не строго вниз. Тот же свет, что у телевизора в tv.css — он тут эталон. Высота собирается ПАРОЙ теней: короткая плотная у самого контакта плюс широкая мягкая под предметом. Плюс блик на верхней кромке — она ловит свет. Одной тенью объёма не будет: ровно из-за этого он раньше изобретался инлайном на каждой странице и каждый раз выходил другим. */ --lit: rgba(255, 253, 248, 0.65); /* блик на верхней кромке */ --shade: 56, 47, 39; /* тёплый коричневый — тень корпуса */ --shade-terra: 124, 52, 26; /* тень под терракотой, своего тона */ --e-0: none; /* лежит на бумаге */ --e-1: 0 1px 1px rgba(var(--shade), .05), 1px 2px 6px rgba(var(--shade), .07); /* карточка */ --e-2: inset 0 1px 0 var(--lit), 1px 2px 3px rgba(var(--shade), .09), 2px 6px 14px rgba(var(--shade), .10); /* кнопка в покое */ --e-3: inset 0 1px 0 var(--lit), 2px 3px 5px rgba(var(--shade), .10), 4px 12px 28px rgba(var(--shade), .13); /* поднято под пальцем */ --e-press: inset 0 2px 4px rgba(var(--shade), .16), 0 1px 1px rgba(var(--shade), .05); /* вдавлено */ /* Ободок фокуса — ОДИН на весь сайт, из трёх слоёв: зазор цветом бумаги, плотное кольцо и мягкое свечение снаружи. Одним полупрозрачным свечением он давал 1,41:1 к фону при норме 3:1 — с клавиатуры фокус терялся (проверка контраста 03.08.2026). Плотное кольцо даёт 5,99:1 на --bg. Под компонент ободок НЕ красится: отдельного --ring-gold нет и не будет, иначе человек каждый раз заново ищет, что подсвечено. 4.5px не менять — проверено рендером при 1x и 2x, кромка чёткая. Числа #8E3D20 и 194,94,56 переехали на ряды цвета 08.08.2026. */ --ring: 0 0 0 2px var(--surface), 0 0 0 4.5px var(--terra-600), 0 0 0 9px rgba(var(--terra-400-rgb), .24); /* Единственная тень до лестницы. Держится на .card — переедет на --e-1 отдельным заходом, тогда и уйдёт. Новых применений не добавлять. */ --shadow-soft: 0 2px 12px rgba(56, 47, 39, 0.08); /* ── Шрифты: три слота (DESIGN.md §5) ── Сами файлы подключены в components.css, здесь только имена слотов. Раньше тут стояли Raleway, Bebas Neue и Playfair Display — ни один не был подключён, поэтому страницы молча показывались системным шрифтом (поймано аудитом 01.08.2026, закрыто 08.08.2026). main — весь текст, кнопки, абзацы, правила; display — крупные узкие заголовки, со scaleX(.70). Никогда в кнопках; script — слово поверх заголовка, точечно. Никогда в кнопках и абзацах. Запасные в списке — системные: пока woff2 едет, текст показан ими. */ --font-main: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display: 'FiraXC', 'Golos Text', system-ui, sans-serif; --font-script: 'Mavka', 'Golos Text', cursive; /* Старое имя четвёртого слота. Слотов три, этот лишний: его держит только steps.css, а тот подключён лишь в песочнице. Уходит шагом 5 вместе с остальной прополкой — до тех пор не трогаем, чтобы не менять вид проб. */ --font-accent: 'Playfair Display', Georgia, serif; }