:root {
    /* Primary colors */
    --primary: #4361ee;
    --primary-hover: #3a56d4;
    --secondary: #3f37c9;
    --accent: #4cc9f0;
    
    /* Status colors */
    --danger: #ef476f;
    --danger-hover: #d64665;
    --success: #06d6a0;
    --success-hover: #059669;
    --warning: #ffd166;
    --warning-hover: #f59e0b;
    
    /* Background colors */
    --bg: #f8f9fa;
    --card: white;
    --input: white;
    --modal: rgba(0, 0, 0, 0.9);
    --placeholder: #f0f0f0;
    --drop-zone-bg: white;
    --drop-zone-hover-bg: #f0f4f8;
    --drop-zone-active-bg: #e6f0ff;
    
    /* Text colors */
    --text: #212529;
    --text-secondary: #495057;
    --text-light: #6c757d;
    
    /* UI elements */
    --border: #dee2e6;
    --tag: #e9ecef;
    --tag-hover: #dee2e6;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s;
    
    /* Error states */
    --error-bg: #fff5f5;
    --error-border: #fed7d7;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
    :root {
        /* Primary colors */
        --primary: #5773ff;
        --primary-hover: #6a83ff;
        --secondary: #485dfb;
        --accent: #5cd8ff;
        
        /* Status colors */
        --danger: #ff5a7e;
        --danger-hover: #ff768f;
        --success: #0ce6ac;
        --success-hover: #10b981;
        --warning: #fbbf24;
        --warning-hover: #f59e0b;
        
        /* Background colors */
        --bg: #121212;
        --card: #1e1e1e;
        --input: #2a2a2a;
        --modal: rgba(0, 0, 0, 0.95);
        --placeholder: #2a2a2a;
        --drop-zone-bg: #1e1e1e;
        --drop-zone-hover-bg: #2a2a2a;
        --drop-zone-active-bg: #323840;
        
        /* Text colors */
        --text: #e9ecef;
        --text-secondary: #ced4da;
        --text-light: #adb5bd;
        
        /* UI elements */
        --border: #343a40;
        --tag: #2a2a2a;
        --tag-hover: #343a40;
        --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        
        /* Error states */
        --error-bg: #3a2a2a;
        --error-border: #8f3a3a;
    }
}