/* =============================================================
   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
   ============================================================= */

.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);
  --_btn-text: var(--color-text);
  --_btn-border: var(--color-border-strong);
  --_btn-height: var(--control-height-m);
  --_btn-padding-x: var(--padding-l);
  --_btn-font-size: var(--text-label-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);
}

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

.sc-btn:active,
.sc-btn[data-state="active"] {
  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);
}

.sc-btn:disabled,
.sc-btn[data-disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

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

.sc-btn--primary {
  --_btn-bg: var(--color-accent);
  --_btn-bg-hover: var(--color-accent-hover);
  --_btn-bg-active: var(--color-accent-active);
  --_btn-text: var(--color-text-on-accent);
  --_btn-border: transparent;
}

.sc-btn--danger {
  --_btn-bg: var(--color-danger);
  --_btn-bg-hover: var(--color-danger-hover);
  --_btn-bg-active: var(--color-danger-active);
  --_btn-text: var(--color-text-on-accent);
  --_btn-border: transparent;
}

.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(--padding-m);
  --_btn-font-size: var(--text-body-s-size);
}

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

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

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