/* ===== SUBASHAVENTURES CENTRALIZED COLOR SYSTEM ===== */
:root {
    /* Primary Colors - Slime Green */
    --primary: #96994A;
    --primary-color: #96994A;
    --primary-light: #B8BB6A;
    --primary-dark: #7A7D3A;
    --primary-pale: #E8E9D9;
    --hover-primary: #7A7D3A;

    /* Secondary Colors - Purple */
    --secondary: #9A4A96;
    --secondary-color: #9A4A96;
    --secondary-light: #BB6AB8;
    --secondary-dark: #7D3A7A;
    --hover-secondary: #7D3A7A;

    /* Accent Colors */
    --accent-1: #4A9699;
    --accent-1-light: #6AB8BB;
    --accent-1-dark: #3A7A7D;

    /* Neutrals */
    --white: #FFFFFF;
    --gray-50: #F8F9FA;
    --gray-100: #F1F3F4;
    --gray-200: #E9ECEF;
    --gray-300: #DEE2E6;
    --gray-400: #CED4DA;
    --gray-500: #ADB5BD;
    --gray-600: #6C757D;
    --gray-700: #495057;
    --gray-800: #343A40;
    --gray-900: #212529;
    --black: #000000;

    /* Status Colors */
    --success: #28A745;
    --success-color: #10b981;
    --warning: #FFC107;
    --warning-color: #f59e0b;
    --danger: #DC3545;
    --danger-color: #ef4444;
    --info: #17A2B8;
    --info-color: #3b82f6;
    --purple-color: #8b5cf6;

    /* Category Colors */
    --mens-color: #2C3E50;
    --womens-color: #E91E63;
    --children-color: #FF9800;
    --baby-color: #9C27B0;
    --home-color: #795548;

    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.25);
    --shadow-primary: rgba(150, 153, 74, 0.3);
}

/* Light Theme Variables */
body,
:root {
    /* Background Colors */
    --bg-primary: var(--white);
    --bg-secondary: var(--gray-50);
    --bg-tertiary: var(--gray-100);
    --bg-surface: var(--white);
    --background-light: #f9fafb;
    --card-background: white;
    --image-background: #f8f9fa;
    
    /* Dark Theme Specific (for reference) */
    --dark-card-background: #1f2937;
    --dark-background-light: #374151;
    --dark-border-color: #374151;
    --dark-text-primary: #f9fafb;
    --dark-text-secondary: #d1d5db;
    --dark-text-muted: #9ca3af;

    /* ENHANCED TYPOGRAPHY - Light Theme */
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    --text-muted: #050a13;
    --text-disabled: #d1d5db;
    --text-on-primary: var(--white);
    --text-on-secondary: var(--white);
    
    /* Context-Specific Text Colors - Light Theme */
    --text-heading: #0f172a;
    --text-hero-primary: #1a1a1a;
    --text-body: #4b5563;
    --text-caption: #6b7280;
    --text-link: #2563eb;
    --text-link-hover: #1d4ed8;
    --text-error: #dc2626;
    --text-success: #16a34a;
    --text-warning: #ca8a04;

    /* Context-Based Text Colors */
    --text-on-light: #111827;              /* Dark text on light backgrounds */
    --text-on-dark: #ffffff;               /* White text on dark backgrounds */
    --text-on-image: #ffffff;              /* White text over images */
    --text-on-image-secondary: #e5e7eb;    /* Light gray text over images */
    --text-on-gradient: #ffffff;           /* White text on gradients */
    --text-on-card: #111827;               /* Dark text on card backgrounds */
    --text-on-overlay: #ffffff;            /* White text on overlays */
    --text-on-overlay-muted: rgba(255, 255, 255, 0.85); /* Muted white on overlays */

    /* Gradient Overlays for Text Readability */
    --overlay-gradient-dark: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
    --overlay-gradient-darker: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.95) 100%);
    --overlay-gradient-subtle: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
    --overlay-gradient-top: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);

    /* Border Colors */
    --border-light: var(--gray-200);
    --border-medium: var(--gray-300);
    --border-dark: var(--gray-400);
    --border-color: #e5e7eb;
    --nav-border: rgba(150, 153, 74, 0.2);

    /* Theme Colors */
    --theme-primary: var(--primary);
    --theme-secondary: var(--secondary);
    --theme-accent: var(--accent-1);

    /* Button Colors */
    --btn-primary-bg: var(--primary);
    --btn-primary-text: var(--white);
    --btn-primary-hover: var(--primary-dark);
    --btn-secondary-bg: var(--secondary);
    --btn-secondary-text: var(--white);
    --btn-secondary-hover: var(--secondary-dark);

    /* Navigation Colors */
    --nav-bg: rgba(255, 255, 255, 0.95);
    --nav-text: var(--text-primary);

    /* Footer Colors */
    --footer-bg: linear-gradient(180deg, rgba(150, 153, 74, 0.05) 0%, rgba(150, 153, 74, 0.1) 100%);
    --footer-border: rgba(150, 153, 74, 0.2);
}

/* Dark Theme Variables */
body.dark-mode,
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-surface: rgba(15, 23, 42, 0.98);
    --background-light: #374151;
    --card-background: #1e293b;
    --image-background: #334155;

    /* TYPOGRAPHY - Dark Theme */
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-disabled: #64748b;
    --text-on-primary: #0f172a;
    --text-on-secondary: #0f172a;
    
    /* Context-Specific Text Colors - Dark Theme */
    --text-heading: #f1f5f9;
    --text-hero-primary: #ffffff;
    --text-body: #d1d5db;
    --text-caption: #9ca3af;
    --text-link: #60a5fa;
    --text-link-hover: #93c5fd;
    --text-error: #f87171;
    --text-success: #4ade80;
    --text-warning: #fbbf24;

    /* Context-Based Text Colors - Dark Theme */
    --text-on-light: #0f172a;              /* Dark text on light backgrounds (same) */
    --text-on-dark: #f8fafc;               /* Near white text on dark backgrounds */
    --text-on-image: #ffffff;              /* White text over images */
    --text-on-image-secondary: #cbd5e1;    /* Light gray text over images */
    --text-on-gradient: #ffffff;           /* White text on gradients */
    --text-on-card: #f8fafc;               /* Light text on dark card backgrounds */
    --text-on-overlay: #ffffff;            /* White text on overlays */
    --text-on-overlay-muted: rgba(255, 255, 255, 0.9); /* Bright muted white on overlays */

    /* Gradient Overlays for Text Readability - Dark Theme */
    --overlay-gradient-dark: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%);
    --overlay-gradient-darker: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.98) 100%);
    --overlay-gradient-subtle: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 100%);
    --overlay-gradient-top: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);

    /* Border Colors */
    --border-light: #334155;
    --border-medium: #475569;
    --border-dark: #64748b;
    --border-color: #334155;
    --nav-border: rgba(184, 187, 106, 0.2);

    /* Theme Colors - Adjusted for Dark Mode */
    --theme-primary: var(--primary-light);
    --theme-secondary: var(--secondary-light);
    --theme-accent: var(--accent-1-light);
    --primary-color: #B8BB6A;
    --secondary-color: #BB6AB8;
    --hover-primary: #C8CB7A;
    --hover-secondary: #CB7AC8;

    /* Button Colors */
    --btn-primary-bg: var(--primary-light);
    --btn-primary-text: #0f172a;
    --btn-primary-hover: #C8CB7A;
    --btn-secondary-bg: var(--secondary-light);
    --btn-secondary-text: #0f172a;
    --btn-secondary-hover: #CB7AC8;

    /* Navigation Colors */
    --nav-bg: rgba(15, 23, 42, 0.95);
    --nav-text: var(--text-primary);

    /* Footer Colors */
    --footer-bg: linear-gradient(180deg, rgba(184, 187, 106, 0.05) 0%, rgba(184, 187, 106, 0.1) 100%);
    --footer-border: rgba(184, 187, 106, 0.2);

    /* Shadow Colors for Dark Mode */
    --shadow-light: rgba(0, 0, 0, 0.4);
    --shadow-medium: rgba(0, 0, 0, 0.5);
    --shadow-dark: rgba(0, 0, 0, 0.7);
    --shadow-primary: rgba(184, 187, 106, 0.4);
}

/* Utility Classes */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }
.bg-surface { background-color: var(--bg-surface) !important; }

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-heading { color: var(--text-heading) !important; }
.text-body { color: var(--text-body) !important; }

/* Context-Based Text Utilities */
.text-on-light { color: var(--text-on-light) !important; }
.text-on-dark { color: var(--text-on-dark) !important; }
.text-on-image { color: var(--text-on-image) !important; }
.text-on-card { color: var(--text-on-card) !important; }
.text-on-overlay { color: var(--text-on-overlay) !important; }
.text-on-overlay-muted { color: var(--text-on-overlay-muted) !important; }

/* Overlay Gradient Utilities */
.overlay-dark { background: var(--overlay-gradient-dark); }
.overlay-darker { background: var(--overlay-gradient-darker); }
.overlay-subtle { background: var(--overlay-gradient-subtle); }
.overlay-top { background: var(--overlay-gradient-top); }

.border-light { border-color: var(--border-light) !important; }
.border-medium { border-color: var(--border-medium) !important; }
.border-dark { border-color: var(--border-dark) !important; }

.theme-primary { color: var(--theme-primary) !important; }
.theme-secondary { color: var(--theme-secondary) !important; }
.theme-accent { color: var(--theme-accent) !important; }

.bg-theme-primary { background-color: var(--theme-primary) !important; }
.bg-theme-secondary { background-color: var(--theme-secondary) !important; }
.bg-theme-accent { background-color: var(--theme-accent) !important; }

/* Category Utility Classes */
.mens-theme { color: var(--mens-color) !important; }
.womens-theme { color: var(--womens-color) !important; }
.children-theme { color: var(--children-color) !important; }
.baby-theme { color: var(--baby-color) !important; }
.home-theme { color: var(--home-color) !important; }

.bg-mens { background-color: var(--mens-color) !important; }
.bg-womens { background-color: var(--womens-color) !important; }
.bg-children { background-color: var(--children-color) !important; }
.bg-baby { background-color: var(--baby-color) !important; }
.bg-home { background-color: var(--home-color) !important; }

/* Component-specific Variables */
.card {
    background-color: var(--bg-surface);
    border-color: var(--border-light);
    color: var(--text-on-card);
}

.navbar {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    color: var(--nav-text);
}

.footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
}

/* Typography Base Styles */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

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

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--text-link-hover);
}

small, .caption {
    color: var(--text-caption);
    font-size: 0.875rem;
}

/* Smooth Transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Glassmorphism Effects */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-mode .glass,
[data-theme="dark"] .glass {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Focus and Hover States */
.focus-primary:focus {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--shadow-medium);
}

.hover-glow:hover {
    box-shadow: 0 0 20px var(--shadow-primary);
}

/* Additional utility for theme switching consistency */
.theme-transition {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                filter 0.3s ease;
}

/* Accessibility - Ensure text meets WCAG AA standards */
@media (prefers-contrast: more) {
    :root {
        --text-primary: #000000;
        --text-heading: #000000;
        --text-on-light: #000000;
    }
    
    [data-theme="dark"] {
        --text-primary: #ffffff;
        --text-heading: #ffffff;
        --text-on-dark: #ffffff;
    }  
}