@import 'tailwindcss';

/* Tokens additifs (la palette zinc/emerald/amber/sky/red reste celle de Tailwind). */
@theme {
  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-pop: 0 12px 32px -12px rgb(0 0 0 / 0.7);
}

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

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

@layer components {
  /* Champs : rayon unifié + anneau de focus visible (absent auparavant). */
  .input {
    @apply w-full rounded-lg 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-visible:border-zinc-500 focus-visible:ring-2 focus-visible:ring-emerald-500/40;
  }

  /* Boutons : socle CSS pour les usages hors composant (ex. RouterLink class="btn").
     Le composant BaseButton réplique ces variantes et ajoute tailles / loading / focus. */
  .btn {
    @apply inline-flex items-center justify-center gap-1.5 rounded-lg 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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-primary {
    @apply inline-flex items-center justify-center gap-1.5 rounded-lg bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-emerald-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-danger {
    @apply inline-flex items-center justify-center gap-1.5 rounded-lg 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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-ghost {
    @apply inline-flex items-center justify-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-zinc-300 transition-colors hover:bg-zinc-800/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50;
  }

  .badge {
    @apply inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-medium;
  }

  /* Cartes : factorise le motif répété dans les listes/sections/formulaires. */
  .card {
    @apply rounded-xl border border-zinc-800 bg-zinc-900/50 p-3;
  }
  .card-inset {
    @apply rounded-lg border border-zinc-800 bg-zinc-950/40 p-2;
  }
}