/* ========================================
   CSS VARIABLES - Light & Dark Mode
   ======================================== */

:root {
    /* Light Mode (Default) */
    --color-bg: #ffffff;
    --color-bg-light: #f5f5f5;
    --color-text: #2c3e50;
    --color-text-muted: #7f8c8d;
    --color-border: #ddd;
    --color-accent: #3498db;
    --color-accent-hover: #2980b9;
    
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.15);
}

/* Dark Mode */
[data-theme="dark"] {
    --color-bg: #1a1a1a;
    --color-bg-light: #2d2d2d;
    --color-text: #e0e0e0;
    --color-text-muted: #a0a0a0;
    --color-border: #404040;
    --color-accent: #64b5f6;
    --color-accent-hover: #42a5f5;
    
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.4);
}

/* Smooth transitions */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}