/* ════════════════════════════════════════════════════════════════════
   btn.css — Redesign sistema bottoni (v1)
   Direzione approvata: 1b "Soft Pill" con angoli ridotti (12px / 10px)
   invece della pillola (999px).

   COME USARLO
   Includi questo file PER ULTIMO in ogni pagina, dopo main.css / theme.css
   / auth.css / ecc. — a parità di specificità (sono tutte classi singole)
   l'ultimo file caricato vince, quindi non serve toccare l'HTML né usare
   !important:
     <link rel="stylesheet" href="css/theme.css">
     <link rel="stylesheet" href="css/main.css">
     ...
     <link rel="stylesheet" href="css/btn.css">   <!-- sempre ultimo -->

   Nessuna regola dark-mode manuale: i colori sono tutti var(--brand),
   var(--danger), var(--success), var(--violet), ecc. — che si aggiornano
   già da soli dentro .dark-mode in theme.css.

   SET SEMANTICO (6 varianti, invece di ~15 classi incoerenti)
     .btn-primary    azione principale        → soft-tint colore brand
     .btn-secondary  azione secondaria        → outline neutro
     .btn-ghost      azione terziaria/testo   → trasparente
     .btn-success    conferma / attivazione   → pieno verde
     .btn-danger     distruttiva              → outline rosso
     .btn-accent     gestione / evidenza extra→ outline viola

   TAGLIE
     .btn        md (default)
     .btn-sm     sm (anche .btn-small, alias legacy)
     .btn-icon   solo icona, quadrato — aggiungi .btn-sm per la versione piccola

   MAPPATURA DELLE CLASSI LEGACY → NUOVA VARIANTE
     .btn-primary                          → Primary (corretto: prima usava per errore il verde di success)
     .btn-secondary                        → Secondary (prima era arancio/pesca)
     .btn-tertiary, .btn-quintary,
     .btn-setting-purple, .btn-management  → Accent (erano tutte varianti di viola/blu-viola)
     .btn-setting-pink                     → Accent
     .btn-quartary, .btn-sestiary,
     .btn-septiary, .btn-setting-blue,
     .btn-setting-cyan, .btn-alternative   → Secondary (colori "extra" senza un vero significato semantico)
     .btn-danger, .btn-delete,
     .btn-setting-red                      → Danger
     .btn-success                          → Success
     .btn-large                            → resta come modificatore di sola taglia (più grande)
     .btn-primary.btn-small / .btn-small   → alias di .btn-sm

   Non toccati (fuori dal sistema "azione generica"): .btn-auth, .back-btn,
   .btn-save-notes — sono componenti specifici di pagina, non bottoni d'azione
   generici. Se vuoi, li allineiamo in un secondo passaggio.
   ════════════════════════════════════════════════════════════════════ */

/* ── Base ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 10px 18px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: none;
  box-shadow: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .15s ease,
              opacity .15s ease;
}
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.btn:disabled,
.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Primary — soft-tint brand ─────────────────────────────────────── */
.btn-primary,
.btn-quintary {
  background: color-mix(in srgb, var(--brand) 15%, var(--bg-surface));
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 38%, transparent);
}
.btn-primary:hover,
.btn-quintary:hover {
  background: color-mix(in srgb, var(--brand) 24%, var(--bg-surface));
  border-color: var(--brand);
}

/* ── Secondary — outline neutro ────────────────────────────────────── */
.btn-secondary,
.btn-quartary,
.btn-sestiary,
.btn-septiary,
.btn-setting-blue,
.btn-setting-cyan,
.btn-alternative {
  background: transparent;
  color: var(--text-heading);
  border-color: var(--border-medium);
}
.btn-secondary:hover,
.btn-quartary:hover,
.btn-sestiary:hover,
.btn-septiary:hover,
.btn-setting-blue:hover,
.btn-setting-cyan:hover,
.btn-alternative:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

/* ── Ghost — solo testo ─────────────────────────────────────────────── */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-heading);
}

/* ── Success — pieno ───────────────────────────────────────────────── */
.btn-success {
  background: var(--success);
  color: var(--text-inverse);
  border-color: transparent;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--success) 30%, transparent);
}
.btn-success:hover {
  background: var(--success-dark);
  transform: translateY(-1px);
}

/* ── Danger — outline ──────────────────────────────────────────────── */
.btn-danger,
.btn-delete,
.btn-setting-red {
  background: transparent;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}
.btn-danger:hover,
.btn-delete:hover,
.btn-setting-red:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* ── Accent — outline viola (gestione / evidenza extra) ───────────── */
.btn-accent,
.btn-tertiary,
.btn-setting-purple,
.btn-setting-pink,
.btn-management {
  background: transparent;
  color: var(--violet);
  border-color: color-mix(in srgb, var(--violet) 45%, transparent);
}
.btn-accent:hover,
.btn-tertiary:hover,
.btn-setting-purple:hover,
.btn-setting-pink:hover,
.btn-management:hover {
  background: color-mix(in srgb, var(--violet) 12%, transparent);
}

/* ── Taglie ────────────────────────────────────────────────────────── */
.btn-sm,
.btn-small {
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 12px;
}
.btn-large {
  padding: 14px 26px;
  border-radius: 14px;
  font-size: 15px;
}

/* ── Icon-only ─────────────────────────────────────────────────────── */
.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
}
.btn-icon.btn-sm,
.btn-icon.btn-small {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}