/* ─── Mint Vault — Design Tokens ────────────────────────────── */
:root {
  /* Brand */
  --clr-primary:        #00C896;
  --clr-primary-dark:   #009970;
  --clr-primary-glow:   rgba(0,200,150,0.18);
  --clr-secondary:      #38BDF8;
  --clr-accent:         #818CF8;

  /* Backgrounds */
  --clr-bg:             #0F172A;
  --clr-surface:        #111827;
  --clr-card:           #1E293B;
  --clr-card-hover:     #243047;
  --clr-border:         #1E293B;
  --clr-border-subtle:  #334155;

  /* Text */
  --clr-text:           #F8FAFC;
  --clr-text-secondary: #CBD5E1;
  --clr-text-muted:     #94A3B8;
  --clr-text-faint:     #475569;

  /* Semantic */
  --clr-income:         #34D399;
  --clr-expense:        #F87171;
  --clr-warning:        #FBBF24;
  --clr-error:          #F87171;
  --clr-info:           #38BDF8;

  /* Gradients */
  --grad-primary:       linear-gradient(135deg, #00C896, #009970);
  --grad-blue:          linear-gradient(135deg, #38BDF8, #0284C7);
  --grad-purple:        linear-gradient(135deg, #818CF8, #6366F1);
  --grad-income:        linear-gradient(135deg, #34D399, #059669);
  --grad-expense:       linear-gradient(135deg, #F87171, #DC2626);
  --grad-card:          linear-gradient(135deg, #1E293B, #172033);

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Radii */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 8px 24px rgba(0,200,150,0.35);

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Transitions */
  --ease: cubic-bezier(0.4,0,0.2,1);
  --dur:  0.25s;
  --transition: var(--dur) var(--ease);

  /* Sidebar */
  --sidebar-w: 260px;
  --topbar-h:  68px;
}