[data-theme="dark"] {
    --bg-primary: #1e293b;
    --bg-secondary: #0f172a;
    --bg-tertiary: #334155;
    --bg-hover: #475569;
    
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    
    --border-color: #334155;
}

[data-theme="dark"] .drop-zone {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .drop-zone:hover,
[data-theme="dark"] .drop-zone.drag-over {
    background: rgba(37, 99, 235, 0.15);
}

[data-theme="dark"] .image-item {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .image-item:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .image-item.active {
    background: rgba(37, 99, 235, 0.2);
}

[data-theme="dark"] .metadata-group {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .btn-control {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal {
    background: rgba(0, 0, 0, 0.7);
}

.theme-transition {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

.theme-blue {
    --primary-color: #2563eb;
    --secondary-color: #7c3aed;
}

.theme-green {
    --primary-color: #10b981;
    --secondary-color: #059669;
}

.theme-purple {
    --primary-color: #7c3aed;
    --secondary-color: #6d28d9;
}

.theme-orange {
    --primary-color: #f59e0b;
    --secondary-color: #d97706;
}

.theme-red {
    --primary-color: #ef4444;
    --secondary-color: #dc2626;
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme]) {
        --bg-primary: #1e293b;
        --bg-secondary: #0f172a;
        --bg-tertiary: #334155;
        --bg-hover: #475569;
        
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-muted: #64748b;
        
        --border-color: #334155;
    }
}