@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --bg: 255 255 255;
  --fg: 17 24 39;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: 17 24 39; --fg: 226 232 240; }
}
html, body { height: 100%; }
body { background-color: rgb(var(--bg)); color: rgb(var(--fg)); }
.input { @apply border rounded-md px-3 py-2 w-full bg-white/70 dark:bg-slate-800/70 border-slate-300 dark:border-slate-700; }
.label { @apply text-sm font-medium mb-1 block; }
.btn { @apply inline-flex items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-semibold shadow-sm bg-slate-900 text-white hover:bg-slate-800 disabled:opacity-50; }
.card { @apply rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm; }
.badge { @apply inline-flex items-center rounded-full border px-2 py-1 text-xs border-slate-300 dark:border-slate-700; }
.link { @apply underline text-blue-600 dark:text-blue-400 hover:no-underline; }