/* * Design tokens — цвета, типографика, отступы, радиусы. * Все экраны Mini App используют только эти переменные, * никаких хардкоднутых цветов и размеров в app.css не должно быть. */ :root { /* Палитра — светлая тема. * --bg-page совпадает со средним фоном иллюстраций рецептов * (вычислен через scripts/detect_bg_color.py), чтобы тарелочки * «сливались» с фоном экрана как настоящие тарелки на столе. * --bg-card на ~13 пунктов RGB темнее — карточки выглядят * мягкими пятнами на фоне страницы, без теней и обводок. */ --bg-page: #FAECC8; --bg-card: #F0E2B6; --text-main: #2A2418; --text-muted: #7A6E55; --text-tertiary: #B5A988; --accent: #1D4D3A; /* Подложки иконок по приёму пищи */ --meal-breakfast: #F5E6C5; --meal-lunch: #E8D9C0; --meal-dinner: #DCE2D0; --meal-snack: #E9D9D2; /* Типографика */ --h1: 24px; --h2: 18px; --h3: 16px; --body: 15px; --body-small: 14px; --text-meta: 13px; --text-tiny: 11px; --weight-medium: 500; --weight-regular: 400; --line-height: 1.5; /* Отступы */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* Радиусы */ --radius-card: 14px; --radius-card-lg: 16px; --radius-pill: 999px; /* Высота шапки с табами — используется sticky-инпутом холодильника * чтобы прилипать ровно под табами (см. .fridge-input-bar). */ --tab-bar-height: 56px; } /* Тёмная тема — переключается через data-theme="dark" на , * который ставится из telegram.js по Telegram.WebApp.colorScheme. */ :root[data-theme="dark"] { --bg-page: #1A1612; --bg-card: #2A2418; --text-main: #F2EBDD; --text-muted: #9C8E72; --accent: #5A9376; }