/* assets/css/variables.css */
:root {
    /* Base Colors - Deep Slate/Cyan Theme */
    --bg-main: #0f172a; /* deep slate */
    --bg-secondary: #1e293b; /* card background */
    --bg-tertiary: #334155; /* slightly lighter card or input */
    --bg-glass: rgba(30, 41, 59, 0.6);
    
    /* Borders & Dividers */
    --border-glass: rgba(255, 255, 255, 0.05); /* very soft borders */
    --border-hover: rgba(255, 255, 255, 0.12);
    
    /* Neon Accents - Cyan/Teal */
    --accent-primary: #0ea5e9; /* sky blue */
    --accent-hover: #38bdf8;
    --accent-secondary: #14b8a6; /* teal gradient end */
    --accent-glow: rgba(14, 165, 233, 0.3);
    
    /* Stats & Badge Accents */
    --icon-purple: #8b5cf6;
    --icon-green: #10b981;
    --icon-pink: #ec4899;
    --icon-blue: #3b82f6;
    --icon-yellow: #f59e0b;

    /* Status Colors */
    --success: #10b981;
    --success-glow: rgba(16, 185, 129, 0.2);
    --danger: #ef4444;
    --danger-glow: rgba(239, 68, 68, 0.2);
    --warning: #f59e0b;
    --warning-glow: rgba(245, 158, 11, 0.2);
    --info: #3b82f6;
    
    /* Text Colors */
    --text-primary: #ffffff;      
    --text-secondary: #94a3b8;    
    --text-muted: #64748b;        
    
    /* Spacing System */
    --spacing-xs: 6px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;
    
    /* Layout Variables */
    --sidebar-width: 250px;
    --navbar-height: 70px;
    --max-content-width: 1440px;
    
    /* Border Radius Scale (Larger & Premium) */
    --border-radius-xs: 8px;
    --border-radius-sm: 12px;
    --border-radius-md: 16px;
    --border-radius-lg: 20px;   /* Softest for cards */
    --border-radius-xl: 28px;
    --border-radius-pill: 9999px;
    
    /* Shadows */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-neon: 0 0 20px var(--accent-glow);
    
    /* Transitions */
    --transition-fast: all 0.15s ease-in-out;
    --transition-base: all 0.25s ease-in-out;
    --transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Theme Variables */
[data-theme="light"] {
    --bg-main: #f8fafc; 
    --bg-secondary: #ffffff; 
    --bg-tertiary: #f1f5f9; 
    --bg-glass: rgba(255, 255, 255, 0.9);
    
    --border-glass: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.15);
    
    --text-primary: #0f172a;      
    --text-secondary: #475569;    
    --text-muted: #64748b;
    
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-neon: 0 4px 15px rgba(14, 165, 233, 0.15);
}