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

:root {
    /* --- BASE COLORS --- */
    --color_1: #fed700;
    --color_2: #ffffff;
    --color_3: #3c1f18;
    --color_4: #41fd13;
    --color_5: #f2f2f2;
    --color_6: #eaeaea;
    --color_7: #f3f3f3;
    --color_8: #fbf5eb;
    --color_9: #fff8e5;
    --color_10: #25130fbf;
    --color_11: #25130f;
    --color_12: #4c4c4c;
    --color_13: #ce3232;
    --color_14: #dabaa1;
    --color_img: url('/themes/pirog/buttonBg/button-fill.png');

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

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

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

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

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

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

    /* Category navigation */
    --category-navigator__section_background: var(--color_2);
    --category-navigator__content_padding: 22px 0 18px 0;
    --category-navigator__padding: 0 16px;
    --category-navigator__padding_xs: 0 22px;
    --category-navigator__sticky_padding: 0 20px;

    /*
    ┌─────────────────────────────┐
    │        CART MODAL           │
    └─────────────────────────────┘
    */
    --cart-modal__pay_button_text: var(--color_3);
    --cart-modal__pay_button_background: #fed700; /* Жёлтая кнопка */
    --cart-modal__pay_button_hover_background: var(--color_img);
    --cart-modal__pay_button_hover_text: var(--color_3);
    --cart-modal__pay_button_disabled_background: var(--color_6);
    --category-button_text: var(--color_txt_1, var(--color_3));
    --category-button_background: #fed700;

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

    /*
    ┌─────────────────────────────┐
    │     SHOWCASE SECTION        │
    └─────────────────────────────┘
    */
    --showcase__section_title: var(--color_3);
    --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_3);
    --product-card_description: var(--color_3);
    --product-card_weight: var(--color_12);
    --product-card_price: var(--color_3);
    --product-card_count: var(--color_3);
    --product-card_counter_button_background: var(--color_1);
    --product-card_counter_button_text: var(--color_3);
    --product-card_counter_button_text_hover: var(--color_1);
    --product-card_add_cart_button_background: var(--color_5);
    --product-card_add_cart_button_text: var(--color_3);
    --product-card_counter_button_text_showcase: var(--color_3);
    --product-card_plus_and_minus_background: var(--color_5);

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

    /*
    ┌─────────────────────────────┐
    │        MODAL                │
    └─────────────────────────────┘
    */
    --modal_background: var(--color_2);
    --modal_text: var(--color_3);
    --modal_text_phone: var(--color_12);
    --modal_text_2: var(--color_3);
    --modal_element_background_img: var(--color_img);
    --modal_element_background_option: var(--color_7);
    --modal_element_background_option_border_bottom: var(--color_5);
    --modal_element: var(--color_3);
    --modal_element_coin_background: var(--color_1);
    --modal_element_coin_text: var(--color_3);
    --modal_element_coin_balance_wrapper: var(--color_1);
    --modal_element_list_separator: var(--color_1);
    --modal_input: var(--color_5);
    --modal_link_friends_text: var(--color_3);

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

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

    /*
    ┌─────────────────────────────┐
    │        ITEM MENU            │
    └─────────────────────────────┘
    */
    --item-menu_text: var(--color_3);
    --item-menu_text_promo: var(--color_3);
    --item-menu_promo: var(--color_8);
    --item-menu_element: var(--color_11);

    /*
    ┌─────────────────────────────┐
    │        CARTCOUNTER          │
    └─────────────────────────────┘
    */
    --cart-counter_element: var(--color_3);
    --cart-counter_txt: var(--color_3);
    --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_3);
    --cart-info_element: var(--color_3);
    --cart-info_circle_radius_fulled: var(--color_3);
    --cart-info_circle_radius: var(--color_2);

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

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

    /*
    ┌─────────────────────────────┐
    │     SUCCESS PAGE            │
    └─────────────────────────────┘
    */
    --success-page-bg: var(--color_9);              /* #fff8e5 — тёплый кремовый фон */
    --success-title-color: var(--color_3);          /* #3c1f18 — коричневый заголовок */
    --success-text-color: var(--color_3);           /* #3c1f18 — коричневый текст */
    --success-button-bg: var(--color_1);            /* #fed700 — жёлтая кнопка */
    --success-button-text: var(--color_3);          /* #3c1f18 — коричневый текст кнопки */
    --success-button-hover-bg: var(--color_2);      /* #ffffff — белый при hover */
}