/* ====================== */
/* FONT SIZE SYSTEM (rem) */
/* ====================== */
:root {
    /* Базовый размер (обычно 16px в браузерах) */
    --base-font-size: 16px;

    /* Коэффициент масштабирования (1.2 = золотое сечение) */
    --scale-factor: 1.2;

    /* Цвета текста (опционально) */
    --text-color: #333;
    --text-light: #777;
}

:root{
    /*Основные цвета*/
    --color-primary: #0066cc;
    --color-primary-dark: #003151;
    --color-primary-hover: #559fea;
    --color-dark: #000;
    --color-dark-light: #1A1A1A;
    --color-light: #ffffff;
    /*Hover цвета*/
    --color-accent: #0066cc;
    --color-gray-hover: #9d9d9d;
    --color-gray: #f5f5f5;
    /*Цвета для текстов*/
    --color-text: var(--color-dark);
    --color-desc: #BCBCBC;
    /* Цвета для bg*/
    --color-bg_dark: #A2A1A1;
    --color-light-dark: #D9D9D9;
    --color-bg: #f5f5f5;


    /* Шрифты */
    --font-main:  400 var(--base-font-size) 'Montserrat', sans-serif;

    /* Отступы */
    --gap-sm: 10px;
    --gap-md: 20px;
    --gap-lg: 30px;

    /*Ширина и длина на 100%*/

    --hw-100: 100%;
}

:root {
    /* Маленький текст: 14–16px */
    --font-small: clamp(0.875rem, 0.3vw + 0.75rem, 1rem); /* 14–16px */

    /* Базовый текст: 16–20px */
    --font-base: clamp(1rem, 0.6vw + 0.7rem, 1.25rem); /* 16–20px */

    /* Средний текст: 18–24px */
    --font-md: clamp(1.125rem, 1vw + 0.5rem, 1.5rem); /* 18–24px */

    /* Крупный текст: 24–32px */
    --font-large: clamp(1.5rem, 1.5vw + 0.5rem, 2rem); /* 24–32px */

    /* Заголовок H1: 32–64px */
    --font-h1: clamp(2rem, 4vw + 1rem, 4rem); /* 32–64px */
}