/* CSS Variables for Theming and Constants */
:root {
    /* Dark mode colors (default) */
    --primary-color: #1a2332;
    --secondary-color: #2c3e50;
    --accent-color: #3498db;
    --accent-hover: #2980b9;
    --text-color: #ecf0f1;
    --text-secondary: #95a5a6;
    --border-color: #34495e;
    --card-bg: #242f3e;
    --hover-bg: #2c3a4d;
    --modal-bg: rgba(26, 35, 50, 0.95);
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --success-color: #27ae60;
    --error-color: #e74c3c;
    --warning-color: #f39c12;
    
    /* Layout constants */
    --max-width: 1600px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --border-radius: 4px;
    --transition-speed: 0.2s;
    --thumbnail-size: 80px;
    --compact-thumbnail: 60px;
}

/* Light mode colors */
[data-theme="light"] {
    --primary-color: #ffffff;
    --secondary-color: #f8f9fa;
    --accent-color: #2980b9;
    --accent-hover: #3498db;
    --text-color: #2c3e50;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --card-bg: #ffffff;
    --hover-bg: #f1f3f5;
    --modal-bg: rgba(255, 255, 255, 0.98);
    --overlay-bg: rgba(0, 0, 0, 0.5);
}

/* Format Label Colors */
[data-theme="dark"] .format-label.cd { background: #2c3e50; }
[data-theme="dark"] .format-label.vinyl { background: #8e44ad; }
[data-theme="dark"] .format-label.cassette { background: #e67e22; }
[data-theme="dark"] .format-label.promo { background: #e74c3c; }

[data-theme="light"] .format-label.cd { background: #e3f2fd; color: #1976d2; }
[data-theme="light"] .format-label.vinyl { background: #f3e5f5; color: #7b1fa2; }
[data-theme="light"] .format-label.cassette { background: #fff3e0; color: #f57c00; }
[data-theme="light"] .format-label.promo { background: #ffebee; color: #c62828; }