:root {
    --background: #EFF6FF; /* Цвет основного фона (страницы, меню) */
    --surface: #FFFFFF; /* Цвет фона контейнеров */
    --border: #EEF0F2; /* Цвет границ */
    --text-color: #0B254B; /* Цвет текста на странице */
    --logo-path: url('/assets/images/logo.jpg'); /* Путь к логотипу */
    --logo-width: 156px; /* Ширина логотипа */
    --logo-height: 48px; /* Высота логотипа */
    --logo-width-xs: 104px; /* Ширина логотипа на смартфонах */
    --logo-height-xs: 32px; /* Высота логотипа на смартфонах */
    
    --button-text-color: rgb(var(--primary)); /* Цвет текста кнопок */
    --button-primary-background: rgb(var(--primary)); /* Цвет фона тёмных кнопок */
    --button-primary-background-hover: #2B6AC8; /* оттенок для ховера */

    --menu-button-background: #DEEAFC; /* Цвет фона кнопки меню */
    --menu-button-line-background: #2893DA; /* Цвет линий в кнопке меню */
    --input-background: #F3F4F5; /* Цвет фона инпутов */
    --checkbox-background: rgb(var(--primary)); /* Цвет фона чекбоксов */

    /* Основной цвет и его оттенки */
    --primary: 59, 122, 216; /* основной цвет, присутствует в кнопках, ссылках, иконках. Указывать в RGB */

    /* Цвет успешной операции, напоминания без просрочки и т.д. */
    --success: 94, 153, 5; /* указывать в RGB, поскольку имеет светлые оттенки за счёт rgba */
    --success-darken-1: #4E8200; /* оттенок текста, используется в заголовке */

    /* Цвет предупреждения */
    --warning: 255, 195, 0; /* цвет фона и иконки, указывать в RGB */
    --warning-text-color: #E79800; /* цвет текста */

    /* Цвет неудачной операции, напоминания просрочки и т.д. */
    --danger: 225, 29, 72; /* указывать в RGB, поскольку имеет светлые оттенки за счёт rgba */

    --counter-background: rgba(var(--primary), 0.09); /* Цвет фона счётчика договоров */
    --detail-link-color: rgb(var(--primary)); /* Цвет текста ссылок, раскрывающих детальную информацию */
    --counter-text: var(--text-color); /* Цвет текста счётчика договоров */
}