/* ============================================================ ДИЗАЙН-ТОКЕНЫ — единственный источник правды по цвету, типографике, отступам, радиусам и теням. Подключается ПЕРВЫМ, до style.css. Ни один другой файл не объявляет :root и не содержит литеральных цветов: всё через var(). ДВЕ ТЕМЫ. Светлая — белый и оранжевый. Тёмная — чёрный, серый и тот же оранжевый. Тему ставит js/app.js атрибутом data-theme на ; по умолчанию берётся из Telegram, а пользователь может переключить вручную в профиле. ПОЧЕМУ ОРАНЖЕВЫЙ ИМЕННО ТАКОЙ. Яркий оранжевый с белым текстом даёт контраст около 3.4:1. По WCAG этого хватает только для КРУПНОГО текста (от 18.66px жирным), поэтому подписи кнопок набраны сжатым шрифтом 20px/700 в верхнем регистре — они и по смыслу «спортивные», и по правилам проходят. Для мелкого оранжевого текста есть отдельный токен --accent-text: он темнее и читается на белом (5.2:1). Контраст всех ключевых пар посчитан, ухудшать его нельзя. ============================================================ */ :root { /* Сообщаем браузеру тему: от неё зависят системные элементы — полосы прокрутки, выделение текста, вид полей ввода. */ color-scheme: light; /* ---------- Поверхности ---------- Карточка светлее фона и отделяется тонкой границей. Тень — только у по-настоящему приподнятого (плавающая кнопка, липкая панель, лист). */ --bg: #F4F4F5; /* фон приложения */ --surface: #FFFFFF; /* карточка, лист, поле ввода */ --surface-2: #F4F4F5; /* вложенный блок внутри карточки */ --surface-3: #E9E9EC; /* дорожки: прогресс, переключатели, скелетон */ --border: #E4E4E7; /* волосяные разделители и контур карточек */ --border-strong: #8A8A93; /* контуры полей и чекбоксов, 3.42:1 к белому */ /* ---------- Тёмный блок ---------- Крупные «геройские» блоки (тренировка дня, экран подписки) остаются тёмными в обеих темах: это главный приём спортивного облика — плотный тёмный прямоугольник, белый заголовок, оранжевый акцент. */ --hero: #111113; --hero-2: #1C1C20; /* вложенный блок внутри тёмного */ --hero-text: #FFFFFF; --hero-muted: #A1A1AA; --hero-border: #2A2A2F; /* ---------- Текст ---------- */ --text: #111113; /* 17.2:1 к фону, 18.9:1 к карточке */ --muted: #63636B; /* 5.4:1 к фону, 6.0:1 к карточке */ --on-accent: #FFFFFF; /* текст на оранжевой заливке — только крупный */ /* ---------- Действие ---------- */ --accent: #F5570B; /* кнопки, активная вкладка, кольца, акценты */ --accent-press: #D94A07; /* нажатое состояние */ --accent-text: #C2410C; /* мелкий оранжевый текст на светлом, 5.2:1 */ --accent-soft: #FFF1E8; /* подложка: выбранный чип, иконка в кружке */ --accent-line: #FBCFB4; /* оранжевая граница на светлом */ /* ---------- Статусы ---------- */ --success: #15803D; --success-soft: #E9F6EC; --warning: #B45309; --warning-soft: #FDF1E3; --danger: #DC2626; --danger-soft: #FDECEC; /* ---------- Данные ---------- Графики и диаграммы: макронутриенты, фазы цикла. Различаются не только оттенком, но и светлотой — иначе их не отличить при дальтонизме. */ --data-protein: #C2410C; --data-fat: #B45309; --data-carb: #1F6F8B; --data-cycle: #A34667; --data-neutral: #8A8A93; /* ---------- Затемнение под листами и модалками ---------- */ --overlay: rgba(17, 17, 19, .55); /* ============================================================ СОВМЕСТИМОСТЬ: старые имена. В проекте больше десяти тысяч строк CSS, написанных под прежний набор имён. Переименовать всё разом — гарантированно что-то сломать, поэтому старые имена живут псевдонимами и вытесняются при правке каждого экрана. НОВЫЙ КОД пишет только имена из блоков выше. ============================================================ */ --card: var(--surface); --white: var(--surface); --cta: var(--accent); --cta-press: var(--accent-press); /* ---------- Типографика ---------- Два шрифта. Сжатый гротеск — для заголовков, крупных чисел и кнопок: он даёт «табло стадиона» и позволяет набирать длинные русские слова крупно, не ломая строку. Обычный — для текста и интерфейса. Сжатый шрифт ОБЯЗАН содержать кириллицу — иначе всё русское тихо уходит в запасной широкий шрифт, и облик разваливается. */ --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Запасные шрифты — тоже сжатые и с кириллицей: Roboto Condensed есть на Android, Avenir Next Condensed — на iOS, Arial Narrow — на Windows. Так заголовок остаётся узким, даже если Google Fonts не загрузился. */ --font-display: "Oswald", "Roboto Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif-condensed, var(--font-body); --fs-display: 44px; /* главные числа: остаток калорий, вес */ --fs-h1: 30px; /* заголовок экрана (сжатый шрифт) */ --fs-h2: 22px; /* заголовок секции и карточки */ --fs-h3: 17px; /* подзаголовок, крупная строка списка */ --fs-body: 15px; /* основной текст */ --fs-sm: 13px; /* вторичный текст, подписи полей */ --fs-xs: 12px; /* мета-информация */ --fs-2xs: 11px; /* бейджи и надзаголовки в верхнем регистре */ --fs-btn: 20px; /* подпись кнопки: сжатый шрифт, верхний регистр */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.05; /* заголовки сжатым шрифтом и крупные числа */ --lh-heading: 1.2; --lh-normal: 1.45; /* основной текст */ /* Разрядка надзаголовков: без неё верхний регистр читается как «слипшийся». */ --ls-eyebrow: .10em; --ls-btn: .04em; /* ---------- Отступы (сетка кратно 4) ---------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --gutter: 16px; --tap-min: 44px; /* ---------- Радиусы ---------- Чуть строже прежнего: сильное скругление всего подряд читается как «мягкое приложение», а не как спортивное. */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; /* геройские блоки и большие изображения */ --radius-pill: 999px; /* ---------- Тени ---------- */ --shadow-1: 0 1px 2px rgba(17, 17, 19, .06), 0 2px 8px rgba(17, 17, 19, .04); --shadow-2: 0 6px 20px rgba(17, 17, 19, .14); --shadow-accent: 0 8px 22px rgba(245, 87, 11, .32); /* свечение под кнопкой «Сегодня» */ --shadow: var(--shadow-1); /* ---------- Каркас ---------- */ --tabbar-height: 64px; --safe-bottom: env(safe-area-inset-bottom, 0px); /* ---------- Движение ---------- */ --dur-fast: .12s; --dur: .2s; --ease: cubic-bezier(.2, 0, .2, 1); } /* ============================================================ ТЁМНАЯ ТЕМА: чёрный, серый, оранжевый. Меняются только цвета — размеры, отступы и шрифты общие. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0B0B0D; --surface: #161619; --surface-2: #1F1F23; --surface-3: #2A2A2F; --border: #2A2A2F; --border-strong: #6E6E78; /* 3.6:1 к карточке */ /* В тёмной теме «геройский» блок чуть светлее фона — иначе он сливается с ним и перестаёт читаться как отдельный объект. */ --hero: #1B1B1F; --hero-2: #26262B; --hero-text: #FFFFFF; --hero-muted: #A1A1AA; --hero-border: #33333A; --text: #F4F4F5; /* 17.9:1 к фону */ --muted: #A1A1AA; /* 7.7:1 к фону, 7.1:1 к карточке */ --on-accent: #FFFFFF; --accent: #F5570B; /* тот же оранжевый: бренд не меняется от темы */ --accent-press: #D94A07; --accent-text: #FF8A4C; /* на тёмном мелкий текст должен быть светлее, 7.7:1 */ --accent-soft: #2E1A10; /* тёмная оранжевая подложка */ --accent-line: #5A2E14; --success: #4ADE80; --success-soft: #122A1A; --warning: #FBBF24; --warning-soft: #2E2410; --danger: #F87171; --danger-soft: #331716; --data-protein: #FB923C; --data-fat: #FBBF24; --data-carb: #38BDF8; --data-cycle: #F472B6; --data-neutral: #71717A; --overlay: rgba(0, 0, 0, .66); /* На тёмном фоне мягкие тени не видны — отделяет границы, а не тень. */ --shadow-1: none; --shadow-2: 0 8px 24px rgba(0, 0, 0, .55); --shadow-accent: 0 8px 22px rgba(245, 87, 11, .38); --shadow: var(--shadow-1); } /* Пользователь попросил систему не анимировать — уважаем. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }