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

:root {
  /* --- BASE ELEMENT COLORS --- */
  --color_el_1: #ebcef4;
  --color_el_1_hover: url('/themes/starbro/buttonBg/buttonImgBg.png');
  --color_el_2: #1f1a48;
  --color_el_3: #ebcef4;
  --color_el_3_hover: #ffffff;
  --color_el_4: #ebcef4;
  --color_el_4_hover: #eaeaea;
  --color_el_5: #110d30;
  --color_el_6: #ebcef433;
  --color_el_6_hover: #ebcef4;

  /* --- BASE BACKGROUND COLORS --- */
  --color_bg_1: url('/themes/starbro/background/bgStarBro.png');
  --color_bg_2: #ffffff;
  --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: #ffffff;
  --color_txt_2_hover: #120c30;
  --color_txt_3: #ffffff80;
  --color_txt_4: #120c30;
  --color_txt_5: #ebcef4;
  --color_txt_6: #ebcef433;
  --color_txt_6_hover: #ebcef4;

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

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

  /* 
    ┌────────────────────────────────────────────┐
    │        DELIVERY SECTION                    │
    └────────────────────────────────────────────┘
    */
  --options-picker_backgroung-img: var(--color_el_1_hover);
  --options-picker_backgroung: var(--color_el_2);
  --delivery__section_element: var(--color_el_3);
  --options-picker_text-color: var(--color_txt_2);
  --options-picker_text-color-active: var(--color_txt_4);

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

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

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

  /* 
    ┌─────────────────────────────┐
    │        BUTTONS              │
    └─────────────────────────────┘
    */
  --button_primary: var(--color_el_1);
  --button_primary_img: var(--color_el_1_hover);
  --button_primary_disabled: var(--color_el_4_hover);
  --button_secondary: var(--color_el_2);
  --button_secondary__hover: var(--color_el_1);
  --button_text: var(--color_txt_5);
  --button_text_primary: var(--color_bg_5);
  --button_text_secondary_hover: var(--color_bg_5);

  /* 
    ┌─────────────────────────────┐
    │     SHOWCASE SECTION        │
    └─────────────────────────────┘
    */
  --showcase__section_title: var(--color_txt_5);

  /* 
    ┌─────────────────────────────┐
    │     PRODUCT CARD            │
    └─────────────────────────────┘
    */
  --product-card_background: var(--color_bg_4);
  --product-card_title: var(--color_txt_2);
  --product-card_description: var(--color_txt_2);
  --product-card_weight: var(--color_txt_3);
  --product-card_price: var(--color_txt_2);
  --product-card_count: var(--color_txt_2);
  --product-card_counter_button_background: var(--color_el_3);
  --product-card_counter_button_text: var(--color_txt_4);
  --product-card_add_cart_button_background: var(--color_el_3);
  --product-card_add_cart_button_background_hover: var(--color_el_3_hover);
  --product-card_add_cart_button_text: var(--color_txt_4);
  --product-card_counter_button_text_showcase: var(--color_el_2);
  --product-card_plus_and_minus_background: var(--color_el_3_hover);

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

  --radioButton_circle_wrapper: var(--color_el_1);
  --radioButton_circle_checked: var(--color_el_4);
  --radioButton_circle_unchecked: var(--color_el_2);
  --radioButton_label_text: var(--color_txt_2);

  /* 
    ┌─────────────────────────────┐
    │   CART BUTTON (MOBILE)      │
    └─────────────────────────────┘
    */
  --cart-button_mobile_background: var(--color_el_1);
  --cart-button_mobile_text: var(--color_txt_4);
  --cart-button_mobile_element: var(--color_el_2);

  /* 
    ┌─────────────────────────────┐
    │        MODAL                │
    └─────────────────────────────┘
    */
  --modal_background: var(--color_bg_4);
  --modal_text: var(--color_txt_2);
  --modal_text_phone: var(--color_txt_2);
  --modal_text_2: var(--color_txt_4);
  --modal_element_background_img: var(--color_el_1_hover);
  --modal_element_background_option: var(--color_el_2);
  --modal_element_background_option_border_bottom: var(--color_el_4);
  --modal_element: var(--color_el_1);
  --modal_element_coin_background: var(--color_el_1);
  --modal_element_coin_text: var(--color_txt_2_hover);
  --modal_element_coin_balance_wrapper: var(--color_el_1);
  --modal_element_list_separator: var(--color_el_1);
  --modal_input: var(--color_bg_2);
  --modal_link_friends_text: var(--color_txt_2);

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

  --color-options_text: var(--color_bg_2);
  --color-list_item_text: var(--color_bg_2);
  --color-total_sum_payed_text: var(--color_bg_2);
  --cart_plus_and_minus_background: var(--color_el_1);
  --cart_plus_and_minus_background_active: var(--color_el_1);

  /* 
    ┌─────────────────────────────┐
    │        ITEM MENU            │
    └─────────────────────────────┘
    */
  --item-menu_text: var(--color_txt_2);
  --item-menu_text_promo: var(--color_txt_2_hover);
  --item-menu_promo: var(--color_el_1);
  --item-menu_element: var(--color_el_1);

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

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

  --cart-info_background: var(--color_el_3);
  --cart-info_text: var(--color_txt_4);
  --cart-info_element: var(--color_el_2);
  --cart-info_circle_radius_fulled: var(--color_el_5);
  --cart-info_circle_radius: var(--color_el_3);

  /* 
    ┌─────────────────────────────┐
    │        FOOTER               │
    └─────────────────────────────┘
    */
  --footer__section_background: var(--color_el_2);
  --footer__section_text: var(--color_txt_2);
  --footer__section_text_hover: var(--color_txt_6_hover);
}