/* ====================== */
/* 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: #CD2D25;
    --color-dark: rgb(55, 56, 57);
    --color-light: #ffffff;
    /*Hover цвета*/
    --color-primary-hover: #8f201b;
    --color-gray-hover: #2e2e2e;
    --color-gray: rgba(0, 0, 0, 0.5);
    /*Цвета для текстов*/
    --color-text: var(--color-dark);
    /* Цвета для bg*/
    --color-bg_dark: #A2A1A1;
    --color-light-dark: #f1f1f1;
    --color-bg: #f5f5f5;


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

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

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

    --hw-100: 100%;
}

:root {
    --font-base: clamp(1rem, 1vw + 0.5rem, 1.5rem); /* 16–24px */
    --font-small: clamp(0.875rem, 0.75vw + 0.5rem, 1rem); /*14-16px*/
    --font-large: clamp(1.25rem, 1.5vw + 0.5rem, 2rem);/*20-32px*/
    --font-h1: clamp(2rem, 4vw + 1rem, 4rem);/*32-64px*/
}