:root {
    /* Color Palette - Premium Indigo & Emerald (Light Mode) */
    --primary: #4f46e5; /* Indigo */
    --primary-rgb: 79, 70, 229;
    --primary-hover: #4338ca;
    --primary-glow: rgba(79, 70, 229, 0.15);

    --accent: #059669; /* Emerald */
    --accent-rgb: 5, 150, 105;
    --accent-hover: #047857;
    --accent-glow: rgba(5, 150, 105, 0.15);

    --danger: #e11d48; /* Rose */
    --danger-rgb: 225, 29, 72;
    --danger-hover: #be123c;

    --warning: #d97706; /* Amber */
    --info: #0284c7; /* Sky */

    /* Neutrals - Clean Light Theme */
    --bg-darkest: #f8fafc; /* Main background (Slate 50) */
    --bg-darker: #f1f5f9;  /* Secondary/Sections background (Slate 100) */
    --bg-dark: #ffffff;    /* Containers background (White) */
    --bg-card: #ffffff;    /* Card background (White) */
    --bg-glass: rgba(255, 255, 255, 0.75);
    --bg-glass-card: rgba(255, 255, 255, 0.6);

    /* Text */
    --text-primary: #0f172a;   /* Slate 900 */
    --text-secondary: #475569; /* Slate 600 */
    --text-muted: #94a3b8;     /* Slate 400 */
    --text-link: #4f46e5;

    /* Borders & Dividers */
    --border-color: #e2e8f0;   /* Slate 200 */
    --border-glass: rgba(15, 23, 42, 0.08);
    --border-glass-hover: rgba(79, 70, 229, 0.25);

    /* Shadows & Glows */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.08);
    --shadow-glass: 0 8px 32px 0 rgba(15, 23, 42, 0.05);
    --glow-primary: 0 0 12px rgba(79, 70, 229, 0.15);
    --glow-accent: 0 0 10px rgba(5, 150, 105, 0.15);
    --modal-backdrop: rgba(15, 23, 42, 0.4);

    /* Layout & Spacing */
    --header-height: 70px;
    --container-max-width: 1400px;
    --border-radius-sm: 8px;
    --border-radius-md: 14px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px;

    /* Typography */
    --font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --glass-backdrop: blur(16px);
}

body.dark-theme {
    /* Color Palette - Cyber Gaming Dark Theme */
    --primary: #6366f1; /* Indigo */
    --primary-rgb: 99, 102, 241;
    --primary-hover: #4f46e5;
    --primary-glow: rgba(99, 102, 241, 0.35);

    --accent: #10b981; /* Emerald */
    --accent-rgb: 16, 185, 129;
    --accent-hover: #059669;
    --accent-glow: rgba(16, 185, 129, 0.25);

    --danger: #f43f5e; /* Rose */
    --danger-rgb: 244, 63, 94;
    --danger-hover: #e11d48;

    --warning: #f59e0b;
    --info: #0ea5e9;

    /* Neutrals - Dark Theme */
    --bg-darkest: #07090e;
    --bg-darker: #0d121f;
    --bg-dark: #151c2c;
    --bg-card: #1e2640;
    --bg-glass: rgba(13, 18, 31, 0.7);
    --bg-glass-card: rgba(30, 38, 64, 0.5);

    /* Text */
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-link: #818cf8;

    /* Borders & Dividers */
    --border-color: #2e3752;
    --border-glass: rgba(255, 255, 255, 0.06);
    --border-glass-hover: rgba(99, 102, 241, 0.3);

    /* Shadows & Glows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    --glow-primary: 0 0 15px rgba(99, 102, 241, 0.4);
    --glow-accent: 0 0 12px rgba(16, 185, 129, 0.3);
    --modal-backdrop: rgba(3, 7, 18, 0.8);
    --glass-backdrop: blur(12px);
}