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

@layer components {
  /* Form fields on the night background */
  .field-input {
    @apply block w-full rounded-xl border border-night-600 bg-night-950/70 px-4 py-3 text-base text-ink placeholder-ink-subtle
      focus:border-confetti-pink focus:outline-none focus:ring-2 focus:ring-confetti-pink/40;
  }

  .field-label {
    @apply mb-1.5 block text-sm font-bold text-ink;
  }

  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-extrabold transition
      active:scale-[.97] disabled:cursor-not-allowed disabled:opacity-60;
  }

  .btn-primary {
    @apply btn bg-gradient-to-r from-confetti-pink to-confetti-coral text-white shadow-lg shadow-confetti-pink/20 hover:brightness-110;
  }

  .btn-success {
    @apply btn bg-emerald-500 text-night-950 hover:bg-emerald-400;
  }

  .btn-danger {
    @apply btn bg-confetti-coral/15 text-confetti-coral ring-1 ring-inset ring-confetti-coral/40 hover:bg-confetti-coral hover:text-white;
  }

  .btn-ghost {
    @apply btn bg-night-700 text-ink ring-1 ring-inset ring-night-600 hover:bg-night-600;
  }

  .card {
    @apply rounded-2xl border border-night-600/70 bg-night-800/80 shadow-xl shadow-black/20;
  }
}

/* The QR code poster prints on one A4 page, edge to edge */
@media print {
  @page {
    size: A4;
    margin: 0;
  }
}