/* ========================================================================== Токены LovePlay. Единственный источник правды по цвету, тексту и размерам. ========================================================================== Снято из приложения (C:\cursor project\loveplay-app): lib/theme/palette.dart цвета, 29 штук с назначением lib/theme/theme.dart шкала текста, displayLarge..labelSmall lib/theme/app_tokens.dart отступы, радиусы, длительности ПРАВИЛО, ради которого файл существует: одна задача, один токен. Если нужен новый размер или оттенок, сначала проверь, нет ли подходящего здесь. Новое значение добавляется в этот файл и только сюда, а не в страницу. Отклонение от шкалы должно быть объяснено комментарием рядом, иначе через полгода у нас снова будет десять почти одинаковых серых и пять почти одинаковых отступов. Единицы. Во Flutter это логические пиксели, в вебе это CSS-пиксели, и они совпадают один к одному. Поэтому числа переносятся как есть, без пересчёта. ========================================================================== */ :root{ /* ---------- ЦВЕТ ---------- */ /* Поверхности, от самой глубокой к самой верхней */ --c-bg:#0a0606; /* фон приложения */ --c-surface:#140e0e; /* карточки */ --c-surface-high:#1d1716; /* приподнятое над карточкой */ --c-surface-alt:#282020; /* вложенное, поля ввода */ /* Текст, от главного к выключенному */ --c-text:#fafafa; /* основной */ --c-muted:#a1a1aa; /* второстепенный */ --c-faint:#71717a; /* третьестепенный */ --c-dim:#52525b; /* выключенный */ --c-edge:#5c514e; /* границы и разделители */ /* Бренд */ --c-rose:#f43f5e; /* основной цвет бренда */ --c-rose-400:#fb7185; --c-gold:#d4af37; /* награда и премиум */ --c-gold-light:#fde68a; /* начало золотого градиента */ --c-accent:#f5d0a9; /* тёплый бежевый акцент */ --c-on-gold:#211803; /* текст поверх золота, НЕ чёрный */ /* Игроки. Первый всегда он, второй всегда она. */ --c-player-1:#5cb5ff; --c-player-2:#ff7896; /* Состояния */ --c-success:#14b8a6; --c-done:#3ecf8e; --c-warn:#fbbf24; --c-danger:#f43f5e; --c-spice:#b24be0; /* акцент взрослого контента */ --c-neon:#6fd8ff; /* Лестница жара: от прохладного к горячему. Ею красятся уровни в играх, и цвет уровня обязан совпадать с тем, который он носит внутри игры. */ --c-heat-1:#c07a3e; /* медь */ --c-heat-2:#e0a93a; /* янтарь */ --c-heat-3:#f5d34e; /* золото */ --c-heat-4:#fb7185; /* роза */ --c-heat-5:#b85cf0; /* фиолет */ /* Светлой темы у нас не будет: решение владельца 24.08.2026. Цвета cream из палитры приложения сюда намеренно не перенесены. */ /* Готовые полупрозрачные производные, чтобы не плодить rgba по месту */ --c-card-bg:rgba(20,14,14,.55); /* surface при 55% */ --c-border:rgba(92,81,78,.16); /* edge при 16%, обычная рамка */ --c-border-strong:rgba(92,81,78,.18);/* edge при 18%, рамка чипа */ --c-scrim:rgba(10,6,6,.72); /* затемнение под модалкой */ /* Градиенты */ --g-flame:linear-gradient(135deg,#fde68a,#d4af37); /* золото: кнопка, выбранный чип */ --g-mature:linear-gradient(135deg,#b24be0,#f43f5e); /* взрослый акцент */ /* ---------- ТЕКСТ ---------- */ /* Три семейства. Засечное только для заголовков: для кириллицы Literata, для латиницы Fraunces, ровно как в приложении (displayFamilyFor). */ --f-serif:'Literata','Fraunces',Georgia,serif; --f-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* Пара «размер / интерлиньяж» задана как в приложении. Начертание указано в комментарии, потому что оно часть роли, а не украшение. */ --t-display-l:36px/42px; /* w300, засечный. Театральный заголовок */ --t-display-m:32px/38px; /* w400, засечный */ --t-display-s:28px/34px; /* w400, засечный. Заголовок экрана */ --t-headline-l:26px/32px; /* w400, засечный */ --t-headline-m:22px/28px; /* w400, засечный */ --t-headline-s:20px/26px; /* w500, засечный. Заголовок блока */ --t-title-l:20px/26px; /* w500, засечный */ --t-title-m:17px/22px; /* w600, Inter */ --t-title-s:15px/20px; /* w600, Inter. Строка-вопрос, пункт списка */ --t-body-l:16px/24px; /* w400, Inter */ --t-body-m:15px/22px; /* w400, Inter. Подводка под заголовком */ --t-body-s:13px/18px; /* w400, Inter, приглушённый. Ответ, пояснение */ --t-label-l:14px/18px; /* w600, Inter. Подпись кнопки и чипа */ --t-label-m:12px/16px; /* w600, моно, трекинг 1.2. Мелкие данные */ --t-label-s:11px/14px; /* w600, моно, трекинг 1.6. Надзаголовок */ --tr-label-m:1.2px; /* трекинг для label-m */ --tr-label-s:1.6px; /* трекинг для label-s */ --tr-eyebrow:2.2px; /* трекинг надзаголовка (Eyebrow) */ /* Минимальный размер поля ввода. Меньше нельзя никогда: Safari на iPhone приближает страницу при фокусе на поле мельче 16px, и вернуть масштаб можно только руками. */ --t-input-min:16px; /* ---------- РАЗМЕРЫ ---------- */ /* * Шаг сетки 4. Все отступы берутся отсюда. * * `--s-7` ДОБАВЛЕН, потому что в шкале была дыра: имя выглядело частью ряда, * и к нему потянулись четыре разных места (десктопная пилюля вопроса в * тестах, шашки, поле любви, сага). У CSS нет ошибок: `var(--s-7)` не падал, а * делал всё объявление недействительным, и `padding` уходил в ноль молча. * Владелец увидел это на скрине как «пилюля зажата, текст вылазит за неё». * Дешевле закрыть дыру, чем разводить четыре места по соседним значениям. */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px; --s-10:40px; --s-12:48px; /* Радиусы */ --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-sheet:28px; --r-pill:9999px; /* Метка: пилюля, чип, бейдж. ОТСТУПЛЕНИЕ от приложения, и оно осознанное: там radiusPill 999 и торцы круглые. Решение владельца 25.08.2026, ровно наоборот: прямоугольник с лёгким скруглением. Правило сквозное, поэтому живёт токеном, а не по месту. Круглым остаётся только круглое по природе, лицо и точка. */ --r-tag:10px; /* Орган управления: чип и кнопка. Отдельно от метки, потому что они вдвое выше (34 и 46 против 22 и 24), и одно число на всех означает у них разное: у метки почти круглый торец, у кнопки прямой угол. 14 это заметно мягче, но всё ещё прямоугольник. */ --r-ctl:14px; /* Наименьшая зона нажатия по рекомендациям Apple. В приложении по этому числу сделаны кнопка назад и чипы. */ --tap:44px; /* Насколько серифный заголовок сидит НИЖЕ середины своей строки. Выравнивание по центру ставит по центру КОРОБКУ строки, а глаз читает по буквам. У Literata подъём и свес несимметричны, оттого середина заглавных уезжает вниз. Величина выводится из метрик шрифта: (подъём - свес - высота заглавных) / 2. Замерено в браузере на 30px: (35 - 9 - 21) / 2 = 2.5px, то есть .083em. Кегль сокращается, поэтому число в em и годится любому размеру заголовка. Применять там, где серифный заголовок стоит В ОДНУ СТРОКУ с органом управления: кнопкой назад, лицом, значком. Заголовок сам по себе поднимать не надо, ему не с чем равняться. */ --сериф-снос:.083em; /* ---------- ДВИЖЕНИЕ ---------- */ --m-micro:120ms; /* смена состояния чипа */ --m-standard:240ms; /* обычный переход */ --m-expressive:450ms; /* заметное появление */ --m-celebrate:750ms; /* награда, победа */ --m-ease:cubic-bezier(.2,.8,.2,1); /* ---------- ТЕНИ ---------- */ /* Золотая кнопка: золото 35%, размытие 26, разлёт -6, сдвиг вниз 6. */ --sh-gold:0 6px 26px -6px rgba(212,175,55,.35); }