:root {
  /* === Colors === */
  --color-bg-primary:     #0D0F14;         /* Deep background */
  --color-bg-secondary:   #151820;         /* Card background */
  --color-bg-tertiary:    #1C1F2A;         /* Input background */
  --color-bg-hover:       #242836;         
  
  --color-accent-primary: #7C5CFC;         /* Vibrant purple */
  --color-accent-glow:    rgba(124, 92, 252, 0.3);
  --color-accent-green:   #4ADE80;         /* Success/Positive balance */
  --color-accent-yellow:  #FACC15;         /* Warning/Pending */
  --color-accent-red:     #F87171;         /* Danger/Delete */
  
  --color-text-primary:   #F1F5F9;         /* Off-white text */
  --color-text-secondary: #94A3B8;         /* Muted blue-grey text */
  --color-text-muted:     #475569;         
  
  --color-border:         #1E293B;         
  
  /* === Typography === */
  --font-family:          'Inter', 'Lexend', system-ui, sans-serif;
  --font-size-xs:         0.75rem;   /* 12px */
  --font-size-sm:         0.875rem;  /* 14px */
  --font-size-base:       1rem;      /* 16px */
  --font-size-lg:         1.125rem;  /* 18px */
  --font-size-xl:         1.25rem;   /* 20px */
  --font-size-2xl:        1.5rem;    /* 24px */
  --font-size-3xl:        2rem;      /* 32px */
  
  /* === Spacing === */
  --space-xs:  0.25rem;   /* 4px */
  --space-sm:  0.5rem;    /* 8px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  
  /* === Radius === */
  --radius-sm:  0.5rem;   /* 8px */
  --radius-md:  0.75rem;  /* 12px */
  --radius-lg:  1rem;     /* 16px */
  --radius-xl:  1.5rem;   /* 24px */
  --radius-full: 9999px;
  
  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  
  /* === Layout === */
  --navbar-height: 4.5rem;
  --max-width-mobile: 440px;
}