:root {
    /* =========================================================
       1. ГЕОМЕТРИЯ И ОТСТУПЫ (БЕЗ ИЗМЕНЕНИЙ)
       ========================================================= */
    --spacing-section: 30px;
    --spacing-block: 40px;
    --spacing-inner: 20px;
    --radius-card: 12px;
    --container-max: 1320px;
    --container-padding-x: 20px;
    --content-max-narrow: 900px;
    --sticky-offset: 100px;

    /* =========================================================
       2. ТИПОГРАФИКА (БЕЗ ИЗМЕНЕНИЙ)
       ========================================================= */
    --font-main: Inter, sans-serif;
    --fs-h1: 29px;
    --fs-h2: 23px;
    --fs-h3: 20px;
    --fs-body: 17px;
    --fs-small: 14px;
    --lh-body: 1.6;
    --lh-title: 1.3;
    --label-letter-spacing: 1px;
    --meta-opacity: 0.8;

    /* =========================================================
       3. ЦВЕТОВАЯ ПАЛИТРА — ТЕПЕРЬ АДАПТИВНАЯ (TELEGRAM)
       ========================================================= */

    /* Логика: var(--tg-переменная, #твой_старый_цвет)
       Если открыто в Телеге -> берется её цвет.
       Если в браузере -> берется цвет после запятой.
    */

    /* Базовые фоны */
    --bg-main: var(--tg-theme-bg-color, #ffffff);
    
    /* Вторичный фон (карточки, плашки) */
    --bg-secondary: var(--tg-theme-secondary-bg-color, #f9fafb);

    /* Текст */
    --text-title: var(--tg-theme-text-color, #111827);
    --text-body: var(--tg-theme-text-color, #111827);
    
    /* Серый текст (hint) - в темной теме станет светло-серым */
    --text-muted: var(--tg-theme-hint-color, #6b7280);
    
    /* Инверсный текст (для кнопок) */
    --text-inverse: var(--tg-theme-button-text-color, #ffffff);

    /* Рамки (адаптируются под цвет подсказок, чтобы быть видными на черном) */
    --border-color: var(--tg-theme-hint-color, #e5e7eb);

    /* --- БРЕНДОВЫЕ ЦВЕТА --- */
    
    /* Primary: В Телеге станет цветом темы юзера (синим/зеленым/розовым). 
       В браузере останется твоим синим. */
    --color-primary: var(--tg-theme-button-color, #0056b3);
    
    /* Accent: Оставляем твоим оранжевым, это бренд */
    --color-accent: #ff9900;

    /* --- ТЕМНЫЕ СЕКЦИИ (HERO/FOOTER) --- */
    /* В светлой теме они были темно-синими (#0f172a). 
       В темной теме Телеграма они должны стать просто фоном или чуть светлее.
       Используем secondary-bg для мягкости. */
    --section-dark-bg: var(--tg-theme-secondary-bg-color, #0f172a);

    /* Overlay для Hero (затемнение картинки) - оставляем полупрозрачным черным всегда */
    --hero-overlay-bg: rgba(0, 0, 0, 0.7);

    /* =========================================================
       4. ТЕНИ (СЛЕГКА ОСЛАБЛЯЕМ ДЛЯ ТЕМНОЙ ТЕМЫ)
       ========================================================= */
    /* В темной теме тени почти не видны, это нормально */
    --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.15);
    --shadow-elevated: 0 10px 30px rgba(0, 0, 0, 0.2);

    /* =========================================================
       5. КНОПКИ (AДАПТИВНЫЕ)
       ========================================================= */

    --btn-padding-y: 14px;
    --btn-padding-x: 40px;
    --btn-radius-pill: 50px;

    /* Фон кнопки: берет цвет кнопки Телеграма (синий) */
    --btn-primary-bg: var(--tg-theme-button-color, var(--color-accent));
    
    /* При наведении (только для веба, в мобилке ховера нет) */
    --btn-primary-bg-hover: var(--tg-theme-button-color, #d8942a);
    
    /* Текст на кнопке */
    --btn-primary-text: var(--tg-theme-button-text-color, #ffffff);

    --transition-base: 0.3s ease;
    --hover-raise-distance: 5px;

    /* =========================================================
       6-8. HERO И МЕДИА-ЗАПРОСЫ (БЕЗ ИЗМЕНЕНИЙ)
       ========================================================= */
    --hero-padding-top: var(--spacing-section);
    --hero-padding-bottom: var(--spacing-block);
    --hero-title-multiplier: 1.5;
    --hero-text-max-width: var(--content-max-narrow);
    --hero-text-size: 18px;
    --hero-text-opacity: 0.9;
}

/* МЕДИА-ЗАПРОСЫ ОСТАВЛЯЕМ КАК БЫЛИ */
@media (max-width: 992px) {
    :root {
        --spacing-section: 30px;
        --spacing-block: 30px;
        --hero-padding-top: var(--spacing-section);
        --hero-padding-bottom: var(--spacing-block);
        --hero-title-multiplier: 1.4;
    }
}

@media (max-width: 768px) {
    :root {
        --spacing-section: 20px;
        --spacing-block: 25px;
        --spacing-inner: 15px;
        --fs-h1: 28px;
        --fs-h2: 22px;
        --fs-h3: 20px;
        --fs-body: 18px;
        --hero-padding-top: var(--spacing-section);
        --hero-padding-bottom: var(--spacing-block);
        --hero-title-multiplier: 1.2;
        --hero-text-max-width: 100%;
        --hero-text-size: 16px;
    }
}

body {
    font-feature-settings: "lnum", "tnum";
    /* ВАЖНО: Применяем фон и цвет ко всему телу сразу */
    background-color: var(--bg-main);
    color: var(--text-body);
}