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

    /* Цвет подсказочного текста (старый --placeholder). */
    --color-hint: #b6b9bd;

    /* Основной цвет проекта (старый --main-color). */
    --color-primary: #ffc337;
    --color-primary-light: #ffd66b;
    /* Красно-оранжевый акцент (старый --btn-hover). */
    --color-primary-hover: #fcbf21;

    /* Основной стиль кнопки (старый --main-color / --btn-text). */
    --color-btn-primary-bg: #ffc337;
    --color-btn-primary-text: #ffffff;

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

    /* Цвет ссылки (красно-оранжевый акцент). */
    --color-link: #fcbf21;

    /* Цвет анимации скелетона. */
    --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 {
    /* Основной цвет фона (старый --body-bg). */
    --color-bg-primary: #f6f6f6;

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

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

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

    /* Цвет текст (старый --title / --text-content-strong-color). */
    --color-text: #120105;

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

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

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

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

    /* Цвет элемента "Разделитель", "Разделительная линия"
       (старый --header-border / --footer-border). */
    --color-delimiter: #e4e4e4;

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

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

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

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

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

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

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

    /* Цвета компонента "Переключатель темы"
       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;
    --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);
}