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

/* #4066 : hierarchie libelle / valeur saisie.
   Basecoat regle ses champs a 16 px sur mobile (en dessous, iOS zoome au focus) et
   14 px des `md`, mais dans un `@layer`. Notre Tailwind v3 n'est PAS layere : le
   `input, select, textarea { font-size: 100% }` de son preflight gagnait donc
   toujours, et la valeur sortait a 16 px partout sous un libelle a 14 px
   (`label text-sm font-medium`). On repose ici la taille voulue par Basecoat, sur
   l'ELEMENT et non sur `.input` : les ecrans Devise n'utilisent pas ces classes.
   `:where()` garde la specificite d'un simple selecteur d'element, donc n'importe
   quelle utilitaire posee sur le champ (`text-sm`, `text-2xl` du code 2FA) passe
   devant. Les boutons <input type="submit"> ne sont pas des champs. */
@layer base {
  input:where(:not([type="submit"], [type="button"], [type="reset"])),
  select,
  textarea {
    @apply text-base md:text-sm;
  }
}

@layer components {
  .btn {
    @apply px-5 py-2.5 font-medium rounded-lg transition-colors cursor-pointer
           inline-flex items-center justify-center gap-2;
  }

  .btn-outline {
    @apply px-5 py-2.5 font-medium rounded-lg border border-gray-300 text-sf-dark
           bg-white hover:bg-gray-50 transition-colors cursor-pointer
           inline-flex items-center justify-center gap-2;
  }

  .btn-destructive {
    @apply px-5 py-2.5 font-medium rounded-lg bg-red-600 text-white
           hover:bg-red-700 transition-colors cursor-pointer
           inline-flex items-center justify-center gap-2;
  }

  .btn-icon-outline {
    @apply p-2 rounded-lg border border-gray-300 text-gray-600 bg-white
           hover:bg-gray-50 transition-colors cursor-pointer
           inline-flex items-center justify-center;
  }

  .btn-sm {
    @apply text-sm px-3 py-1.5;
  }
}

/* #4066, suite : sous `md` le champ reste a 16 px, son libelle monte a la meme
   taille. Les <label> qui ENVELOPPENT un champ (OUI / NON, cases a cocher) sont
   des reponses, pas des libelles : ils gardent leur taille.
   `[class~="text-sm"]` et non `.text-sm`, expres : Tailwind v3 prend toute regle
   qui nomme `.text-sm` pour une definition de la classe et la recopie sous
   chaque `md:text-sm` et chaque `@apply text-sm` (`.btn-sm`). */
@media (max-width: 767.98px) {
  label[class~="text-sm"]:not(:has(input, select, textarea)) {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}