/* base/variables.css */

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");

:root {
    --primary-color: #7d5326;
    --secondary-color: #a8d542;
    --secondary-color-box-shadow: 0px 3px 6px -2px rgba(76, 175, 80, 0.6);
    --main-color-text: #000000;
    --main-color-text-muted: #292727;
    --emphasis-color-text: #633300;
    --light-emphasis-color-text: #f5f5f5;

    --menu-item-card-background-color: #ffffff;
    --menu-item-card-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
    --menu-beer-filter-toggle-background-color: transparent;
    --menu-beer-filter-toggle-text-color: #000000;
    --menu-beer-filter-toggle-border-color: #7d5326;
    --menu-beer-sections-button-background-color: #ffffff;
    --menu-beer-sections-button-text-color: #7d5236;
    --menu-beer-sections-active-button-background-color: #7d5236;
    --menu-beer-sections-active-button-text-color: #f5f5f5;

    --main-scroller-thumb-background-color: #7d5326;
    --main-scroller-thumb-border-color: transparent;
    --main-scroller-track-background-color: transparent;

    --secondary-scroller-thumb-background-color: #a8d542;
    --secondary-scroller-thumb-border-color: transparent;
    --secondary-scroller-track-background-color: transparent;

    --light: 300;
    --regular: 400;
    --medium: 500;
    --bold: 600;
    --bolder: 700;
    --boldest: 800;

    --font-primary: "Quicksand", sans-serif;
    --font-secondary: "Open Sans", sans-serif;
    --font-size-regular: 1.6rem;

    --main-background-color: #ebc0ac0c;
    --secondary-background-color: var(--primary-color);
    --body-background-color: var(--main-background-color);
    --container-background-color: var(--main-background-color);
    --header-background-color: var(--main-background-color);
    --menu-mobile-link-color: #f5f5f5;
    --menu-desktop-link-color: #633300;
    --hero-text-color: #f5f5f5;
    --beer-cycle-background-color: linear-gradient(
        90deg,
        #f7e3b0 0%,
        #f9f1e6 50%,
        #f7e3b0 100%
    );
    --beer-cycle-text-color: #222222;
    --beer-item-style-color: #372007;
    --beer-item-abv-color: #7d5236;
    --footer-background-color: var(--secondary-background-color);
    --footer-text-color: #f5f5f5;

    --contact-input-background-color: #ffffff00;
    --contact-input-border-color: #7d5326;
    --contact-input-outline-color: #a8d542;

    --client-messenger-background: #ffebcd;
    --client-messenger-text-color: #000000;
    --client-messenger-placeholder-color: #3f3131;
    --client-messenger-timestamp-color: #2f4f2f;
    --sent-message-background: #a8d65f;
    --sent-message-text-color: #161414;
    --sending-message-background: #f1f0f1;
    --sending-message-text-color: #2c2d2c;
    --received-message-background: #7d5326;
    --received-message-text-color: #f5f5f5;

    --welcome-message-background-color: #de435761;
    --welcome-message-text-color: #000000;
}