:root {
    --custom-accent-color-500: #d17617;
    --custom-accent-color-400: #d17617;

    --custom-black-color: #161718;
    --custom-white-color: #fff;

    --custom-gray-color-700: #656565;
    /* lines, input text */
    --custom-gray-color-600: #d4d4d4;
    /* input */
    --custom-gray-color-500: #474747;
    --custom-gray-color-400: #787878;

    --custom-hit-color: #d17617;
    --custom-sale-color: #54943e;
    --custom-new-color: #dfad0a;
    --custom-discount-color: #e03333;
    --custom-offer-color: #54943e;
    --custom-transparent-color: transparent;
}

:root {
    /* Фон шапки */
    --header__bg: var(--custom-black-color);
    /* цвет фона верхней шапки */
    --header-top-bg-color: var(--custom-black-color);
    /* цвет фона верхней шапки (legacy) */
    --header-bottom__bg: var(--custom-black-color);
    /* цвет фона нижней шапки */
    --header-bg-color: var(--custom-black-color);
    /* цвет фона нижней шапки (legacy) */

    /* Кнопка "Каталог товаров" */
    --catalog-btn__bg: var(--custom-accent-color-400);
    /* цвет фона */
    --catalog-menu-button_bg: var(--custom-accent-color-400);
    /* цвет фона (legacy) */
    --catalog-btn__borderColor: var(--custom-accent-color-400);
    /* цвет рамки */
    --catalog-btn__color: var(--custom-white-color);
    /* цвет текста */
    --catalog-btn__burgerColor: var(--custom-white-color);
    /* цвет бургера в кнопке - каталог товаров  */
    --header-buttons-font-color: var(--custom-white-color);
    /* цвет бургера в кнопке - каталог товаров (legacy) */
    --catalog-btn__bg--hover: var(--custom-accent-color-500);
    /* цвет фон при наведении */
    --catalog-btn__borderColor--hover: var(--custom-accent-color-500);
    /* цвет фона при наведении */
    --catalog-btn__color--hover: var(--custom-white-color);
    /* цвет текста при наведении */
    --catalog-btn__burgerColor--hover: var(--custom-white-color);
    /* цвет бургера в кнопке при наведении */

    /* Поле поиска */
    --search-box__bg: var(--custom-white-color);
    /* фон */
    --search-field-bg-color: var(--custom-gray-color-400);
    /* цвет фона (legacy) */
    --search-box__borderColor: var(--custom-gray-color-600);
    /* обводка */
    --search-field-border-color: var(--custom-gray-color-600);
    /* обводка (legacy) */
    --search-box__color: var(--custom-black-color);
    /* цвет текста */
    --search-field-font-color: var(--custom-black-color);
    /* цвет текста (legacy) */
    --search-box__placeholderColor: var(--custom-gray-color-600);
    /* цвет placeholder */
    --search-field-placeholder-font-color: var(--custom-gray-color-600);
    /* цвет placeholder (legacy) */

    /* кнопка в поле поиск  */
    --search-box-submit__bg: transparent;
    /* фон */
    --search-field-btn-color: transparent;
    /* цвет (legacy) */
    --search-box-submit__borderColor: var(--custom-gray-color-500);
    /* обводка */
    --search-box-submit__bg--hover: var(--custom-accent-color-400);
    /* фон */
    --search-box-submit__borderColor--hover: var(--custom-accent-color-400);
    /* обводка */

    /* Выпадающие результаты поиска */
    --search-box-item__bg: var(--custom-gray-color-400);
    /* фон */
    --search-box-item__borderBottomColor: var(--custom-gray-color-500);
    /* обводка снизу */
    --search-box-item__color: var(--custom-black-color);
    /* цвет текста */
    --search-box-item__priceColor: var(--custom-accent-color-500);
    /* цвет текста цены */

    /* после ховера - результат товара в поле поиск  */
    --search-box-item__bg--hover: var(--custom-black-color);
    /* фон */

    /* кнопка "все каталоги" в результате товара из поле поиск  */
    --search-box-all-item__bg: var(--custom-gray-color-700);
    /* фон */
    --search-box-all-item__color: var(--custom-white-color);
    /* цвет текста */

    /* Верхнее меню */
    --nav-item__color: var(--custom-gray-color-700);
    /* цвет */
    --header-top-menu-font-color: var(--custom-black-color);
    /* цвет (legacy) */
    --nav-item-active__color--active--hover: var(--custom-accent-color-400);
    /* цвет */
    --header-top-menu-font-hover-color: var(--custom-accent-color-400);
    /* цвет (legacy) */

    /* Счетчик корзины и сравнения */
    --option-item__color: var(--custom-gray-color-700);
    /* цвет */
    --option-item__bg: var(--custom-accent-color-400);
    /* фон (в дефолтной шапке) */
    --main-elements-color: var(--custom-accent-color-400);
    /* фон (в дефолтной шапке) (legacy) */
    --option-item__color--active--hover: var(--custom-accent-color-400);
    /* цвет */
    --main-elements-hover-color: var(--custom-accent-color-500);
    /* цвет при наведении (legacy) */

    /* Вход в ЛК */
    --accounts-item__color: var(--custom-gray-color-700);
    /* цвет */
    --accounts-item__color--hover: var(--custom-accent-color-400);
    /* цвет */

    /* Телефон в шапке */
    --contact-box-text__color: var(--custom-gray-color-700);
    /* цвет текста "Показать..." */
    --color: var(--custom-gray-color-700);
    /* цвет текста "Показать..." (legacy) */
    --contact-box-text-circle__color: var(--custom-accent-color-400);
    /* цвет мигающий точка */
    --contact-box-tel__color: var(--custom-gray-color-700);
    /* цвет текста телефона */
    --header-top-phone-font-color: var(--custom-gray-color-700);
    /* цвет текста телефона (legacy) */
    --contact-box-text__color--hover: var(--custom-accent-color-400);
    /* цвет текста */
    --color-hover: var(--custom-accent-color-400);
    /* цвет текста (legacy) */
    --contact-box-tel__color--hover: var(--custom-accent-color-400);
    /* цвет текста телефона */

    /* Заказать звонок */
    --contact-box-call-link__color: var(--custom-white-color);
    /* цвет текста */
    --color-button-callme-text: var(--custom-white-color);
    /* цвет текста (legacy) */
    --contact-box-call-link__bg: var(--custom-black-color);
    /* фон */
    --color-button-callme-background: var(--custom-black-color);
    /* фон (legacy) */
    --contact-box-call-link__borderColor: var(--custom-accent-color-400);
    /* обводка */
    --color-button-callme-border: var(--custom-accent-color-400);
    /* обводка (legacy) */
    --contact-box-call-link__bg--hover: var(--custom-accent-color-500);
    /* фон */
    --color-button-callme-background-hover: var(--custom-accent-color-500);
    /* фон (legacy) */
    --contact-box-call-link__color--hover: var(--custom-white-color);
    /* цвет текста */
    --color-button-callme-text-hover: var(--custom-white-color);
    /* цвет текста (legacy) */
    --contact-box-call-link__borderColor--hover: var(--custom-accent-color-500);
    /* обводка */
    --color-button-callme-border-hover: var(--custom-custom-accent-color-500);
    /* обводка (legacy) */

    /* кнопка callme (legacy) */
    --callme-button-color: var(--custom-white-color);
    /* цвет текста (legacy) */
    --callme-button-hover-color: var(--custom-white-color);
    /* цвет текста при наведении (legacy) */
    --callme-button-fill-color: var(--custom-white-color);
    /* цвет фона (legacy) */
    --callme-button-fill-hover-color: var(--custom-accent-color-500);
    /* цвет фона при наведении (legacy) */

    /* Выпадающее меню каталога */
    --menu-box_catalog-box__bg: var(--custom-gray-color-600);
    /* фон */
    --menu-box_catalog-box-ul-a__color: var(--custom-white-color);
    /* цвет текста пунктов */
    --menu-box_catalog-box-ul-a__color--hover: var(--custom-accent-color-400);
    /* цвет текста пунктов */
    --category-menu-font-highlight-color: var(--custom-accent-color-400);
    /* цвет текста пунктов (legacy) */
    --menu-box_catalog-box-ul-a__underlineColor--hover: var(--custom-accent-color-400);
    /* цвет подчеркивания если есть при наведении */
    --category-menu-underline-highlight-color: var(--custom-accent-color-400);
    /* цвет подчеркивания если есть */

    /* Кнопка меню для шапки v3 */
    --menu-btn__bg: var(--custom-gray-color-100);
    /* фон */
    --menu-btn__borderColor: var(--custom-gray-color-700);
    /* обводка */
    --menu-btn__color: var(--custom-white-color);
    /* цвет текста */
    --menu-btn__bg--hover: var(--custom-accent-color-400);
    /* фон */
    --menu-btn__borderColor--hover: var(--custom-accent-color-400);
    /* обводка */
    --menu-btn__color--hover: var(--custom-white-color);
    /* цвет текста */

    /* Пункты меню для шапок версий fat-v2 */
    --fat-v2-nav-ul-li-a__color: var(--custom-white-color);
    /* цвет текста */
    --fat-v2-nav-ul-li-a__bg--hover: var(--custom-gray-color-800);
    /* фон */
    --fat-v2-nav-ul-li-a__color--hover: var(--custom-white-color);
    /* цвет текста */
    --fat-v2-nav-ul-li-a__color--active: var(--custom-accent-color-400);
    /* цвет текста */
    --fat-v2-nav-ul-li-ul-li__bg: var(--custom-gray-color-800);
    /* фон */
    --fat-v2-nav-ul-li-ul-li-a__color: var(--custom-white-color);
    /* цвет текста */
    --fat-v2-nav-ul-li-ul-li-a__color--hover: var(--custom-accent-color-400);
    /* цвет текста */
    --fat-v2-nav-ul-li-ul-li__bg--hover: var(--custom-gray-color-700);
    /* фон */
}

/* "Шапки в адаптиве */
:root {
    /* Фон */
    --mob-header__bg: var(--custom-white-color);
    /* Фон шапки  */
    --mob-header_bottom__bg: var(--custom-gray-color-700);
    /* Фон нижной части шапки или фиксированный ниже */
    --mob-header_bottom__borderColor: var(--custom-gray-color-700);
    /* Цвет Обводки с верху  */

    /* Поле поиска */
    --mob-search-box__bg: var(--custom-white-color);
    /* фон */
    --mob-search-box__borderColor: var(--custom-gray-color-700);
    /* обводка */
    --mob-search-box__color: var(--custom-black-color);
    /* цвет текста */
    --mob-search-box__placeholderColor: var(--custom-gray-color-700);
    /* цвет placeholder */
    --mob-search-box-submit__bg: var(--custom-gray-color-100);
    /* фон */
    --mob-search-box-submit__borderColor: var(--custom-gray-color-700);
    /* обводка */
    --mob-search-box-submit__bg--hover: var(--custom-accent-color-400);
    /* фон */
    --mob-search-box-submit__borderColor--hover: var(--custom-accent-color-400);
    /* обводка */

    /* Результаты поиска */
    --mob-search-box-item__bg: var(--custom-white-color);
    /* фон */
    --mob-search-box-item__borderBottomColor: rgba(0,
            0,
            0,
            0.13);
    /* обводка с низу */
    --mob-search-box-item__color: var(--custom-black-color);
    /* цвет текста */
    --mob-search-box-item__priceColor: var(--custom-accent-color-500);
    /* цвет текста цены */
    --mob-search-box-item__bg--hover: var(--custom-black-color);
    /* фон */

    /* Кнопка "каталог товаров" */
    --mob-catalog-btn__bg: var(--custom-white-color);
    /* фон */
    --mob-catalog-btn__borderColor: var(--custom-gray-color-700);
    /* обводка */
    --mob-catalog-btn__color: var(--custom-gray-color-700);
    /* цвет текста */
    --catalog-menu-font-color: var(--custom-gray-color-700);
    /* цвет текста (legacy) */
    --mob-catalog-btn__burgerColor: var(--custom-gray-color-700);
    /* цвет бургера в кнопке - каталог товаров  */
    --mob-catalog-btn__bg--hover: var(--custom-accent-color-400);
    /*  фон */
    --mob-catalog-btn__borderColor--hover: var(--custom-accent-color-400);
    /* обводка */
    --mob-catalog-btn__color--hover: var(--custom-white-color);
    /* цвет текста */
    --mob-catalog-btn__burgerColor--hover: var(--custom-white-color);
    /* цвет бургера в кнопке */

    /* Бургер мобильного меню */
    --mob-burger-btn__color: var(--custom-accent-color-400);
    /* цвет */
    --header-top-icon-color: var(--custom-white-color);
    /* цвет (legacy) */

    /* Телефоны */
    --mob-contact-box-phone__color: var(--custom-gray-color-700);
    /* цвет текста */
    --mob-contact-box-phone__bg: transparent;
    /* фон (если есть)*/
    --mob-contact-box-phone__borderColor: var(--custom-accent-color-400);
    /* обводка (если есть)*/
    --mob-contact-box-phone__color--hover: var(--custom-white-color);
    /* цвет текста */
    --mob-contact-box-phone__bg--hover: var(--custom-accent-color-400);
    /* фон (если есть)*/
    --mob-contact-box-phone__borderColor--hover: var(--custom-accent-color-400);
    /* обводка (если есть)*/

    /* Заказать звонок */
    --mob-contact-box-order-call__color: var(--custom-white-color);
    /* цвет текста */
    --mob-contact-box-order-call__bg: transparent;
    /* фон (если есть)*/
    --mob-contact-box-order-call__borderColor: var(--custom-accent-color-400);
    /* обводка (если есть)*/
    --mob-contact-box-order-call__color--hover: var(--custom-white-color);
    /* цвет текста */
    --mob-contact-box-order-call__bg--hover: var(--custom-accent-color-400);
    /* фон (если есть)*/
    --mob-contact-box-order-call__borderColor--hover: var(--custom-accent-color-400);
    /* обводка (если есть)*/

    /* Корзина */
    --mob-cart-number__color: var(--custom-gray-color-700);
    /* цвет текста */
    --mob-cart-number__bg: var(--custom-white-color);
    /* фон (если есть)*/
    --mob-cart-number__borderColor: var(--custom-accent-color-400);
    /* обводка (если есть)*/
    --mob-cart-number__color--hover: var(--custom-white-color);
    /* цвет текста */
    --mob-cart-number__bg--hover: var(--custom-accent-color-400);
    /* фон (если есть)*/
    --mob-cart-number__borderColor--hover: var(--custom-accent-color-400);
    /* обводка (если есть)*/
}

/* Переменные темы */
:root {
    /* выпадающие меню */
    --color-main-dropdown-menu-bg: var(--custom-white-color);
    /* цвет фона */
    --color-main-dropdown-menu-text: var(--custom-white-color);
    /* цвет текста */

    /* основная кнопка */
    --color-button-primary-text: var(--custom-white-color);
    /* цвет текста */
    --color-button-primary-background: var(--custom-accent-color-400);
    /* цвет фона */
    --color-button-primary-border: var(--custom-accent-color-400);
    /* цвет рамки */
    --color-button-primary-text-hover: var(--custom-white-color);
    /* цвет текста при наведении */
    --color-button-primary-background-hover: transparent;
    /* цвет фона при наведении */
    --color-button-primary-border-hover: var(--custom-accent-color-500);
    /* цвет рамки при наведении */

    /* вторичная кнопка */
    --color-button-secondary-text: var(--custom-white-color);
    /* цвет текста */
    --color-button-secondary-background: var(--custom-accent-color-400);
    /* цвет фона */
    --color-button-secondary-border: var(--custom-accent-color-400);
    /* цвет рамки */
    --color-button-secondary-text-hover: var(--custom-white-color);
    /* цвет текста при наведении */
    --color-button-secondary-background-hover: transparent;
    /* цвет фона при наведении */
    --color-button-secondary-border-hover: var(--custom-accent-color-500);
    /* цвет рамки при наведении */

    /* не активная кнопка */
    --color-button-muted-text: var(--custom-gray-color-700);
    /* цвет текста */
    --color-button-muted-background: var(--custom-gray-color-400);
    /* цвет фона */
    --color-button-muted-border: var(--custom-gray-color-400);
    /* цвет рамки */
    --color-button-muted-text-hover: var(--custom-white-color);
    /* цвет текста при наведении */
    --color-button-muted-background-hover: var(--custom-gray-color-700);
    /* цвет фона при наведении */
    --color-button-muted-border-hover: var(--custom-gray-color-700);
    /* цвет рамки при наведении */

    /* кнопка корзины */
    --color-button-cart-text: var(--custom-white-color);
    /* цвет текста */
    --color-button-cart-background: var(--custom-accent-color-400);
    /* цвет фона */
    --color-button-cart-border: var(--custom-accent-color-400);
    /* цвет рамки */
    --color-button-cart-text-hover: var(--custom-white-color);
    /* цвет текста при наведении */
    --color-button-cart-background-hover: var(--custom-accent-color-500);
    /* цвет фона при наведении */
    --color-button-cart-border-hover: var(--custom-accent-color-500);
    /* цвет рамки при наведении */

    /* без цветные кнопки */
    --colorless-buttons-border-color: var(--custom-white-color);
    /* цвет рамки */
    --colorless-buttons-font-color: var(--custom-gray-color-700);
    /* цвет текста */
    --colorless-buttons-font-color-hover: var(--custom-accent-color-400);
    /* цвет текста */
    --colorless-buttons-hover-bg: var(--custom-white-color);
    /* цвет фона при наведении */

    /* кнопка счета */
    --invoice-button-color: var(--custom-accent-color-400);
    /* цвет кнопки */

    /* товары */
    --hit-tag-bg-color: var(--custom-hit-color);
    /* фон бирки 'хит' */
    --sale-tag-bg-color: var(--custom-sale-color);
    /* Фон бирки 'распродажа' */
    --new-tag-bg-color: var(--custom-new-color);
    /* фон бирки 'новинка' */
    --discount-tag-bg-color: var(--custom-discount-color);
    /* фон бирки 'уценка' */
    --offer-tag-bg-color: var(--custom-offer-color);
    /* фон бирки 'акция' */
    --hit-tag-font-color: var(--custom-white-color);
    /* цвет текста бирки 'хит' */
    --sale-tag-font-color: var(--custom-white-color);
    /* цвет текста бирки 'распродажа' */
    --discount-tag-font-color: var(--custom-white-color);
    /* цвет текста бирки 'уценка' */
    --new-tag-font-color: var(--custom-white-color);
    /* цвет текста бирки 'новинка' */
    --offer-tag-font-color: var(--custom-white-color);
    /* цвет текста бирки 'акция' */
    --product-list-header-link-color: var(--custom-black-color);
    /* цвет ссылки товара */
    --product-list-header-link-hover-color: var(--custom-accent-color-400);
    /* цвет ссылки при наведении */
    --product-tab-link-color: var(--custom-gray-color-700);
    /* цвет ссылки таба */
    --product-tab-link-hover-color: var(--custom-accent-color-400);
    /* цвет ссылки таба при наведении */
    --color-card-border: var(--custom-gray-color-500);
    /* цвет рамки карточки */
    --product-preview-border-hover-color: var(--custom-gray-color-600);
    /* цвет рамки превью при наведении */
    --product-preview-bg-color: var(--custom-white-color);
    /* цвет фона превью */
    --color-product-online-price: var(--custom-gray-color-700);
    /* цвет онлайн цены */
    --checkout-button-font-color: var(--custom-gray-color-700);
    /* цвет подтверждающей кнопки */
    --invoice-button-font-color: var(--custom-accent-color-400);
    /* цвет кнопки счета */

    /* Статьи */
    --article-label-font-color: var(--custom-gray-color-700);
    /* цвет текста */
    --article-label-bg-color: var(--custom-white-color);
    /* цвет фона */

    /* новости и акции */
    --news-label-bg-color: var(--custom-accent-color-400);
    /* Фон плашки для новостей */
    --news-label-font-color: var(--custom-white-color);
    /* Цвет шрифта плашки для новостей */
    --action-label-bg-color: var(--custom-accent-color-400);
    /* Фон плашки акций */
    --action-label-font-color: var(--custom-white-color);
    /* Цвет шрифта плашки акций */

    /* меню каталога */
    --catalog-menu-bg-color: var(--custom-white-color);
    /* Фон меню каталога */
    --catalog-menu-hover-bg-color: var(--custom-white-color);
    /* фон меню при наведении */
    --catalog-menu-border-color: var(--custom-gray-color-200);
    /* цвет рамки */
    --catalog-menu-font-hover-color: var(--custom-gray-color-700);
    /* цвет текста при наведении */
    --catalog-menu-burger-color: var(--custom-accent-color-400);
    /* цвет бургера */
    --catalog-menu-link-hover: var(--custom-accent-color-400);
    /* цвет ссылки при наведении */
    --catalog-menu-arrow-color: var(--custom-accent-color-400);
    /* цвет стрелок */

    /* форма обратной связи */
    --feedback-form-section-bg-color: transparent;
    /* Фон блока с формой обратной связи */
    --feedback-form-bg: transparent;
    /* Цвет фона внутри самой формы обратной связи */
    --feedback-form-title: var(--custom-white-color);
    /* Форма обратной связи: цвет заголовка: */
    --feedback-form-text: var(--custom-gray-color-700);
    /* Форма обратной связи: цвет текста: */
    --feedback-form-border: var(--custom-gray-color-600);
    /* Форма обратной связи: цвет обводки: */
    --feedback-form-input-border: var(--custom-gray-color-600);
    /* Форма обратной связи: цвет обводки элементов формы: */

    /* хлебные крошки */
    --breadcrumb-item-color: var(--custom-white-color);
    /* Цвет ссылок в крошках: */
    --breadcrumb-item-hover-color: var(--custom-accent-color-400);
    /* Цвет ссылок в крошках при наведении */

    /* статичные страницы */
    --staticpage-box-fill-color: var(--custom-black-color);
    /* Цвет заливки для текстовых блоков на статичных страницах */
    --staticpage-box-border-color: var(--custom-accent-color-400);
    /* Цвет обводки для текстовых блоков на статичных страницах */

    /* личный кабинет */
    --color-lk-accent-items: var(--custom-accent-color-400);
    /* Цвет иконок в ЛК: */
    --color-lk-items-bg: transparent;
    /* Цвет фона для блоков на страницах ЛК */
    --color-lk-items-border: var(--custom-accent-color-400);
    /* Цвет обводки для блоков на страницах ЛК */
    --color-lk-items-hover-bg: var(--custom-accent-color-400);
    /* Цвет фона для блоков на страницах ЛК при наведении */

    /* подвал */
    --footer-bg-color: var(--custom-black-color);
    /* цвет подвала */
    --color-footer-links: var(--custom-white-color);
    /* цвет ссылок подвала */
    --color-footer-links-hover: var(--custom-accent-color-400);
    /* цвет ссылок подвала при наведении */
    --color-footer-title: var(--custom-white-color);
    /* цвет заголовка подвала */

    /* разное */
    --frontpage-first-screen-bg-color: var(--custom-black-color);
    /* цвет фона главной страницы */
    --preview-bg-color: var(--custom-black-color);
    /* цвет фона предпросмотра */
    --preview-font-color: var(--custom-white-color);
    /* цвет текста предпросмотра */
    --preview-bg-hover-color: var(--custom-black-color);
    /* цвет заднего фона предпросмотра */
    --inner-page-bg: var(--custom-black-color);
    /* фон внутренних страниц */
}