/* Maps Telegram's `--tg-theme-*` variables (set on by the WebApp JS SDK, see js/telegram.js) onto internal design tokens, with light-theme fallbacks for viewing outside Telegram. */ :root { --color-bg: var(--tg-theme-bg-color, #ffffff); --color-surface: var(--tg-theme-secondary-bg-color, #f2f2f7); --color-header-bg: var(--tg-theme-header-bg-color, var(--color-bg)); --color-text: var(--tg-theme-text-color, #111111); --color-text-secondary: var(--tg-theme-hint-color, #707579); --color-subtitle: var(--tg-theme-subtitle-text-color, var(--color-text-secondary)); --color-link: var(--tg-theme-link-color, #2481cc); --color-accent: var(--tg-theme-button-color, #2481cc); --color-accent-text: var(--tg-theme-button-text-color, #ffffff); --color-destructive: var(--tg-theme-destructive-text-color, #e53935); --color-border: rgba(0, 0, 0, 0.12); --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --radius-md: 16px; --radius-lg: 24px; --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } :root[data-tg-color-scheme="dark"] { --color-border: rgba(255, 255, 255, 0.16); }