:root {
    --primary-color: #e94837;
    --primary-color-darker: hsl(from var(--primary-color) h s calc(l - 5));
    --primary-color-darkest: hsl(from var(--primary-color) h s calc(l - 10));
    --primary-color-light: hsl(from var(--primary-color) h s calc(l + 10));
    --primary-color-lightest: hsl(from var(--primary-color) h s calc(l + 20));
    --secondary-color: #e97d35;
    --secondary-color-darker: hsl(from var(--secondary-color) h s calc(l - 5));
    --secondary-color-darkest: hsl(from var(--secondary-color) h s calc(l - 10));
    --secondary-color-light: hsl(from var(--secondary-color) h s calc(l + 10));
    --secondary-color-lightest: hsl(from var(--secondary-color) h s calc(l + 20));
    --top-background: #F58084;
    --top-background-darker: hsl(from var(--top-background) h s calc(l - 5));
    --top-background-darkest: hsl(from var(--top-background) h s calc(l - 10));
    --top-background-light: hsl(from var(--top-background) h s calc(l + 10));
    --top-background-lightest: hsl(from var(--top-background) h s calc(l + 20));
    --background-color: #ffffff;
    --text-color: #110f0f;
    --header-text-color: #fff;
    --button-hover-color: var(--secondary-color-darkest);
    --utilnav-btns: #FFFFFF;
    --utilnav-background: #34256a;
    --border-color: #e0e0e0;
    --dropdown-text-color: #ffffff;
    --dropdown-hover-background: #f1f1f1;
    --product-gradient: linear-gradient(0deg, rgba(20,6,41,1) 0%, rgba(20,6,41,0) 100%);
    --promotion-gradient: linear-gradient(0deg, rgba(20,6,41,1) 0%, rgba(20,6,41,0) 100%);
    --swiper-button-background: #0000006e;

    --headings: #32265f;
    --headings-darker: hsl(from var(--headings) h s calc(l - 5));
    --headings-darkest: hsl(from var(--headings) h s calc(l - 10));
    --headings-light: hsl(from var(--headings) h s calc(l + 10));
    --headings-lightest: hsl(from var(--headings) h s calc(l + 20));

    --price-background: #e94837;
    --price-text: #FFFFFF; 

    --category-background: #e94837;
    --category-text: #fff;

}

body {
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
}


.dropdown-content {
    color: var(--utilnav-btns);
    background-color: var(--utilnav-background);
}

.dropdown-content a {
    color: var(--utilnav-btns);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--headings);
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--headings-darker);
}



.categories a.active, .category-link {
    background-color: var(--category-background);
    color: var(--category-text);
}
.categories:after {
    background: linear-gradient(to right, transparent, var(--background-color));
}

.product-card .price {
    color: var(--price-text);
    background-color: var(--price-background);
}
.product-detail .price {
    color: var(--price-text);
    background-color: var(--price-background);
}

#utilnav {
    color: var(--utilnav-btns);
    background: var(--utilnav-background);
}
#utilnav a {
    color: var(--utilnav-btns);
}
#utilnav .menu-dropdown-content {
    background: var(--utilnav-background);
}


main h1 {
    color: var(--headings);
}



.price-option {
    color: var(--price-text);
    background: var(--price-background);
}

.allergens h2 {
    color: var(--headings);
}

.related-products h2 {
    color: var(--headings);
}

.swiper-button-next, .swiper-button-prev {
    color: var(--header-text-color) !important;
    background: var(--swiper-button-background);
}

.swiper-pagination-bullet-active {
    background-color: var(--primary-color) !important;
}

.category-preview h2 a {
    color: var(--headings);
}
.category-preview h2 a:hover {
    color: var(--headings-darker);
}

.see-more-icon {
    background-color: var(--primary-color);
}

.see-more-icon i {
    color: var(--header-text-color);
}

.see-more-card a {
    color: var(--primary-color);
}

#shareBtn:hover {
    background-color: var(--top-background-darkest);
}

.promotion-content {
    background: var(--promotion-gradient);
    color: var(--header-text-color);
}

.special-button {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.special-button:hover {
    color: var(--button-hover-color);
    border-color: var(--button-hover-color);

}

.social-icons a {
    color: var(--primary-color);
}

#toggleViewBtn, #shareBtn, #toggleViewBtn span, #shareBtn span, .dropbtn, #toggleViewBtn:hover, #shareBtn:hover {
    color: var(--text-color);
}

footer {
    color: var(--text-color);
}

footer a {
    color: var(--text-color);
}