/* ============================================
   WEALTHWISE AI — Design Tokens
   ============================================ */
:root {
  /* ---- Color Palette (Dark Theme) ---- */
  --bg-primary: hsl(228, 25%, 8%);
  --bg-secondary: hsl(228, 22%, 12%);
  --bg-card: hsla(228, 22%, 14%, 0.65);
  --bg-card-hover: hsla(228, 22%, 18%, 0.75);
  --bg-input: hsla(228, 22%, 10%, 0.8);

  --glass-border: hsla(228, 30%, 30%, 0.35);
  --glass-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.4);
  --glass-blur: blur(20px);

  --text-primary: hsl(220, 20%, 95%);
  --text-secondary: hsl(220, 15%, 65%);
  --text-muted: hsl(220, 12%, 45%);

  /* Accent Colors */
  --accent-primary: hsl(250, 85%, 65%);
  --accent-primary-h: hsl(250, 95%, 72%);
  --accent-secondary: hsl(190, 90%, 55%);
  --accent-secondary-h: hsl(190, 95%, 62%);

  /* Semantic Colors */
  --color-income: hsl(155, 75%, 55%);
  --color-income-bg: hsla(155, 75%, 55%, 0.12);
  --color-expense: hsl(0, 80%, 62%);
  --color-expense-bg: hsla(0, 80%, 62%, 0.12);
  --color-warning: hsl(40, 95%, 60%);
  --color-warning-bg: hsla(40, 95%, 60%, 0.12);
  --color-info: hsl(210, 90%, 60%);
  --color-info-bg: hsla(210, 90%, 60%, 0.12);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(250, 85%, 65%), hsl(290, 80%, 60%));
  --gradient-income: linear-gradient(135deg, hsl(155, 75%, 55%), hsl(170, 80%, 50%));
  --gradient-expense: linear-gradient(135deg, hsl(0, 80%, 62%), hsl(340, 80%, 55%));
  --gradient-accent: linear-gradient(135deg, hsl(190, 90%, 55%), hsl(250, 85%, 65%));
  --gradient-gold: linear-gradient(135deg, hsl(40, 95%, 55%), hsl(25, 90%, 55%));

  /* ---- Typography ---- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs: 0.7rem;
  --fs-sm: 0.8rem;
  --fs-base: 0.925rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.6rem;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* ---- Spacing ---- */
  --space-xs: 0.35rem;
  --space-sm: 0.6rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* ---- Border Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

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

  /* ---- Sidebar ---- */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --topbar-height: 60px;
}