/*
 * ExpenseTracker — small layer that complements Tailwind:
 * - Design tokens for colors used inside Chart.js / inline styles
 * - A tiny set of bespoke component classes (kpi card glass, budget bar gradient)
 *   that Tailwind utilities can't express cleanly.
 * Everything else in the app is plain Tailwind utility classes.
 */
:root{
  --color-primary:   #4F46E5;
  --color-primary-2: #6366F1;
  --color-success:   #10B981;
  --color-warning:   #F59E0B;
  --color-danger:    #EF4444;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

html.dark{
  color-scheme: dark;
}

/* numeric tabular display in tables */
.num{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* glass-morphism KPI card on dashboard */
.kpi-glass{
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, white 70%, transparent);
  box-shadow: 0 8px 32px rgba(31, 38, 135, .12);
}
html.dark .kpi-glass{
  background: color-mix(in srgb, #111827 70%, transparent);
}

/* budget utilization bar */
.budget-bar{ height: 8px; background: rgb(226 232 240); border-radius: 999px; overflow: hidden; }
html.dark .budget-bar{ background: rgb(31 41 55); }
.budget-bar > span{ display:block; height:100%; transition: width .3s ease; }
.budget-bar.ok > span     { background: var(--color-success); }
.budget-bar.warn > span   { background: var(--color-warning); }
.budget-bar.danger > span { background: var(--color-danger);  }

/* category icon swatch */
.cat-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width: 32px; height: 32px; border-radius: 8px; color: #fff;
}

/* mobile bottom nav active state needs a bit of color logic CSS expresses well */
.bottom-nav-link.active{ color: var(--color-primary); }
html.dark .bottom-nav-link.active{ color: var(--color-primary-2); }