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

:root {
    /* --- BASE COLORS --- */
    --color_1: #0b1b3a;   /* primary navy */
    --color_2: #ffffff;
    --color_3: #cfdffd;   /* bright blue hover */
    --color_4: #e9f0ff;   /* light blue-gray */
    --color_5: #d7e5ff;
    --color_6: #eef4ff;
    --color_7: #e7f2ff;
    --color_8: #f3f7ff;   /* page background */
    --color_9: #0b1b3abf; /* overlay */
    --color_10: #081634;  /* footer/header dark */
    --color_11: #4a5a75;  /* secondary text */
    --color_12: #d63b3b;  /* danger */
    --color_13: #b8c7e6;  /* footer text */
    --color_14: #d2dcf5;  /* footer text hover */

    --color-accent: var(--color_1);

    /*
    ┌─────────────────────────────┐
    │        HEADER               │
    └─────────────────────────────┘
    */
    --header_background: var(--color_2);
    --header_element_background: var(--color_1);
    --header_element: var(--color_1);
    --header_element_text: var(--color_1);

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

    /*
    ┌────────────────────────────────────────────┐
    │        DELIVERY SECTION                    │
    └────────────────────────────────────────────┘
    */
    --options-picker_backgroung-img: var(--color_1);
    --options-picker_backgroung: var(--color_2);
    --delivery__section_element: var(--color_1);
    --options-picker_text-color: var(--color_1);
    --options-picker_text-color-active: var(--color_6);

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

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

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

    /*
    ┌─────────────────────────────┐
    │        BUTTONS              │
    └─────────────────────────────┘
    */
    --button_primary: var(--color_1);
    --button_primary_img: var(--color_1);
    --button_primary_disabled: var(--color_5);
    --button_secondary: var(--color_4);
    --button_secondary__hover: var(--color_1);
    --button_text: var(--color_1);
    --button_text_primary: var(--color_2);
    --button_text_secondary_hover: var(--color_1);

    /*
    ┌─────────────────────────────┐
    │     SHOWCASE SECTION        │
    └─────────────────────────────┘
    */
    --showcase__section_title: var(--color_1);
    --showcase__section_title_font-family: "NauryzRedKeds";
    --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_2);
    --product-card_title: var(--color_1);
    --product-card_description: var(--color_1);
    --product-card_weight: var(--color_11);
    --product-card_price: var(--color_1);
    --product-card_count: var(--color_1);
    --product-card_counter_button_background: var(--color_6);
    --product-card_counter_button_text: var(--color_1);
    --product-card_counter_button_text_hover: var(--color_2);
    --product-card_add_cart_button_background: var(--color_4);
    --product-card_add_cart_button_background_hover: var(--color_3);
    --product-card_add_cart_button_text: var(--color_1);
    --product-card_counter_button_text_showcase: var(--color_1);
    --product-card_plus_and_minus_background: var(--color_4);

    /*
    ┌─────────────────────────────┐
    │   CART BUTTON (MOBILE)      │
    └─────────────────────────────┘
    */
    --cart-button_mobile_background: var(--color_1);
    --cart-button_mobile_text: var(--color_2);
    --cart-button_mobile_element: var(--color_2);
    --cart-button_mobile_font-family: 'Gotham Pro';
    --cart-button_mobile_letter-spacing: 2px;

    /*
    ┌─────────────────────────────┐
    │        MODAL                │
    └─────────────────────────────┘
    */
    --modal_background: var(--color_2);
    --modal_text: var(--color_1);
    --modal_text_phone: var(--color_11);
    --modal_text_2: var(--color_1);
    --modal_element_background_img: var(--color_1);
    --modal_element_background_option: var(--color_6);
    --modal_element_background_option_border_bottom: var(--color_4);
    --modal_element: var(--color_1);
    --modal_element_coin_background: var(--color_1);
    --modal_element_coin_text: var(--color_2);
    --modal_element_coin_balance_wrapper: var(--color_1);
    --modal_element_list_separator: var(--color_1);
    --modal_input: var(--color_4);
    --modal_link_friends_text: var(--color_1);

    /*
    ┌─────────────────────────────┐
    │        RADIOBUTTON          │
    └─────────────────────────────┘
    */
    --radioButton_circle_wrapper: var(--color_1);
    --radioButton_circle_checked: var(--color_1);
    --radioButton_circle_unchecked: var(--color_2);
    --radioButton_label_text: var(--color_1);

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

    /*
    ┌─────────────────────────────┐
    │        ITEM MENU            │
    └─────────────────────────────┘
    */
    --item-menu_text: var(--color_1);
    --item-menu_text_promo: var(--color_1);
    --item-menu_promo: var(--color_7);
    --item-menu_element: var(--color_10);

    /*
    ┌─────────────────────────────┐
    │        CARTCOUNTER          │
    └─────────────────────────────┘
    */
    --cart-counter_element: var(--color_6);
    --cart-counter_txt: var(--color_1);
    --cart-counter_element_background: var(--color_2);
    --cart-counter_background: var(--color_1);

    /*
    ┌─────────────────────────────┐
    │        CARTINFO             │
    └─────────────────────────────┘
    */
    --cart-info_background: var(--color_1);
    --cart-info_text: var(--color_2);
    --cart-info_element: var(--color_1);
    --cart-info_circle_radius_fulled: var(--color_1);
    --cart-info_circle_radius: var(--color_2);

    /*
    ┌─────────────────────────────┐
    │        FOOTER               │
    └─────────────────────────────┘
    */
    --footer__section_background: var(--color_10);
    --footer__section_text: var(--color_13);
    --footer__section_text_hover: var(--color_14);

    /*
    ┌─────────────────────────────┐
    │        LOADER               │
    └─────────────────────────────┘
    */
    --loader-color: var(--color_6);
}