/* root */

:root {
    /* Крупные заголовки */
    --text-xxxl: clamp(42px, calc(2.037vw + 34.667px), 64px);
    /* H1 */
    --text-xxl: clamp(32px, calc(1.481vw + 26.667px), 48px);
    /* H2 */

    /* Средние заголовки и акценты */
    --text-lg: clamp(18px, calc(0.370vw + 16.667px), 22px);
    /* H3 */
    --text-md: clamp(16px, calc(0.185vw + 15.333px), 18px);
    /* основной текст */

    /* Мелкий текст, подписи, footer */
    --text-sm: clamp(12px, calc(0.185vw + 11.333px), 14px);

    /* Вес шрифта (font-weight) */

    --fw-regular: 300;
    /* Обычный вес — основной текст, параграфы */
    --fw-medium: 500;
    /* Средний вес — подзаголовки, активные элементы интерфейса */
    --fw-semibold: 700;
    /* Полужирный — заголовки, кнопки, акценты */


    /* Основные цвета интерфейса */

    --bg: 248 249 245;
    /* Основной фон страницы (мягкий светлый оттенок, почти белый) */
    --fg: 34 34 34;
    /* Основной цвет текста (глубокий тёмно-серый для хорошего контраста) */
    --muted: 90 90 90;
    /* Второстепенный текст (подписи, вспомогательные элементы) */

    /* Акцентные цвета */

    --accent-green: 100 170 60;
    /* Зелёный акцент — для кнопок подтверждения, успеха, положительных действий */
    --accent-blue: 88 173 213;
    /* Голубой акцент — для ссылок, акцентов в интерфейсе, спокойных элементов */
    --accent-yellow: 249 212 60;
    /* Жёлтый акцент — для выделения, предупреждений или внимания пользователя */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    color: rgb(var(--fg));
    background: rgb(var(--bg));
    font-size: var(--text-md);
    line-height: 1.6;
    cursor: default;
}

header {
    max-width: 1440px;
    margin: 0 auto;
    font-weight: var(--fw-medium);
}

ul {
    list-style: none;
}

footer {
    max-width: 1440px;
    margin: 0 auto;
    font-size: var(--text-md);
    font-weight: var(--fw-regular);
}