/* ==========================================
   COMPREHENSIVE DARK THEME
   Desaturated, Glowing, High Contrast
   December 5, 2025
   ========================================== */

/* ==========================================
   GLOBAL DARK THEME VARIABLES
   ========================================== */
[data-theme="dark"] {
    --bg-primary: #0f1117;
    --bg-secondary: #1a1d29;
    --bg-tertiary: #1f2332;
    
    --text-primary: #ffffff;
    --text-secondary: #e5e7eb;
    --text-tertiary: #cbd5e1;
    --text-muted: #9ca3af;
    
    --accent-primary: rgba(139, 149, 196, 0.8);
    --accent-secondary: rgba(156, 163, 184, 0.6);
    --accent-glow: rgba(139, 149, 196, 0.15);
    
    --border-color: rgba(139, 149, 196, 0.2);
    --border-glow: rgba(139, 149, 196, 0.3);
}

/* ==========================================
   BODY & BASE ELEMENTS
   ========================================== */
[data-theme="dark"] body {
    background: linear-gradient(135deg, #0f1117 0%, #1a1d29 100%);
    color: var(--text-secondary);
}

[data-theme="dark"] * {
    border-color: var(--border-color);
}

/* ==========================================
   TYPOGRAPHY - ALL TEXT VISIBLE
   ========================================== */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
    text-shadow: 0 2px 12px var(--accent-glow);
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] li,
[data-theme="dark"] label {
    color: var(--text-secondary) !important;
}

/* Remove gradient text effects in dark mode */
[data-theme="dark"] .bg-gradient-to-r,
[data-theme="dark"] .bg-gradient-to-br,
[data-theme="dark"] .bg-gradient-to-tr {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
}

[data-theme="dark"] .text-transparent {
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* ==========================================
   PRICE DISPLAYS & HIGHLIGHTS
   ========================================== */
[data-theme="dark"] #current-price,
[data-theme="dark"] [id*="price"],
[data-theme="dark"] .text-2xl,
[data-theme="dark"] .text-3xl,
[data-theme="dark"] .text-4xl,
[data-theme="dark"] .text-5xl {
    color: var(--text-primary) !important;
    text-shadow: 0 4px 16px var(--accent-glow);
}

[data-theme="dark"] .text-primary-600,
[data-theme="dark"] .text-primary-700 {
    color: var(--accent-primary) !important;
}

/* ==========================================
   CARDS & SECTIONS
   ========================================== */
[data-theme="dark"] .bg-white {
    background: linear-gradient(135deg, 
        var(--bg-secondary) 0%, 
        var(--bg-tertiary) 100%) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 60px var(--accent-glow);
}

[data-theme="dark"] .bg-neutral-50,
[data-theme="dark"] .bg-neutral-100 {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .bg-gradient-to-br {
    background: linear-gradient(135deg,
        rgba(139, 149, 196, 0.12) 0%,
        rgba(156, 163, 184, 0.08) 100%) !important;
    border: 1px solid var(--border-color);
}

/* ==========================================
   BUTTONS & INTERACTIVE ELEMENTS
   ========================================== */
[data-theme="dark"] button {
    border-color: var(--border-glow);
}

[data-theme="dark"] button:hover {
    box-shadow: 0 4px 20px var(--accent-glow);
    border-color: var(--border-glow);
}

[data-theme="dark"] .bg-primary-600,
[data-theme="dark"] .bg-primary-700 {
    background: linear-gradient(135deg,
        rgba(139, 149, 196, 0.8) 0%,
        rgba(139, 149, 196, 0.6) 100%) !important;
}

/* ==========================================
   FORM INPUTS
   ========================================== */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--border-glow) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* ==========================================
   ICONS & SMALL ELEMENTS
   ========================================== */
[data-theme="dark"] i,
[data-theme="dark"] .fas,
[data-theme="dark"] .far,
[data-theme="dark"] .fab {
    color: var(--accent-primary) !important;
}

[data-theme="dark"] .text-neutral-500,
[data-theme="dark"] .text-neutral-600 {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .text-sm,
[data-theme="dark"] .text-xs {
    color: var(--text-tertiary) !important;
}

/* ==========================================
   HERO SECTION SPECIFIC
   ========================================== */
[data-theme="dark"] .hero-section,
[data-theme="dark"] #hero {
    background: linear-gradient(135deg, 
        var(--bg-primary) 0%, 
        var(--bg-secondary) 100%);
}

/* ==========================================
   FOOTER
   ========================================== */
[data-theme="dark"] footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}

/* ==========================================
   SCROLLBAR (OPTIONAL ENHANCEMENT)
   ========================================== */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    background: var(--bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}

/* ==========================================
   GLOW EFFECTS ON HOVER
   ========================================== */
[data-theme="dark"] .card:hover,
[data-theme="dark"] .product-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 80px var(--accent-glow);
    transform: translateY(-4px);
    transition: all 0.3s ease;
}

/* ==========================================
   TEXT COLOR OVERRIDES (CRITICAL)
   ========================================== */
[data-theme="dark"] .text-black {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 {
    color: var(--text-tertiary) !important;
}

/* ==========================================
   PRICE CALCULATOR SECTION
   ========================================== */
[data-theme="dark"] #calc-current-price,
[data-theme="dark"] [id*="milestone"] {
    color: var(--text-primary) !important;
    text-shadow: 0 4px 16px var(--accent-glow);
}

[data-theme="dark"] .price-milestone {
    border-color: var(--border-glow);
}

/* ==========================================
   MOBILE OPTIMIZATIONS
   ========================================== */
@media (max-width: 768px) {
    [data-theme="dark"] .bg-white {
        padding: 1rem;
    }
    
    [data-theme="dark"] h1 {
        font-size: 2rem;
    }
    
    [data-theme="dark"] .text-5xl {
        font-size: 2.5rem;
    }
}

/* ==========================================
   ACCESSIBILITY - HIGH CONTRAST MODE
   ========================================== */
@media (prefers-contrast: high) {
    [data-theme="dark"] {
        --text-primary: #ffffff;
        --text-secondary: #f5f5f5;
        --accent-primary: rgba(180, 190, 230, 1);
    }
}