/* css/variables.css */
:root {
    /* Base Theme (Dark - Budgetly Style) */
    color-scheme: dark;
    /* Main colors */
    --bg-dark: linear-gradient(135deg, #030712 0%, #0B1120 50%, #020617 100%); 
    --bg-card: rgba(15, 23, 42, 0.85);
    --bg-modal: rgba(15, 23, 42, 0.90);
    
    /* Accents & Glows */
    --accent-blue: #6366F1;
    --accent-purple: #8B5CF6; 
    --accent-cyan: #06b6d4;
    --accent-pink: #ec4899;
    --accent-white: rgba(255, 255, 255, 0.95);
    
    --glow-blue: 0 4px 15px rgba(99, 102, 241, 0.4);
    --glow-purple: 0 4px 15px rgba(139, 92, 246, 0.5);
    --glow-cyan: 0 4px 15px rgba(6, 182, 212, 0.3);
    
    /* Glassmorphism */
    --glass-blur: blur(16px);
    --glass-border: 1px solid rgba(124, 58, 237, 0.2);
    --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(124, 58, 237, 0.05);
    --glass-overlay: rgba(30, 41, 59, 0.4); 
    --input-bg: #1E293B;
    --card-glow: rgba(139, 92, 246, 0.15);
    --bg-dots: transparent;
    
    /* Text Colors */
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748b;
    
    /* Typography */
    --font-family: 'Inter', sans-serif;
    --font-heading: 'Outfit', sans-serif;
    --text-subheading: 16px;
    --text-body: 14px;
    --text-small: 12px;
    
    /* Spacing & Layout */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
    
    /* Animations */
    --transition-fast: 150ms ease-out;
    
    /* Bottom Nav Height */
    --nav-height: 80px;
}

/* ── Light Mode Overrides ───────────────────────────────── */
:root.light-mode {
    color-scheme: light;
    --bg-dark: #f2f2f7;
    --bg-card: #ffffff;
    --bg-modal: #ffffff;
    
    --text-primary: #000000;
    --text-secondary: rgba(0, 0, 0, 0.6);
    --text-tertiary: rgba(0, 0, 0, 0.4);

    --glass-border: 1px solid rgba(0, 0, 0, 0.08);
    --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --glass-overlay: rgba(0, 0, 0, 0.04);
    --input-bg: rgba(0, 0, 0, 0.04);
    --card-glow: transparent;
    --bg-dots: rgba(0, 0, 0, 0.07);

    --glow-blue: 0 4px 12px rgba(50, 173, 230, 0.25);
    --glow-purple: 0 4px 12px rgba(181, 128, 255, 0.25);
    --glow-cyan: 0 4px 12px rgba(100, 210, 255, 0.25);
}