:root {
            --primary: #8b5cf6;
            --primary-dark: #7c3aed;
            --primary-light: #a78bfa;
            --secondary: #10b981;
            --secondary-dark: #0da271;
            --secondary-light: #34d399;
            --accent: #f59e0b;
            --accent-dark: #d97706;
            --dark-bg: #0f172a;
            --dark-card: #1e293b;
            --dark-card-hover: #334155;
            --dark-text: #f8fafc;
            --dark-text-secondary: #cbd5e1;
            --dark-border: #475569;
            --light-bg: #f8fafc;
            --light-card: #ffffff;
            --light-text: #1e293b;
            --light-text-secondary: #64748b;
            --border-radius: 16px;
            --border-radius-sm: 8px;
            --box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            --box-shadow-light: 0 10px 20px rgba(0, 0, 0, 0.2);
            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dark));
            --gradient-secondary: linear-gradient(135deg, #29427a, #151b31);
            --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-dark));
        }