@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
/* ===============================
VARIABLES.CSS
Основные переменные Luxrem
=============================== */

/* ========== Цвета ========== */
:root {
    --color-primary: #D2C2AC;
    /* Основной яркий цвет */
    --color-dark: #111111;
    /* Темный текст */
    --color-white: #FFFFFF;
    /* Белый фон */
    --color-gray-light: #DFDFDF;
    /* Светло-серый фон/границы */
    --color-gray: #999999;
    /* Средний серый текст */
    --color-gray-dark: #676767;
    /* Темный серый текст */
    /* --color-accent: #FAEEC8; */
    --color-accent: #D2C2AC;
    /* Акцентный светлый */
    --color-accent-dark: #b5a895;
    /* Акцент темнее */
    --color-accent-rgb: 210, 194, 172;
    /* для rgba() */
    --color-accent-ghost: #FFF5E0;


    --background-btns: linear-gradient(90.97deg, #D2C2AC 0.67%, #F6F3EE 50.09%, #D2C2AC 98.57%);

}

/* ========== Радиусы ========== */
:root {
    --radius-small: 8px;
    --radius-medium: 16px;
    --radius-round: 40px;
}

/* ========== Шрифты ========== */
:root {
    --font-primary: "Merriweather", sans-serif;
    /* --font-primary: "Manrope", sans-serif; */
    --font-secondary: 'Arial', sans-serif;
}

/* ========== Типографика ========== */
:root {
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
    --font-size-xxl: 36px;
    --font-size-xxxl: 54px;
    --line-height-sm: 1.2;
    --line-height-md: 1.5;
    --line-height-lg: 1.8;
}

/* ========== Тени ========== */
:root {
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.16);
}

/* ========== Анимации ========== */
:root {
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.4s ease-in-out;
    --transition-slow: 0.6s ease-in-out;
}

/* ========== Контейнер ========== */
:root {
    --container-max-width: 1424px;
    --container-padding: 24px;
}

/* ========== Сетка ========== */
:root {
    --gap-xs: 8px;
    --gap-sm: 16px;
    --gap-md: 24px;
    --gap-lg: 40px;
}

/* ========== Кнопки ========== */
:root {
    --button-padding-vertical: 12px;
    --button-padding-horizontal: 24px;
    --button-radius: var(--radius-medium);
}