@import "tailwindcss";

@theme inline {
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --color-brand-50: #eef6f2;
  --color-brand-100: #d5eadf;
  --color-brand-500: #1f7a55;
  --color-brand-600: #186446;
  --color-brand-700: #124d36;
  --color-income: #15803d;
  --color-expense: #c2410c;
}

body {
  @apply bg-stone-50 text-stone-900 antialiased;
}

@utility card { @apply rounded-xl border border-stone-200 bg-white p-5 shadow-[0_1px_2px_rgba(0,0,0,0.04)]; }
@utility card-title { @apply text-sm font-semibold text-stone-700 mb-3; }
@utility label { @apply block text-xs font-medium text-stone-600 mb-1; }
@utility input {
  @apply w-full rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm
    focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100;
}
@utility btn {
  @apply inline-flex items-center justify-center gap-1.5 rounded-lg border border-stone-300 bg-white px-3 py-2
    text-sm font-medium text-stone-700 hover:bg-stone-100 transition-colors cursor-pointer disabled:opacity-50;
}
@utility btn-primary { @apply btn border-brand-600 bg-brand-600 text-white hover:bg-brand-700; }
@utility btn-sm { @apply px-2 py-1 text-xs; }
@utility btn-ghost { @apply inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-stone-500 hover:bg-stone-100 hover:text-stone-800 cursor-pointer; }
@utility badge { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium; }
@utility tabular { font-variant-numeric: tabular-nums; }

@layer components {
  .table { @apply w-full text-sm; }
  .table th { @apply text-left text-xs font-medium uppercase tracking-wide text-stone-500 px-3 py-2 border-b border-stone-200; }
  .table td { @apply px-3 py-2.5 border-b border-stone-100 align-middle; }
}