/* Add custom CSS styles below */ 
/* 
   Custom CSS for Sukoonline.com 
   Designed to fix color contrast and improve readability
*/

:root {
    --color-primary: #65191b; /* Burgundy Primary */
    --color-text-theme: #1a1a1a; /* Darker text for light backgrounds */
    --color-primary-reverse: #ffffff; /* White text for dark backgrounds */
}

/* 1. Global Text Improvements */
body {
    color: var(--color-text-theme);
    -webkit-font-smoothing: antialiased;
}

/* 2. Fix Gray Text Contrast */
.text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500 {
    color: #4b5563 !important; /* Darker gray for better visibility on white */
}

/* 3. Footer & Dark Sections Styling */
.store-footer, 
.art-store-footer, 
.bg-primary, 
[class*="bg-[--color-primary]"] {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

/* Ensure all elements inside dark sections are white */
.store-footer a, 
.store-footer p, 
.store-footer span, 
.store-footer h1, 
.store-footer h2, 
.store-footer h3, 
.store-footer h4, 
.store-footer h5, 
.store-footer h6,
.bg-primary p,
.bg-primary span,
.bg-primary a:not(.s-button) {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Footer Link Hover State */
.store-footer a:hover {
    color: #ffe5e7 !important;
    text-decoration: underline;
}

/* 4. Salla Components Enhancements */
salla-product-card {
    --salla-product-card-title-color: #1a1a1a;
    --salla-product-card-price-color: var(--color-primary);
}

salla-button {
    --salla-primary-color: var(--color-primary);
}

/* Fix for buttons on dark backgrounds */
.bg-primary salla-button, 
.store-footer salla-button {
    --salla-primary-color: #ffffff;
    --salla-primary-color-reverse: var(--color-primary);
}

/* 5. Navigation Menu Fixes */
.main-menu a {
    color: #1a1a1a !important;
    font-weight: 500;
}

.main-menu a:hover {
    color: var(--color-primary) !important;
}