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

@layer components {
  .card {
    @apply rounded-xl border border-edge bg-panel p-4 shadow;
  }
  .label {
    @apply text-xs uppercase tracking-wide text-slate-400;
  }
  .value {
    @apply text-2xl font-semibold tabular-nums;
  }
  .btn {
    @apply rounded-lg px-3 py-1.5 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-40;
  }
  .btn-primary {
    @apply btn bg-emerald-500 text-slate-900 hover:bg-emerald-400;
  }
  .btn-danger {
    @apply btn bg-rose-500 text-white hover:bg-rose-400;
  }
  .btn-muted {
    @apply btn border border-edge text-slate-200 hover:bg-slate-700;
  }
  .input {
    @apply w-full rounded-lg border border-edge bg-surface px-2 py-1.5 text-sm text-slate-100 outline-none focus:border-emerald-400;
  }
}