/* ===== ПЕРЕМЕННЫЕ ===== */
:root {
    /* Шрифты */
    --font-primary: 'Faberge', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Involve', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* ===== Утилитарные цвета===== */
    --color-white: #FFFFFF;
    --color-grey-back: #F6F6F6;
    --color-grey-superlight: #EEECE9;
    --color-grey-light: #C1BBB0;
    --color-grey-medium: #A39F99;
    --color-dark-brown: #4E4640;
    
    /* ===== Акцентные цвета ===== */
    --color-orange: #FFA612;
    --color-green: #779D1D;
    --color-salmon: #FF8562;
    --color-turquoise: #82BAAF;
    --color-lime: #ACB202;
    --color-lime-light: #B7BD03;
    --color-red: #EA6338;
    --color-coral: #FA6A3C;
    --color-yellow: #FFB71A;
    --color-turquoise-light: #90C4BA;
    --color-green-light: #7FA31C;
    --color-salmon-light: #FF9370;

    /* Базовые размеры для адаптива */
    --font-h1: 64px;
    --font-h2: 56px;
    --font-h3: 48px;
    --font-h4: 40px;
    --font-h5: 32px;
    --font-big: 24px;
    --font-body: 18px;
  
    /* line-height */
    --line-height-tight: 90%;
    --line-height-normal: 100%;
    --line-height-loose: 140%;
    --line-height-extra-loose: 160%;
    
    /* letter-spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0.01em;
}

/* ===== АДАПТИВНЫЕ РАЗМЕРЫ (Media Queries) ===== */

/* Планшеты (768px - 1279px) */
@media (max-width: 1279px) {
    :root {
        --font-h1: 56px;
        --font-h2: 44px;
        --font-h3: 32px;
        --font-h4: 28px;
        --font-h5: 24px;
        --font-big: 22px;
        --font-body: 16px;
    }
}

/* Мобильные (до 767px) */
@media (max-width: 767px) {
    :root {
        --font-h1: 36px;
        --font-h2: 32px;
        --font-h3: 28px;
        --font-h4: 28px;
        --font-h5: 22px;
        --font-big: 22px;
        --font-body: 14px;
    }
}

/* ===== КЛАССЫ ДЛЯ ЗАГОЛОВКОВ ===== */
.h1, h1 {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--font-h1);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-dark-brown);
}

.h2, h2 {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--font-h2);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-dark-brown);
}

.h3, h3 {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--font-h3);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-dark-brown);
}

.h4, h4 {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--font-h4);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-dark-brown);
}

.h5, h5 {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--font-h5);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-dark-brown);
}

/* ===== ТЕКСТ ===== */
.big-text {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--font-big);
    line-height: var(--line-height-normal);
    letter-spacing: -0.01em;
    color: var(--color-dark-brown);
}

p, .text-body {
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: var(--font-body);
    line-height: var(--line-height-loose);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-dark-brown);
}

/* Адаптив для p на планшетах */
@media (max-width: 1279px) {
    p, .text-body {
        line-height: var(--line-height-extra-loose);
    }
}

/* ФОН */
.bg-white { background-color: var(--color-white); }
.bg-grey-back { background-color: var(--color-grey-back); }
.bg-grey-superlight { background-color: var(--color-grey-superlight); }
.bg-grey-light { background-color: var(--color-grey-light); }
.bg-grey-medium { background-color: var(--color-grey-medium); }
.bg-dark-brown { background-color: var(--color-dark-brown); }
.bg-orange { background-color: var(--color-orange); }
.bg-green { background-color: var(--color-green); }
.bg-salmon { background-color: var(--color-salmon); }
.bg-turquoise { background-color: var(--color-turquoise); }
.bg-lime { background-color: var(--color-lime); }
.bg-lime-light { background-color: var(--color-lime-light); }
.bg-red { background-color: var(--color-red); }
.bg-coral { background-color: var(--color-coral); }
.bg-yellow { background-color: var(--color-yellow); }
.bg-turquoise-light { background-color: var(--color-turquoise-light); }
.bg-green-light { background-color: var(--color-green-light); }
.bg-salmon-light { background-color: var(--color-salmon-light); }

/* ===== ЦВЕТ ТЕКСТА ===== */
.text-white { color: var(--color-white); }
.text-grey-back { color: var(--color-grey-back); }
.text-grey-superlight { color: var(--color-grey-superlight); }
.text-grey-light { color: var(--color-grey-light); }
.text-grey-medium { color: var(--color-grey-medium); }
.text-dark-brown { color: var(--color-dark-brown); }
.text-orange { color: var(--color-orange); }
.text-green { color: var(--color-green); }
.text-salmon { color: var(--color-salmon); }
.text-turquoise { color: var(--color-turquoise); }
.text-lime { color: var(--color-lime); }
.text-lime-light { color: var(--color-lime-light); }
.text-red { color: var(--color-red); }
.text-coral { color: var(--color-coral); }
.text-yellow { color: var(--color-yellow); }
.text-turquoise-light { color: var(--color-turquoise-light); }
.text-green-light { color: var(--color-green-light); }
.text-salmon-light { color: var(--color-salmon-light); }

/* КНОПКИ */