:root {
    /* Light Theme Variables */
    --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --text-color: #2d3748;
    --text-muted: #718096;
    --card-bg: rgba(255, 255, 255, 0.7);
    --card-border: rgba(255, 255, 255, 0.5);
    --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    
    --primary-color: #4299e1;
    --primary-hover: #3182ce;
    --secondary-color: #a0aec0;
    
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border: #e2e8f0;
    
    --success-color: #48bb78;
    --danger-color: #f56565;
    
    /* Chart Colors */
    --chart-line-1: #4299e1;
    --chart-line-2: #ed8936;
    --chart-grid: #e2e8f0;
    --chart-text: #4a5568;
}

body.dark-theme {
    /* Dark Theme Variables */
    --bg-gradient: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    --text-color: #e2e8f0;
    --text-muted: #a0aec0;
    --card-bg: rgba(26, 32, 44, 0.7);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    --primary-color: #63b3ed;
    --primary-hover: #4299e1;
    --secondary-color: #718096;
    
    --input-bg: rgba(45, 55, 72, 0.8);
    --input-border: #4a5568;
    
    /* Chart Colors Dark */
    --chart-line-1: #63b3ed;
    --chart-line-2: #f6ad55;
    --chart-grid: #4a5568;
    --chart-text: #cbd5e0;
}