:root {
    /* Default Light Theme */
    --color-bg: #f8f9fa;
    --color-surface: #ffffff;
    --color-surface-light: #e9ecef;
    --color-text: #1a222b;
    --color-text-muted: #2c3338;
    
    --color-green: #00b894;
    --color-green-light: #00e1a0;
    --color-green-dark: #009874;
    
    --color-blue: #0984e3;
    --color-blue-light: #74b9ff;
    --color-blue-dark: #0652dd;
    
    --color-white: #ffffff;
    --color-success: #00b894;
    --color-warning: #fdcb6e;
    --color-error: #d63031;
    
    --gradient-primary: linear-gradient(135deg, var(--color-green) 0%, var(--color-blue) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--color-blue) 0%, var(--color-green) 100%);
    --gradient-animated: linear-gradient(270deg, var(--color-green), var(--color-blue), var(--color-green-light), var(--color-blue-light));
    
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(0, 184, 148, 0.15);
    --glass-blur: blur(20px);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 184, 148, 0.08);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 20px rgba(0, 184, 148, 0.1);
    --shadow-glow-green: 0 0 30px rgba(0, 184, 148, 0.2);
    --shadow-glow-blue: 0 0 30px rgba(9, 132, 227, 0.2);
    
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    --duration-fast: 200ms;
    --duration-normal: 400ms;
    --duration-slow: 800ms;
    --duration-cinematic: 1200ms;
    
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;
    
    --container-width: 1400px;
    --border-radius: 16px;
    --border-radius-sm: 8px;
    --border-radius-lg: 24px;

    --text-scale: 1;
}

/* Dark Theme Override */
[data-theme="dark"] {
    --color-bg: #0a0f14;
    --color-surface: #13181f;
    --color-surface-light: #1a222b;
    --color-text: #e4e9f0;
    --color-text-muted: #b8c5d6;
    
    --glass-bg: rgba(19, 24, 31, 0.75);
    --glass-border: rgba(255, 255, 255, 0.1);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);
    --shadow-glow-green: 0 0 30px rgba(0, 184, 148, 0.4);
    --shadow-glow-blue: 0 0 30px rgba(9, 132, 227, 0.4);
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes gradient-rotate {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

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

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes glow {
    0%, 100% { 
        box-shadow: 0 0 20px var(--color-green),
                    0 0 40px var(--color-blue);
    }
    50% { 
        box-shadow: 0 0 30px var(--color-blue),
                    0 0 60px var(--color-green);
    }
}