/*
 * Дизайн-токены сайта (Figma gXDrNksRtYMfLL5SdwKuVj, фреймы 1280/768/415).
 * Значения с пометкой «сверить» взяты по аналогии — уточнить по узлам макета.
 */
:root {
    /* Цвета */
    --color-text: #404040;
    --color-sky: #95d0d8;               /* Sky blue */
    --color-blue: #54abda;
    --color-navy: #00405d;              /* текст дополнительной кнопки */
    --color-surface: #ffffff;
    --color-surface-muted: #f3f3f3;     /* фон дополнительной кнопки */
    --color-page: var(--color-surface-muted);   /* фон страницы в макете (desktop/tablet) */
    --color-on-accent: #ffffff;         /* текст на градиенте */
    --color-accent: var(--color-blue);  /* акцент в заголовках — сверить с hero 130:4554 */
    --color-focus: var(--color-blue);

    /* Градиенты */
    --gradient-primary: linear-gradient(90deg, var(--color-sky) 0%, var(--color-blue) 100%);
    --gradient-hero: linear-gradient(180deg, #e4f4f6 0%, var(--color-surface) 100%); /* сверить с 130:4544 */

    /* Шрифты */
    --font-heading: "Comfortaa", "Trebuchet MS", system-ui, sans-serif;
    --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --letter-spacing-wide: 0.12em;      /* 12% в макете */

    /* Размеры шрифтов: mobile → desktop */
    --font-size-h1: clamp(1.5rem, 1.2rem + 1.25vw, 2rem);        /* 24 → 32: h1 страниц статей */
    --font-size-section-title: clamp(1rem, 0.52rem + 1.85vw, 2rem); /* 16 (415) → 23 (768) → 32 (1280): заголовки секций */
    --font-size-h2: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* 18 → 20 */
    --font-size-body: 0.9375rem;                                 /* 15 */
    --font-size-small: 0.8125rem;                                /* 13 */
    --font-size-button: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);    /* 16 → 20 */
    --line-height-heading: 1.125;      /* 36px на 32px: высота строки заголовков в макете */
    --line-height-body: 1.4;

    /* Радиусы */
    --radius-pill: 100px;
    --radius-card: 30px;                /* сверить с карточкой 130:4549 */
    --radius-small: 10px;

    /* Тени */
    --shadow-glow: 0 4px 25.3px 0 var(--color-sky);
    --shadow-card: 0 4px 25.3px 0 rgb(149 208 216 / 0.5); /* сверить с карточкой 130:4549 */

    /* Кнопки */
    --button-padding-block: 10px;
    --button-padding-inline: 25px;

    /* Сетка и отступы */
    --container-max-width: 1240px;
    --container-gutter: 10px;
    --section-gap: 80px;                /* промежуток между секциями: 80 / 108 / 120 (415/768/1280) */
    --section-title-gap: var(--space-m);    /* от заголовка секции до содержимого */
    --space-xs: 8px;
    --space-s: 16px;
    --space-m: 24px;
    --space-l: 40px;

    /* Анимации */
    --transition-fast: 150ms ease;
}

@media (min-width: 768px) {
    :root {
        --container-gutter: 20px;
        --section-gap: 108px;
        --section-title-gap: 2.125rem;  /* 34px */
    }
}

@media (min-width: 1280px) {
    :root {
        --section-gap: 120px;
    }
}

/* Раздел статей (T8a): текст статьи и вспомогательные цвета */
:root {
    --color-text-muted: #6b6b6b;        /* даты, подписи — контраст ≥ 4.5:1 на белом */
    --color-sky-tint: #e4f4f6;          /* светлый фон цитат (как верх --gradient-hero) */
    --font-size-h3: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);      /* 16 → 18 */
    --font-size-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* 16 → 18 */
    --line-height-text: 1.6;            /* длинный текст статьи */
    --line-height-title: 1.25;          /* многострочные заголовки статей и карточек */
    --article-max-width: 800px;         /* ширина колонки чтения */
    --border-accent: 4px;
}

/* Шапка и подвал (T2): размеры логотипа, меню, бургера; mobile → tablet → desktop */
:root {
    --font-size-nav: 1.125rem;          /* 18 — пункты меню, подписи в подвале на desktop */
    --logo-mark-height: 42px;
    --logo-text-size: 0.8125rem;        /* 13 */
    --logo-text-width: 10.5em;          /* подпись логотипа переносится в три строки, как в макете */
    --header-padding-block: 20px;
    --header-cta-font-size: 0.75rem;    /* 12 — кнопка в шапке на телефоне */
    --header-cta-padding-block: 6px;
    --header-cta-padding-inline: 12px;
    --burger-size: 32px;
    --header-menu-width: 320px;         /* выпадающая панель меню на планшете */
    --header-menu-gap: 20px;            /* между пунктами меню на desktop */
    --footer-padding-top: var(--space-l);
    --footer-padding-bottom: 20px;
    --footer-about-min-width: 13rem;    /* уже — колонки подвала встают друг под другом */
    --z-header-menu: 100;
    --transition-medium: 250ms ease;
}

@media (min-width: 768px) {
    :root {
        --logo-mark-height: 48px;
        --logo-text-size: 1rem;         /* 16 */
        --header-cta-font-size: var(--font-size-button);
        --header-cta-padding-block: var(--button-padding-block);
        --header-cta-padding-inline: var(--button-padding-inline);
        --burger-size: 42px;
    }
}

@media (min-width: 1280px) {
    :root {
        --logo-mark-height: 72px;
        --logo-text-size: 1.125rem;     /* 18 */
    }
}

/* Секции главной (T3–T7): первый экран, услуги, «Мы — сеть центров» */
:root {
    --font-size-section-text: var(--font-size-small);  /* текст «О сети»: 13 → 15 (415 → 768+) */
    --font-size-text-large: var(--font-size-small);    /* текст hero, заявки, «пилюли» услуг, пункты подхода: 13 → 15 → 20 */
    --letter-spacing-tight: 0.04em;             /* узкие карточки на телефоне: длинные слова не рвутся */
    --color-card: var(--color-surface-muted);   /* фон карточек и «пилюль» в макете (#F3F3F3) */
    --color-sky-soft: color-mix(in srgb, var(--color-sky) 55%, var(--color-surface-muted)); /* ≈ #C1E0E5: панель услуг, акцентная карточка */
    --gradient-hero-surface: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-blue) 70%, var(--color-sky)) 0%,
        var(--color-sky) 100%
    );                                          /* фон первого экрана: #67B5DC → #95D0D8 */
    --gradient-frame: linear-gradient(135deg, var(--color-sky) 0%, var(--color-blue) 100%);
    --radius-medium: 20px;                      /* карточки и плитки внутри секций */
    --shadow-tile: 0 4px 12px 0 rgb(64 64 64 / 0.12);
    --shadow-pill: 0 0 8px 0 rgb(255 255 255 / 0.85);   /* мягкое белое свечение «пилюль» */
    --shadow-glow-strong: 0 4px 32px 0 var(--color-blue);
    --decor-line-width: 87px;                   /* декоративная линия над подписью карточки */
    --decor-line-thickness: 4px;
}

@media (min-width: 768px) {
    :root {
        --font-size-section-text: var(--font-size-body);
        --font-size-text-large: var(--font-size-body);
    }
}

@media (min-width: 1280px) {
    :root {
        --font-size-text-large: 1.25rem;        /* 20 — Manrope Medium 20 (стиль H2) в макете 1280 */
    }
}

/* Форма заявки (T9): поля, чекбокс, ошибки на голубом фоне */
:root {
    --color-error: #b3261e;             /* текст ошибки на белой «плашке» — контраст ≥ 4.5:1 */
    --color-focus-on-accent: var(--color-navy); /* фокус на голубом фоне: синий там не виден */
    --input-height: 50px;
    --input-padding-inline: 25px;
    --checkbox-size: 20px;
    --radius-checkbox: 4px;
}

/* «Комплексный подход» (T6) и появление при прокрутке (js/appear.js) */
:root {
    --color-track: #d9d9d9;                     /* серые ось и точки таймлайна до «зажигания» */
    --gradient-track: linear-gradient(180deg, var(--color-sky) 0%, var(--color-blue) 100%);
    --gradient-bubble: linear-gradient(110deg, var(--color-sky) 0%, var(--color-blue) 100%);
    --duration-appear: 600ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Карусель статей (T8b): прогресс-бар слайдера; mobile → tablet → desktop */
:root {
    --slider-gap: var(--space-xs);
    --slider-rail-thickness: 5px;               /* линия прогресс-бара 822×5 в макете */
    --slider-thumb-size: 28px;                  /* ползунок: 28 / 36 / 42 (415/768/1280) */
    --slider-progress-max-width: 822px;
    --article-teaser-media-ratio: 298 / 144;    /* обложка карточки 298×144 */
}

@media (min-width: 768px) {
    :root {
        --slider-gap: var(--space-s);
        --slider-thumb-size: 36px;
    }
}

@media (min-width: 1280px) {
    :root {
        --slider-thumb-size: 42px;
    }
}