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

:root {
  color-scheme: dark;
}

body {
  @apply bg-ink text-slate-100;
  background-image: radial-gradient(1200px 600px at 80% -10%, rgba(91, 140, 255, 0.12), transparent),
    radial-gradient(900px 500px at -10% 10%, rgba(34, 211, 238, 0.08), transparent);
  min-height: 100vh;
}

@layer components {
  .card {
    @apply rounded-2xl border border-edge bg-panel/80 backdrop-blur p-5 shadow-lg shadow-black/20;
  }
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-ink disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-primary {
    @apply btn bg-accent text-white hover:bg-accent/90;
  }
  .btn-ghost {
    @apply btn border border-edge bg-panel2 text-slate-200 hover:border-accent/60;
  }
  .btn-secondary {
    @apply btn border border-accent/40 bg-accent/10 text-accent hover:bg-accent/20;
  }
  .btn-danger {
    @apply btn bg-bad/90 text-white hover:bg-bad;
  }
  .btn-sm {
    @apply px-2.5 py-1 text-xs;
  }
  .input {
    @apply w-full rounded-xl border border-edge bg-ink/60 px-3 py-2 text-sm outline-none focus:border-accent focus-visible:ring-2 focus-visible:ring-accent/40;
  }
  .label {
    @apply mb-1 block text-xs font-medium uppercase tracking-wide text-muted;
  }
  .badge {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
  }
  .th {
    @apply px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-muted;
  }
  .td {
    @apply px-3 py-2 text-sm border-t border-edge/60;
  }
}