/* ========================================
   CSS Variables - Modern & Vibrant
======================================== */
:root {
    /* Premium Dark Theme */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #1a1a25;
    --bg-glass: rgba(20, 20, 30, 0.85);
    --bg-tertiary: #252535;

    /* Vibrant Multi-Color Accents */
    --accent: #6366f1;
    --accent-light: #818cf8;
    --accent-dark: #4f46e5;
    --accent-primary: #6366f1;
    --accent-secondary: #a855f7;
    --accent-tertiary: #ec4899;
    --accent-cyan: #06b6d4;
    --accent-emerald: #10b981;

    /* Rich Gradients */
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    --gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
    --gradient-glow: linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(168, 85, 247, 0.4) 50%, rgba(236, 72, 153, 0.4) 100%);
    --gradient-text: linear-gradient(135deg, #6366f1, #a855f7, #ec4899, #6366f1);

    /* Text */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-tertiary: #475569;

    /* Border */
    --border: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.12);
    --border-primary: rgba(99, 102, 241, 0.3);
    --border-glow: rgba(99, 102, 241, 0.5);

    /* Enhanced Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.3);
    --shadow-glow-accent: 0 0 40px rgba(168, 85, 247, 0.25);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Fira Code', monospace;

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Border Radius - Modern */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
}

[data-theme="light"] {
    /* Subtle Tinted Background for Better Contrast */
    --bg-primary: #f5f7fa;
    --bg-secondary: #eef1f6;
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.95);
    --bg-tertiary: #e3e8ef;

    /* Darker Text for Better Readability */
    --text-primary: #1a1d29;
    --text-secondary: #3e4758;
    --text-muted: #5f6878;
    --text-tertiary: #7e8799;

    /* Stronger Borders */
    --border: rgba(0, 0, 0, 0.15);
    --border-light: rgba(0, 0, 0, 0.2);
    --border-primary: rgba(99, 102, 241, 0.5);
    --border-glow: rgba(99, 102, 241, 0.6);

    /* More Visible Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.18);
    --shadow-glow: 0 0 24px rgba(99, 102, 241, 0.25);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.1);
}