/* ==========================================================================
   ПЕРЕМЕННЫЕ
   ========================================================================== */


:root
{
    /* ==========================================================================
       ТЁМНЫЕ ЦВЕТА
       ========================================================================== */

    --coal:      #242424;
    --charcoal:  #313234;
    --graphite:  #414345;
    --gray-700:  #5A5D60;
    --gray-500:  #858586;
    --gray-300:  #BBBBBB;


    /* ==========================================================================
       СРЕДНИЕ ЦВЕТА
       ========================================================================== */

    --taupe:     #847A71;
    --stone:     #B3AB9E;
    --greige:    #B6A998;
    --sand-300:  #E5D4BA;
    --sand-500:  #CFB58F;


    /* ==========================================================================
       СВЕТЛЫЕ ЦВЕТА
       ========================================================================== */

    --cream-20:  #FAF9F6;
    --cream-50:  #F2EEE8;
    --cream-100: #F6EFE3;
    --cream-200: #F4EBDE;
    --cream-300: #ebe5db;
    --cream-400: #e7dfd3;
    --cream-500: #e2d9cc;    
    --linen:     #F5EFE6;
    --white:     #FEFEFE;


    /* ==========================================================================
       АКЦЕНТНЫЕ ЦВЕТА
       ========================================================================== */

    --sage-100:  #D0D7C4;
    --sage-300:  #A7B197;
    --sage-500:  #76836C;
    --sage-700:  #425144;
    --sand-gold: #D2B489;
    --gold:      #CAA46E;
    --yellow-100:#FFF1C9;
    --orange-100:#D96E18;
}


:root
{
    /* Контейнеры */
    --container-width: 1200px;
    --container-small-width: 900px;

    /* Секции */
    --section-padding: 100px;
    --section-padding-small: 60px;

    /* Размеры шрифта */
    --font-size-base: 16px;

    --font-size-h1: 56px;
    --font-size-h2: 42px;
    --font-size-h3: 30px;
    --font-size-h4: 24px;

    --line-height: 1.6;

    /* Скругления */
    --radius-small: 8px;
    --radius: 12px;
    --radius-large: 20px;

    /* Тени */
    --shadow-small: 0 2px 10px rgba(0, 0, 0, .08);
    --shadow: 0 10px 30px rgba(0, 0, 0, .10);

    /* Анимации */
    --transition: .25s ease;
    
    /* Шрифты */
    --font-text: "Manrope", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --font-text: "Onest", sans-serif;  
}