/* Токены — дословно из DESIGN.md. Единственное место, где встречаются прописанные вручную hex-цвета и пиксельные значения. Всё остальное (components.css, разметка экранов) использует только var(--...). */ :root { --color-accent: #149652; --color-accent-soft: #E3F5EA; --color-on-accent: #FFFFFF; --color-warning: #B85712; --color-warning-soft: #FBEEE0; --color-on-warning: #FFFFFF; --color-bg: #FFFFFF; --color-surface: #F6F7F6; --color-border: #E7EAE7; --color-text: #1B1F1C; --color-text-secondary: #6B756E; --color-text-tertiary: #9CA39D; --color-thumb-placeholder: #4A514C; --color-thumb-icon: #B8BFB9; --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --text-display-size: 28px; --text-display-weight: 700; --text-display-line: 1.1; --text-title-size: 20px; --text-title-weight: 700; --text-title-line: 1.2; --text-headline-size: 16px;--text-headline-weight: 600;--text-headline-line: 1.3; --text-body-size: 14px; --text-body-weight: 500; --text-body-line: 1.4; --text-caption-size: 13px; --text-caption-weight: 400; --text-caption-line: 1.3; --text-micro-size: 11px; --text-micro-weight: 600; --text-micro-line: 1.2; --space-1: 4px; --space-5: 20px; --space-2: 8px; --space-6: 24px; --space-3: 12px; --space-7: 32px; --space-4: 16px; --space-8: 40px; --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-full: 999px; /* safe-area Telegram Mini App: сверху системная шапка, снизу — home indicator */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* Синхронизация с темой Telegram: пока эмулируем через системную тему (prefers-color-scheme). В реальном приложении .env этот же блок будет применяться по классу, который main.js выставляет из Telegram.themeParams. */ @media (prefers-color-scheme: dark) { :root { --color-accent: #33D67A; --color-accent-soft: #0F2818; --color-on-accent: #06170C; --color-warning: #F0923D; --color-warning-soft: #3A2712; --color-on-warning: #1F1206; --color-bg: #0B0F0C; --color-surface: #171C18; --color-border: #262B27; --color-text: #F4F6F4; --color-text-secondary: #9AA39C; --color-text-tertiary: #666D67; --color-thumb-placeholder: #353B36; } } /* Тот же список токенов, продублированный под явный класс — пригодится, когда переключение темы в реальном приложении будет по классу на , а не только по системной теме устройства (Telegram может задать тему botа отдельно от темы ОС). */ html.theme-dark { --color-accent: #33D67A; --color-accent-soft: #0F2818; --color-on-accent: #06170C; --color-warning: #F0923D; --color-warning-soft: #3A2712; --color-on-warning: #1F1206; --color-bg: #0B0F0C; --color-surface: #171C18; --color-border: #262B27; --color-text: #F4F6F4; --color-text-secondary: #9AA39C; --color-text-tertiary: #666D67; --color-thumb-placeholder: #353B36; }