/* ОБЩИЕ ЦВЕТА ДЛЯ ВСЕХ ТЕМ */
:root {
    /* Цвет иконки "Закрыть" у модального окна. */
    --color-model-close-icon: #ffffff;

    /* Цвет подсказочного текста */
    --color-hint: #a59f97;

    /* Основной цвет проекта. */
    --color-primary: #FF6955;
    --color-primary-light: #FF9A8D;
    --color-primary-hover: #FF5741;

    /* Основной стиль кнопки. */
    --color-btn-primary-bg: #FF6955;
    --color-btn-primary-text: #FFFFFF;

    /* Цвет звезды рейтинга. */
    --color-star: #f0bd2d;

    /* Цвет ссылки. */

    --color-link: #FF6955;

    /* Цвет анимации скелетона. */
    --theme-skeleton-gradient: linear-gradient(to right, var(--theme-skeleton-bg), var(--theme-skeleton-bg-glare), var(--theme-skeleton-bg));

    /* Скругление. */
    --theme-border-radius: 12px;
    --theme-border-radius-sm: 8px;
    --theme-border-radius-xsm: 4px;

    /* Цвет ошибочной и валидной информации. */
    --color-error: #FF362F;
    --color-valid: #4ab44a;

    /* Максимальная ширина сайта. */
    --cotainer-max-width: 1782px;

    /* Анимания при клике на части некоторых компонентов
       TheButton.vue / TabsCategories.vue / ButtonAddToCart.vue. */
    --transition-click: cubic-bezier(.28,.82,.76,1.13);

    /* Цвет испарения контента в вертикальном скролле, когда контент немного прокручен, но скрол не дошёл до конца. */
    --color-section-transparent: color-mix(in srgb, var(--color-section) 0%, transparent);

    --item-card-aspect-ratio: 1 / 0.75;
}

/* СВЕТЛАЯ ТЕМА */
:root {
    /* Основной цвет фона. */
    --color-bg-primary: #f5f4f2;

    /* Вторичный цвет фона. */
    --color-bg-secondary: #edebe8;

    /* Цвет секции (используется повсеместно в компонентах. */
    --color-section: #ffffff;

    --color-section-pinned: rgba(255, 255, 255, 0.85);

    /* Цвет текст. */
    --color-text: #060606;

    /* "Светлый" стиль базовой кнопки src/components/TheButton.vue */
    --color-btn-light: #ffffff;
    --color-btn-light-hover: #ffffff;

    /* Вторичный стиль базовой кнопки src/components/TheButton.vue */
    --color-btn-secondary: #edebe8;
    --color-btn-secondary-hover: #E4E1DD;

    /* Стиль кнопки "Добавить в корзину" src/components/buttons/ButtonAddToCart.vue */
    --color-btn-cart: #f5f4f2;
    --color-btn-cart-hover: #E4E1DD;

    /* Цвет фона элемента "Скелетон" src/components/skeleton/*. */
    --theme-skeleton-bg: #E4E1DD;
    /* Цвет светового отражения элемента "Скелетон" src/components/skeleton/*. */
    --theme-skeleton-bg-glare: #edebe8;

    /* Цвет элемента "Разделитель", "Разделительная линия". */
    --color-delimiter: #edebe8;

    /* Цвет фона у элемента переключения "Доставка/Самовывоз" на мобильных устройствах. */
    --color-switch-shipping-bg-mobile: #ECEBE7;

    /* Цвет рамки у элемента "Чекбокс" src/components/TheCheckbox.vue. */
    --color-checkbox-border: #a59f97;

    /* Цвет плашки у модального окна. */
    --color-grabber: #edebe8;

    /* Фон кнопки "Фильтр" на мобильных устройствах. */
    --color-btn-filter-bg-mobile: #ffffff;

    /* Цвета компонентов "Ввода текстовой информации"
       src/components/[TheInput|TheSelect|CodeInput|TheTextArea].vue
       и инпута промокода на странице OrderView.vue */
    --color-input-focused: #edebe8;
    --color-input-disabled: #EDECE8;

    /* Цвет фона за изображением у компонента карточки товара
       src/components/[CartItem|DialogItemCard].vue */
    --color-item-photo-bg: #E4E1DD;

    /* Цвет фона если у карточки товара отсутствует изображение src/components/CartItem.vue */
    --color-noimg-bg: #ebe8e6;

    /* Цвета компонента "Переключатель темы"
       src/components/ThemeSwitch.vue */
    --color-themeSwitch-bg: var(--color-bg-primary);
    --color-themeSwitch-toggle: var(--color-section);
}

/* ТЁМНАЯ ТЕМА */
:root[dark] {
    --color-bg-primary: #000000;
    --color-bg-secondary: #1c1b1a;
    --color-section: #1F1E1D;/*#262524;*/
    --color-section-pinned: rgba(31, 30, 29, 0.95);
    --color-text: #ffffff;

    --color-btn-light: #262524;
    --color-btn-light-hover: #262524;
    --color-btn-secondary: #262524;
    --color-btn-secondary-hover: #302F2F;
    --color-btn-cart: #000000;
    --color-btn-cart-hover: #141414;

    --theme-skeleton-bg: #302F2F;
    --theme-skeleton-bg-glare: #121111;

    --color-delimiter: #000000;

    --color-switch-shipping-bg-mobile: #000000;

    --color-checkbox-border: #595652;

    --color-grabber: #000000;

    --color-btn-filter-bg-mobile: #1F1E1D;

    --color-input-focused: #141414;
    --color-input-disabled: #242422;

    --color-item-photo-bg: #302F2F;

    --color-noimg-bg: #141414;

    /* Цвета компонента "Переключатель темы"
       src/components/ThemeSwitch.vue */
    --color-themeSwitch-bg: var(--color-bg-primary);
    --color-themeSwitch-toggle: var(--color-section);
}