/* переменные: цвета, шрифты, размеры, отступы */

/* * {
    border: 0.1px solid red;
} */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {

    /* Цвета (базовая палитра) */

    --white-50: #FFFFFF;
    --white-100: #EFEFEF;
    --white-200: #DCDCDC;
    --white-300: #BDBDBD;
    --white-400: #989898;
    --white-500: #7C7C7C;

    --orange-50: #FFF5ED;
    --orange-100: #FFE9D4;
    --orange-200: #FFCFA8;
    --orange-300: #FFAD70;
    --orange-400: #FF7E37;
    --orange-500: #FF6822;
    --orange-600: #e25b1d;

    --blue-50: #EFF5FF;
    --blue-100: #DCE9FD;
    --blue-200: #C1D8FC;
    --blue-300: #84B6F9;
    --blue-400: #659FF5;
    --blue-500: #407BF1;

    --black: #141414;

    /* Цвета (базовая палитра) */

    /* Шрифтовые семейства */

    --font-family-regular: 'Inter', sans-serif;

    /* Шрифтовые семейства */


    /* Шкала кратная 4 */

    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;

    /* Шкала кратная 4 */

    /* Размер шрифтов */

    --fs-0: clamp(42px, 8vw, 80px);
    --fs-1: clamp(28px, 5vw, 48px);  /* крупный заголовок */
    --fs-2: clamp(22px, 3.2vw, 32px); /* подзаголовок */
    --fs-3: clamp(18px, 2.4vw, 24px); /* h3 / крупный текст */
    --fs-4: clamp(14px, 1.6vw, 16px); /* базовый текст */
    --fs-5: clamp(12px, 1.2vw, 14px); /* мелкий текст */

     /* Размер шрифтов */

     
}

.mt-0 { margin-top: var(--space-0); }
.mb-0 { margin-bottom: var(--space-0); }

.pt-0 { padding-top: var(--space-0); }
.pb-0 { padding-bottom: var(--space-0); }

.mt-2 { margin-top: var(--space-1); }
.mb-2 { margin-bottom: var(--space-1); }

.pt-2 { padding-top: var(--space-1); }
.pb-2 { padding-bottom: var(--space-1); }

.mt-3 { margin-top: var(--space-2); }
.mb-3 { margin-bottom: var(--space-2); }

.pt-3 { padding-top: var(--space-2); }
.pb-3 { padding-bottom: var(--space-2); }

.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }

.pt-4 { padding-top: var(--space-4); }
.pb-4 { padding-bottom: var(--space-4); }

.pt-5 { padding-top: var(--space-5); }
.pb-5 { padding-bottom: var(--space-5); }

.mt-5 { margin-top: var(--space-5); }
.mb-5 { margin-bottom: var(--space-5); }

.mt-6 { margin-top: var(--space-6); }
.mb-6 { margin-bottom: var(--space-6); }

.pt-6 { padding-top: var(--space-6); }
.pb-6 { padding-bottom: var(--space-6); }

.mt-7 { margin-top: var(--space-7); }
.mb-7 { margin-bottom: var(--space-7); }

.pt-7 { padding-top: var(--space-7); }
.pb-7 { padding-bottom: var(--space-7); }

.mt-8 { margin-top: var(--space-8); }
.mb-8 { margin-bottom: var(--space-8); }

.pt-8 { padding-top: var(--space-8); }
.pb-8 { padding-bottom: var(--space-8); }

.mt-9 { margin-top: var(--space-9); }
.mb-9 { margin-bottom: var(--space-9); }

.pt-9 { padding-top: var(--space-9); }
.pb-9 { padding-bottom: var(--space-9); }

.left-align {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.right-align {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.center-align {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cnt-align {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.full-h {
    min-height: 100vh;
}

.full-w {
    width: 100%;
}