/* =============================================================
   Socle · Bouton (.sc-btn)
   Consomme uniquement des tokens sémantiques.
   Variantes : --primary, --danger, --ghost (défaut : neutre)
   Tailles : --s, --l (défaut : m) · Modificateur : --icon
   Sélection : aria-pressed="true" (bascule) ou aria-current
   (position courante d'une série), déclarée dans le balisage.
   ============================================================= */

.sc-btn {
  /* Tokens de composant : les variantes ne font que réassigner ceci. */
  --_btn-bg: var(--color-bg-surface);
  --_btn-bg-hover: var(--color-bg-hover);
  --_btn-bg-active: var(--color-bg-active);
  /* Au repos, une commande neutre est en retrait. C'est la règle qui
     distingue ce qui commande de ce qui est dit : un libellé de bouton
     n'est pas de l'information, c'est une prise, et une page dont
     toutes les prises sont au blanc plein n'a plus de hiérarchie, elle
     a une rangée de titres.
     Au survol il remonte à l'encre pleine : le retour se fait par le
     texte autant que par le fond, ce qui rend le geste lisible même sur
     un bouton fantôme qui n'a pas de bordure. */
  --_btn-text: var(--color-text-muted);
  --_btn-text-hover: var(--color-text);
  --_btn-border: var(--color-border-strong);
  --_btn-height: var(--control-height-m);
  --_btn-padding-x: var(--control-padding);
  --_btn-font-size: var(--text-action-size);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-s);
  height: var(--_btn-height);
  padding-inline: var(--_btn-padding-x);
  border: var(--border-hairline) solid var(--_btn-border);
  border-radius: var(--radius-control);
  background: var(--_btn-bg);
  color: var(--_btn-text);
  font-family: var(--font-body);
  font-size: var(--_btn-font-size);
  font-weight: var(--text-label-weight);
  line-height: var(--leading-tight);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    box-shadow var(--motion-fast);
}

/* Les gardes doublent pointer-events, qui ne coupe que le vrai
   survol : sans elles, un bouton hors service repris en data-state
   dans la doc s'allumerait quand même. */
.sc-btn:is(:hover, [data-state="hover"]):not(:disabled):not([data-disabled]) {
  background: var(--_btn-bg-hover);
  color: var(--_btn-text-hover);
}

.sc-btn:is(:active, [data-state="active"]):not(:disabled):not([data-disabled]) {
  background: var(--_btn-bg-active);
}

/* Simulation du focus clavier pour la doc (le vrai focus passe
   par :focus-visible dans base.css). */
.sc-btn[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ---- Sélectionné ----
   L'état durable d'un bouton qui reste enfoncé parce qu'il porte le
   choix courant : page de pagination, filtre retenu, bascule active.
   Même motif que .sc-tag--filter[aria-pressed="true"] et que
   .sc-sidebar__item[aria-current="page"] : l'état vit dans le
   balisage, le CSS ne fait que réassigner les tokens privés.

   Deux attributs, parce que ce sont deux sens et que les lecteurs
   d'écran les annoncent différemment. aria-pressed="true" dit « cette
   bascule est enfoncée » : gras, filtre, mode d'affichage. aria-current
   dit « c'est ici que vous êtes » dans une série dont un seul membre
   est courant : page en pagination, step dans un tunnel. La valeur
   "false" est la façon dont ARIA écrit « pas courant », d'où le :not
   qui l'exclut. Sur un <a> habillé en bouton, seul aria-current vaut :
   aria-pressed demande un <button>.

   Le survol et l'enfoncé du sélectionné restent dans sa teinte : un
   bouton déjà choisi ne repasse pas par le gris sous le pointeur. */
.sc-btn:is([aria-pressed="true"], [aria-current]:not([aria-current="false"]), [data-state="selected"]) {
  --_btn-bg: var(--color-accent-subtle);
  --_btn-bg-hover: var(--color-accent-subtle-hover);
  --_btn-bg-active: var(--color-accent-subtle-hover);
  --_btn-text: var(--color-accent-text);
  --_btn-text-hover: var(--color-accent-text);
  --_btn-border: var(--color-accent-border);
}

/* Un bouton destructif retenu reste rouge : la famille du bouton
   l'emporte sur l'accent. Le neutre et le ghost n'ont pas de famille,
   ils empruntent celle de l'accent comme l'item de barre latérale, et
   le primaire y est déjà. Sur les deux variantes pleines, choisir
   éteint donc l'aplat plutôt que de l'assombrir : c'est la lecture de
   « Suivre » qui devient « Suivi », et c'est ce qui garde l'écart avec
   l'enfoncé, dont l'aplat, lui, ne fait que foncer. */
.sc-btn--danger:is([aria-pressed="true"], [aria-current]:not([aria-current="false"]), [data-state="selected"]) {
  --_btn-bg: var(--color-danger-subtle);
  --_btn-bg-hover: var(--color-danger-subtle-hover);
  --_btn-bg-active: var(--color-danger-subtle-hover);
  --_btn-text: var(--color-danger-text);
  --_btn-text-hover: var(--color-danger-text);
  --_btn-border: var(--color-danger-border);
}

/* Hors service. Un bouton sélectionné le reste en s'éteignant : la
   teinte survit à l'opacité, sans quoi une bascule mise hors service
   perdrait la seule trace de sa position. */
.sc-btn:disabled,
.sc-btn[data-disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* ---- Variantes ---- */

/* La commande, pas l'accent. Les deux valent la même chose par défaut,
   et se séparent dès qu'une direction artistique réserve sa couleur au
   trait et aux marques plutôt qu'aux boutons. */
.sc-btn--primary {
  --_btn-bg: var(--color-action);
  --_btn-bg-hover: var(--color-action-hover);
  --_btn-bg-active: var(--color-action-active);
  --_btn-text: var(--color-action-text);
  --_btn-text-hover: var(--color-action-text);
  /* Cerné plutôt que posé à plat. Un aplat sans arête n'a pas d'assise
     sur une surface qui porte déjà des bordures fines partout : le
     bouton primaire était le seul objet du système à flotter. */
  --_btn-border: var(--color-action-edge);
}

/* Le texte du rouge, pas celui de l'accent : ce sont deux aplats
   différents, et le rouge ne suit pas le même cran d'un thème à l'autre.
   Emprunter --color-text-on-accent laissait le libellé à 4,05 en sombre
   et faisait diverger ce bouton du badge --danger --solid, qui est
   pourtant le même aplat à côté de lui. */
.sc-btn--danger {
  --_btn-bg: var(--color-destructive);
  --_btn-bg-hover: var(--color-destructive-hover);
  --_btn-bg-active: var(--color-destructive-active);
  --_btn-text: var(--color-destructive-text);
  --_btn-text-hover: var(--color-destructive-text);
  --_btn-border: var(--color-destructive-edge);
}

.sc-btn--ghost {
  --_btn-bg: transparent;
  --_btn-bg-hover: var(--color-bg-hover);
  --_btn-bg-active: var(--color-bg-active);
  --_btn-border: transparent;
}

/* ---- Tailles ---- */

.sc-btn--s {
  --_btn-height: var(--control-height-s);
  --_btn-padding-x: var(--control-padding-s);
  --_btn-font-size: var(--text-action-s-size);
}

.sc-btn--l {
  --_btn-height: var(--control-height-l);
  --_btn-padding-x: var(--control-padding-l);
  --_btn-font-size: var(--text-action-l-size);
}

/* ---- Icône seule (carré) ---- */

.sc-btn--icon {
  width: var(--_btn-height);
  padding-inline: var(--padding-2xs);
}