@import 'tailwindcss';

html,
body,
#app {
  height: 100%;
}

body {
  background-color: var(--color-zinc-950);
  color: var(--color-zinc-200);
  -webkit-font-smoothing: antialiased;
}

@layer components {
  .input {
    @apply w-full rounded-md border border-zinc-700 bg-zinc-950 px-2.5 py-1.5 text-sm text-zinc-100 outline-none transition-colors placeholder:text-zinc-600 focus:border-zinc-400;
  }
  .btn {
    @apply inline-flex items-center justify-center gap-1.5 rounded-md border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-sm font-medium text-zinc-200 transition-colors hover:bg-zinc-700 disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-primary {
    @apply inline-flex items-center justify-center gap-1.5 rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-danger {
    @apply inline-flex items-center justify-center gap-1.5 rounded-md border border-red-900 bg-red-950 px-3 py-1.5 text-sm font-medium text-red-300 transition-colors hover:bg-red-900 disabled:cursor-not-allowed disabled:opacity-50;
  }
  .badge {
    @apply inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium;
  }
}
