/**
 * ┌────────────────────────────────────────────────────────────┐
 * │                    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);

  /* 
  ┌─────────────────────────────┐
  │     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);

  /* 
  ┌─────────────────────────────┐
  │        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);

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