/* ============================================================
   BURGI BUDGET APP — Design Tokens
   Luxury Neon Dark Mode
   ============================================================ */

:root {
    /* ── Background Palette ── */
    --bg-deepest:   #080C14;
    --bg-deep:      #0B1120;
    --bg-card:      #111827;
    --bg-elevated:  #1A2332;
    --bg-hover:     #1E2D3D;
    --bg-input:     #0D1520;
    --bg-alt-row:   #0F1A28;

    /* ── Gradients ── */
    --gradient-body:    linear-gradient(135deg, #080C14 0%, #0A1628 50%, #0D1F2D 100%);
    --gradient-sidebar: linear-gradient(180deg, #0B1120 0%, #091A1A 100%);
    --gradient-progress: linear-gradient(90deg, #9046CF 0%, #03CEA4 50%, #39FF14 100%);

    /* ── Neon Accent Colors ── */
    --accent-teal:    #03CEA4;
    --accent-purple:  #9046CF;
    --accent-orange:  #FF7A18;
    --accent-pink:    #FF2D95;
    --accent-yellow:  #FFD60A;
    --accent-green:   #39FF14;
    --accent-cyan:    #00D4FF;
    --accent-coral:   #FF6B6B;

    /* ── Accent Hover States ── */
    --accent-teal-hover:   #02B890;
    --accent-purple-hover: #7B3AB5;
    --accent-pink-hover:   #E0267F;

    /* ── Glow Shadows ── */
    --glow-teal:    0 0 20px rgba(3, 206, 164, 0.3);
    --glow-purple:  0 0 20px rgba(144, 70, 207, 0.3);
    --glow-orange:  0 0 20px rgba(255, 122, 24, 0.3);
    --glow-pink:    0 0 20px rgba(255, 45, 149, 0.3);
    --glow-yellow:  0 0 20px rgba(255, 214, 10, 0.3);
    --glow-green:   0 0 20px rgba(57, 255, 20, 0.3);

    /* ── Text Colors ── */
    --text-primary:   #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted:     #475569;
    --text-accent:    #03CEA4;
    --text-danger:    #FF2D95;
    --text-success:   #39FF14;
    --text-warning:   #FFD60A;

    /* ── Semantic Colors ── */
    --color-positive:     #39FF14;
    --color-negative:     #FF2D95;
    --color-paid:         #03CEA4;
    --color-unpaid:       #FF7A18;
    --color-closed:       #9046CF;
    --color-warning:      #FFD60A;
    --color-danger:       #FF2D95;

    /* ── Glass / Overlay ── */
    --glass-bg:          rgba(17, 24, 39, 0.7);
    --glass-border:      rgba(3, 206, 164, 0.1);
    --glass-blur:        blur(12px);
    --overlay-bg:        rgba(8, 12, 20, 0.8);
    --overlay-blur:      blur(8px);
    --dropdown-bg:       rgba(26, 35, 50, 0.95);
    --dropdown-border:   rgba(3, 206, 164, 0.15);
    --toast-bg:          rgba(17, 24, 39, 0.9);

    /* ── Typography ── */
    --font-sans:     'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:     'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --font-size-xs:  0.75rem;
    --font-size-sm:  0.85rem;
    --font-size-md:  1rem;
    --font-size-lg:  1.2rem;
    --font-size-xl:  1.5rem;
    --font-size-2xl: 2rem;

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

    /* ── Border Radius ── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-pill: 9999px;

    /* ── Transitions ── */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow:   0.3s ease;

    /* ── Sidebar ── */
    --sidebar-width: 260px;

    /* ── Z-Index ── */
    --z-dropdown: 100;
    --z-modal:    200;
    --z-toast:    300;
}