@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.5em 1.1em;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    border-radius: var(--radius-full);
    border: 1px solid var(--btn-border-color, var(--color-border));
    background-color: var(--btn-bg, var(--color-canvas));
    color: var(--btn-color, var(--color-ink));
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast),
      box-shadow var(--transition-fast),
      filter var(--transition-fast);

    /* Più acceso (non più scuro) e con un'aureola tenue nel colore del
       bottone stesso — currentColor risolve a --btn-color per variante,
       quindi la stessa regola vale per solid (.btn--primary/--danger) e
       badge (.btn--badge-*) senza bisogno di un'aureola per colore. */
    &:hover {
      filter: brightness(1.15) saturate(1.2);
      box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
    }

    &:focus-visible {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }

    &:disabled,
    &[disabled] {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  /* Primary */
  .btn--primary {
    --btn-bg: var(--color-primary);
    --btn-border-color: var(--color-primary);
    --btn-color: var(--color-primary-text);
    --focus-ring-color: var(--color-primary);
  }

  /* Danger */
  .btn--danger {
    --btn-bg: var(--color-negative);
    --btn-border-color: var(--color-negative);
    --btn-color: var(--color-negative-text);
    --focus-ring-color: var(--color-negative);
  }

  /* Plain / ghost */
  .btn--plain {
    --btn-bg: transparent;
    --btn-border-color: transparent;
    --btn-color: inherit;

    padding: 0;
    border-radius: 0;
    font-weight: inherit;

    /* Resta minimale (solo sottolineatura): niente padding né border-radius
       qui, l'aureola di .btn:hover sotto un link di testo sarebbe un
       riquadro fluttuante, non un bottone che si accende. */
    &:hover {
      filter: none;
      box-shadow: none;
      text-decoration: underline;
    }
  }

  /* Plain + danger text (e.g. delete actions) */
  .btn--plain-danger {
    --btn-color: var(--color-negative);
  }

  /* Badge — sfondo tenue sempre visibile (stile tailwindcss.com/plus badges),
     non un riempimento che compare solo all'hover: l'hover si limita al
     leggero dimming ereditato da .btn:hover. */
  .btn--badge {
    --btn-border-color: transparent;
  }

  .btn--badge-primary {
    --btn-bg: var(--color-primary-bg);
    --btn-color: var(--color-primary);
  }

  .btn--badge-positive {
    --btn-bg: var(--color-positive-bg);
    --btn-color: var(--color-positive);
  }

  .btn--badge-danger {
    --btn-bg: var(--color-negative-bg);
    --btn-color: var(--color-negative);
  }

  /* Azione di sola lettura (es. vedere i recapiti di un contatto dalla riga
     di ruolo): non annuncia né una modifica né una rimozione, quindi resta
     sui grigi invece di prendersi un colore semantico. */
  .btn--badge-neutral {
    --btn-bg: var(--color-surface);
    --btn-color: var(--color-ink-muted);
  }

  /* Small */
  .btn--sm {
    padding: 0.3em 0.8em;
    font-size: var(--text-xs);
  }

  /* Small + plain: plain wins on padding */
  .btn--sm.btn--plain {
    padding: 0;
  }

  /* Full width */
  .btn--block {
    inline-size: 100%;
  }

  /* Icona inline — 1em così scala col font-size dell'elemento che la
     contiene (.btn, .btn--sm, .link-button, link testuali...) senza bisogno
     di varianti dedicate per dimensione. */
  .icon {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    flex-shrink: 0;
    vertical-align: -0.125em;
  }

  /* Icona senza etichetta testuale — quadrato compatto, per azioni in spazi
     stretti (es. colonna azioni di una tabella). */
  .btn--icon {
    padding: 0.4em;
    gap: 0;
  }

  .btn--icon .icon {
    inline-size: 1.1em;
    block-size: 1.1em;
  }
}