/* ============================================
   Loulia Portfolio - Dark Mode Overrides
   Applied via [data-theme="dark"]
   ============================================ */

[data-theme="dark"] {
    --color-bg: #0f172a;
    --color-bg-alt: #1e293b;
    --color-bg-section: #162032;
    --color-text: #cbd5e1;
    --color-text-light: #94a3b8;
    --color-heading: #e2e8f0;
    --color-border: #334155;
    --color-gray: #64748b;
    --color-gray-dark: #94a3b8;
    --color-dark: #0f172a;
    --color-white: #f8fafc;
    --color-primary: #22d3ee;
    --color-primary-dark: #06b6d4;
    --color-primary-light: #67e8f9;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* Header */
[data-theme="dark"] .site-header {
    background: rgba(15, 23, 42, 0.95);
    border-bottom-color: var(--color-border);
}

/* Hero adjusts slightly */
[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #0c4a5c 0%, #0a1f2e 100%);
}

/* Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .package-card {
    background: var(--color-bg-alt);
    border-color: var(--color-border);
}

/* Forms */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select {
    background: var(--color-bg-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

/* Filter buttons */
[data-theme="dark"] .filter-btn,
[data-theme="dark"] .harmony-tab {
    background: var(--color-bg-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .filter-btn:hover,
[data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .harmony-tab:hover,
[data-theme="dark"] .harmony-tab.active {
    background: var(--color-primary);
    color: #0f172a;
    border-color: var(--color-primary);
}

/* Portfolio */
[data-theme="dark"] .portfolio-card {
    background: var(--color-bg-alt);
}

/* Testimonials */
[data-theme="dark"] .testimonials-section {
    background: var(--color-bg-alt);
}

/* Lightbox */
[data-theme="dark"] .lightbox-content {
    background: var(--color-bg-alt);
}

[data-theme="dark"] .lightbox-close {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

/* Footer */
[data-theme="dark"] .site-footer {
    background: #020617;
}

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

[data-theme="dark"] .dropzone:hover,
[data-theme="dark"] .dropzone.dragover {
    border-color: var(--color-primary);
    background: rgba(34, 211, 238, 0.05);
}

/* Review sections */
[data-theme="dark"] .review-section {
    background: var(--color-bg);
}

/* Contact info cards */
[data-theme="dark"] .contact-info-card {
    background: var(--color-bg-alt);
}

[data-theme="dark"] .contact-info-card:hover {
    background: rgba(34, 211, 238, 0.08);
}

/* Color swatches */
[data-theme="dark"] .swatch-color {
    border-color: var(--color-border);
}

/* Checkbox labels */
[data-theme="dark"] .checkbox-label {
    border-color: var(--color-border);
}

[data-theme="dark"] .checkbox-label:hover,
[data-theme="dark"] .checkbox-label:has(input:checked) {
    border-color: var(--color-primary);
    background: rgba(34, 211, 238, 0.08);
}

/* Special strip */
[data-theme="dark"] .special-strip {
    background: var(--color-bg-alt);
}

/* Mobile drawer */
[data-theme="dark"] .mobile-drawer {
    background: var(--color-bg);
}

/* Budget slider */
[data-theme="dark"] .budget-slider {
    background: var(--color-border);
}

/* Progress dots */
[data-theme="dark"] .progress-dot {
    background: var(--color-bg-alt);
    border-color: var(--color-border);
}

/* File items */
[data-theme="dark"] .file-item {
    background: var(--color-bg);
}

/* Preview boxes */
[data-theme="dark"] .preview-box.on-white {
    background: #1e293b;
    border-color: var(--color-border);
}

[data-theme="dark"] .preview-box.on-dark {
    background: #020617;
}