:root {
    color-scheme: light dark;

    /* Telegram is read only here; app styles consume stable theme aliases. */
    --color-bg: var(--tg-theme-bg-color, #ffffff);
    --color-text: var(--tg-theme-text-color, #111111);
    --color-hint: var(--tg-theme-hint-color, #8e8e93);
    --color-subtitle: var(--tg-theme-subtitle-text-color, var(--color-hint));
    --color-link: var(--tg-theme-link-color, #3390ec);
    --color-accent: var(--tg-theme-button-color, #3390ec);
    --color-accent-text: var(--tg-theme-button-text-color, #ffffff);
    --color-secondary-bg: var(--tg-theme-secondary-bg-color, #f5f5f5);
    --color-section-bg: var(--tg-theme-section-bg-color, var(--color-secondary-bg));
    --color-destructive: var(--tg-theme-destructive-text-color, #ff3b30);
    --color-separator: var(--tg-theme-section-separator-color, rgba(128, 128, 128, 0.22));
    --color-control-bg: var(--color-secondary-bg);
    --color-control-active-bg: color-mix(in srgb, var(--color-text) 10%, var(--color-section-bg));
    --color-control-pressed-bg: color-mix(in srgb, var(--color-text) 14%, transparent);
    --color-success: #34c759;
    --color-warning: #ff9f0a;

    --safe-area-top: var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px));
    --safe-area-bottom: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    --content-safe-area-top: var(--tg-content-safe-area-inset-top, 0px);
    --page-gutter: 8px;
    --space-sheet-header-content: 14px;
    --space-screen-section: 12px;
    --space-title-subtitle: 2px;
    --space-subtitle-content: 12px;
    --space-section: 16px;

    --radius-sheet: 30px;
    --radius-card: 26px;
    --radius-card-compact: 22px;
    --radius-panel: 20px;
    --radius-large: 18px;
    --radius-medium: 16px;
    --radius-control: var(--radius-card);
    --radius-small: 12px;
    --radius-xsmall: 10px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* Telegram-aligned type. Folders / table chrome share footnote. */
    --font-micro: 11px;
    --font-caption: 12px;
    --font-footnote: 13px;
    --font-subhead: 15px;
    --font-callout: 16px;
    --font-body: 17px;
    --font-title: 20px;
    --font-display: 24px;
    --font-lg: 18px;
    --font-3xl: 32px;
    --font-4xl: 48px;
    --font-xs: var(--font-caption);
    --font-sm: var(--font-footnote);
    --font-base: var(--font-body);
    --font-xl: var(--font-title);
    --font-2xl: var(--font-display);
    --weight-regular: 400;
    --weight-medium: 510;
    --weight-semibold: 590;
    --weight-bold: 700;

    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;

    --radius-sm: 8px;
    --radius-md: var(--radius-small);
    --radius-lg: var(--radius-medium);
    --radius-xl: var(--radius-panel);
    --radius-full: var(--radius-pill);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    --alpha-white-03: rgba(255, 255, 255, 0.03);
    --alpha-white-04: rgba(255, 255, 255, 0.04);
    --alpha-white-08: rgba(255, 255, 255, 0.08);
    --alpha-white-10: rgba(255, 255, 255, 0.1);
    --alpha-white-12: rgba(255, 255, 255, 0.12);
    --alpha-white-20: rgba(255, 255, 255, 0.2);
    --alpha-white-50: rgba(255, 255, 255, 0.5);
    --alpha-white-60: rgba(255, 255, 255, 0.6);
    --alpha-blue-30: rgba(51, 144, 236, 0.3);
    --alpha-blue-40: rgba(51, 144, 236, 0.4);
    --alpha-black-40: rgba(0, 0, 0, 0.4);

    --motion-press: 0.08s;
    --motion-instant: 0.1s;
    --motion-quick: 0.12s;
    --motion-fast: 0.15s;
    --motion-medium: 0.18s;
    --motion-standard: 0.2s;
    --motion-deliberate: 0.25s;
    --motion-slow: 0.3s;
}

html[data-theme='light'] { color-scheme: light; }
html[data-theme='dark'] { color-scheme: dark; }