/**
 * ┌────────────────────────────────────────────────────────────┐
 * │                    PIE DESIGN SYSTEM                       │
 * └────────────────────────────────────────────────────────────┘
 *
 * Здесь определяются основные переменные CSS для темы pie.
 * Система построена так, чтобы легко поддерживать разные темы оформления через переопределение базовых переменных.
 *
 * Подробнее о дизайн-системе читайте в docs/design-system.
 */

:root {
    /* --- BASE ELEMENT COLORS --- */
    --color_el_1: #fed700;
    --color_el_2: #ffffff;
    --color_el_3: #3c1f18;
    --color_el_3_hover: #41fd13;
    --color_el_4: #f2f2f2;
    --color_el_4_hover: #eaeaea;
    --color_el_5: url('/themes/pirog/buttonBg/button-fill.png');
    --color_el_6: #f3f3f3;
    --color_el_7: #fbf5eb;
    /* --color_el_5: #110D30;
    --color_el_6: #EBCEF433;
    --color_el_6_hover: #EBCEF4; */

    /* --- BASE BACKGROUND COLORS --- */
    --color_bg_1: #fff8e5;
    --color_bg_2: #ffffff;
    --color_bg_3: #25130fbf;
    --color_bg_4: #25130f;
    /* --color_bg_3: #110D30CC;
    --color_bg_4: #110D30;
    --color_bg_5: #0A081F; */

    /* --- BASE TEXT COLORS --- */
    --color_txt_1: #3c1f18;
    --color_txt_1_hover: #3c1f18;
    --color_txt_2: #4c4c4c;
    --color_txt_3: #ce3232;
    --color_txt_4: #dabaa1;
    /* --color_txt_4: #120C30;
    --color_txt_5: #EBCEF4;
    --color_txt_6: #EBCEF433;
    --color_txt_6_hover: #EBCEF4; */

    /*
    ┌─────────────────────────────┐
    │        HEADER               │
    └─────────────────────────────┘
    */
    --header_background: var(--color_bg_2);
    --header_element_background: var(--color_el_3);
    --header_element: var(--color_el_1);
    --header_element_text: var(--color_txt_1);

    /*
    ┌─────────────────────────────┐
    │        LAYOUT               │
    └─────────────────────────────┘
    */
    --layout_background: var(--color_bg_1);

    /*
    ┌────────────────────────────────────────────┐
    │        DELIVERY SECTION                    │
    └────────────────────────────────────────────┘
    */
    --options-picker_backgroung-img: var(--color_el_5);
    --options-picker_backgroung: var(--color_bg_2);
    --delivery__section_element: var(--color_el_3);
    --options-picker_text-color: var(--color_txt_1);
    --options-picker_text-color-active: var(--color_txt_1_hover);

    /*
    ┌────────────────────────────────────────────┐
    │        BONUS SYSTEM SECTION                │
    └────────────────────────────────────────────┘
    */
    --bonus-system__section_background-img: var(--color_el_5);
    --bonus-system__section_text: var(--color_txt_1);

    /*
    ┌────────────────────────────────────────────┐
    │        CODE INPUT SECTION                  │
    └────────────────────────────────────────────┘
    */
    --code-input_text: var(--color_txt_1);
    --code-input_input-dot: var(--color_el_1);

    /*
    ┌────────────────────────────────────────────┐
    │     CATEGORY NAVIGATOR SECTION             │
    └────────────────────────────────────────────┘
    */
    --category-navigator__section_background: var(--color_el_2);

    /*
    ┌─────────────────────────────┐
    │        BUTTONS              │
    └─────────────────────────────┘
    */

    --button_primary: var(--color_el_1);
    --button_primary_img: var(--color_el_5);
    --button_primary_disabled: var(--color_el_4_hover);
    --button_secondary: var(--color_el_4);
    --button_secondary__hover: var(--color_el_1);
    --button_text: var(--color_txt_1);
    --button_text_primary: var(--color_txt_1);
    --button_text_secondary_hover: var(--color_txt_1);

    /*
    ┌─────────────────────────────┐
    │     SHOWCASE SECTION        │
    └─────────────────────────────┘
    */
    --showcase__section_title: var(--color_txt_1);
    --showcase__section_title_font-family: "Gotham Pro";
    --showcase__section_title_letter-spacing: 2px;
    --showcase__section_title_font-size: 36px;
    --showcase__section_title_font-weight: 200;
    /*
    ┌─────────────────────────────┐
    │     PRODUCT CARD            │
    └─────────────────────────────┘
    */
    --product-card_background: var(--color_bg_2);
    --product-card_title: var(--color_txt_1);
    --product-card_description: var(--color_txt_1);
    --product-card_weight: var(--color_txt_2);
    --product-card_price: var(--color_txt_1);
    --product-card_count: var(--color_txt_1);
    --product-card_counter_button_background: var(--color_el_1);
    --product-card_counter_button_text: var(--color_txt_1);
    --product-card_add_cart_button_background: var(--color_el_4);
    --product-card_add_cart_button_background_hover: var(--color_el_1);
    --product-card_add_cart_button_text: var(--color_txt_1);
    --product-card_counter_button_text_showcase: var(--color_el_3);
    --product-card_plus_and_minus_background: var(--color_el_4);

    /*
    ┌─────────────────────────────┐
    │   CART BUTTON (MOBILE)      │
    └─────────────────────────────┘
    */
    --cart-button_mobile_background: var(--color_el_1);
    --cart-button_mobile_text: var(--color_txt_1);
    --cart-button_mobile_element: var(--color_el_3);
    --cart-button_mobile_font-family: 'Gotham Pro';
    --cart-button_mobile_letter-spacing: 2px;
    /*
    ┌─────────────────────────────┐
    │        MODAL                │
    └─────────────────────────────┘
    */
    --modal_background: var(--color_bg_2);
    --modal_text: var(--color_txt_1);
    --modal_text_phone: var(--color_txt_2);
    --modal_text_2: var(--color_txt_1);
    --modal_element_background_img: var(--color_el_5);
    --modal_element_background_option: var(--color_el_6);
    --modal_element_background_option_border_bottom: var(--color_el_4);
    --modal_element: var(--color_el_3);
    --modal_element_coin_background: var(--color_el_1);
    --modal_element_coin_text: var(--color_txt_1);
    --modal_element_coin_balance_wrapper: var(--color_el_1);
    --modal_element_list_separator: var(--color_el_1);
    --modal_input: var(--color_el_4);
    --modal_link_friends_text: var(--color_txt_1);

    /*
    ┌─────────────────────────────┐
    │        RADIOBUTTON          │
    └─────────────────────────────┘
    */
    --radioButton_circle_wrapper: var(--color_el_3);
    --radioButton_circle_checked: var(--color_el_1);
    --radioButton_circle_unchecked: var(--color_el_2);
    --radioButton_label_text: var(--color_txt_1);

    /*
    ┌─────────────────────────────┐
    │          CART               │
    └─────────────────────────────┘
    */
    --color-options_text: var(--color_txt_1);
    --color-list_item_text: var(--color_txt_1);
    --color-total_sum_payed_text: var(--color_txt_1);
    --cart_plus_and_minus_background: var(--color_el_4);
    --cart_plus_and_minus_background_active: var(--color_el_1);

    /*
    ┌─────────────────────────────┐
    │        ITEM MENU            │
    └─────────────────────────────┘
    */
    --item-menu_text: var(--color_txt_1);
    --item-menu_text_promo: var(--color_txt_1);
    --item-menu_promo: var(--color_el_7);
    --item-menu_element: var(--color_bg_4);

    /*
    ┌─────────────────────────────┐
    │        CARTCOUNTER          │
    └─────────────────────────────┘
    */
    --cart-counter_element: var(--color_el_3);
    --cart-counter_txt: var(--color_txt_1);
    --cart-counter_element_background: var(--color_el_2);
    --cart-counter_background: var(--color_el_1);

    /*
    ┌─────────────────────────────┐
    │        CARTINFO             │
    └─────────────────────────────┘
    */
    --cart-info_background: var(--color_el_1);
    --cart-info_text: var(--color_txt_1);
    --cart-info_element: var(--color_el_3);
    --cart-info_circle_radius_fulled: var(--color_el_3);
    --cart-info_circle_radius: var(--color_el_2);

    /*
    ┌─────────────────────────────┐
    │        FOOTER               │
    └─────────────────────────────┘
    */
    --footer__section_background: var(--color_bg_4);
    --footer__section_text: var(--color_txt_4);
    --footer__section_text_hover: var(--color_txt_4);
}