/* ============================================
   CSS VARIABLES & ROOT STYLES
   ============================================ */

:root {
    /* Light Mode Colors */
    --bg-gradient-1: #e3f2fd;
    --bg-gradient-2: #f3e5f5;
    --container-bg: #ffffff;
    --text-primary: #1a1a2e;
    --text-secondary: #666;
    --border-color: #dee2e6;
    --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100());
    --card-bg: #ffffff;
    --card-border: #e9ecef;
    --input-bg: #ffffff;
    --input-border: #dee2e6;
    --shadow: rgba(0, 0, 0, 0.1);
    
    /* Accent Colors */
    --primary: #0f3460;
    --secondary: #667eea;
    --success: #28a745;
    --danger: #dc3545;
    --info: #17a2b8;
    --warning: #ffc107;
}

body.dark-mode {
    /* Dark Mode Colors */
    --bg-gradient-1: #0a0a0a;
    --bg-gradient-2: #1a1a2e;
    --container-bg: #1e1e1e;
    --text-primary: #e0e0e0;
    --text-secondary: #adb5bd;
    --border-color: #3a3a3a;
    --header-bg: linear-gradient(135deg, #0a0a0a 0%, #16213e 100%);
    --card-bg: #2a2a2a;
    --card-border: #3a3a3a;
    --input-bg: #1e1e1e;
    --input-border: #3a3a3a;
    --shadow: rgba(0, 0, 0, 0.5);
    
    --primary: #66b3ff;
    --secondary: #667eea;
}

/* Animations */
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    50% { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}