/* Buttons — DESIGN_PRINCIPLES.md §9 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  padding: 9px var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease-smooth),
    border-color var(--dur-micro) var(--ease-smooth),
    color var(--dur-micro) var(--ease-smooth),
    transform var(--dur-micro) var(--ease-smooth);
  min-height: 40px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Primary — dunkel, wird auf Hover coral */
.btn-primary {
  background: var(--tappr-ink);
  color: var(--tappr-bg);
  border-color: var(--tappr-ink);
}
.btn-primary:hover {
  background: var(--tappr-red);
  border-color: var(--tappr-red);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  background: var(--tappr-red-text);
  border-color: var(--tappr-red-text);
}

/* Secondary — Ghost */
.btn-secondary {
  background: transparent;
  color: var(--tappr-ink);
  border-color: transparent;
}
.btn-secondary:hover {
  background: var(--tappr-bg-soft);
}

/* Kein Link-Style-Knopf.
 *
 * Hier stand `.btn-tertiary` — ein Knopf ohne Flaeche, nur unterstrichener
 * Text. Er kommt im Showcase nicht vor: dort hat jeder Knopf eine Form,
 * entweder gefuellt (primary) oder umrandet (ghost/outline). Der
 * Unterstrich war ausserdem ein border-bottom, der auf schmalen Bildschirmen
 * ueber die volle Breite gezogen wurde und wie ein Trennstrich aussah.
 *
 * Fuer einen leisen Knopf: `.btn-outline`. Fuer einen leisen Knopf mit
 * Folgen (kuendigen, trennen): `.btn-outline is-danger`. */

/* Outline — dezenter Rahmen */
.btn-outline {
  background: var(--tappr-bg);
  color: var(--tappr-ink);
  border-color: var(--tappr-border-2);
}
.btn-outline:hover {
  border-color: var(--tappr-ink);
  background: var(--tappr-bg);
}

/* is-danger — leiser Knopf mit Folgen (kuendigen, Geraet trennen).
 * Behaelt seine Form, wechselt nur die Farbe. Nicht `.btn-destructive`
 * (gefuellt rot) — das ist fuer den Knopf, der die Tat wirklich
 * ausloest, meist im Bestaetigungs-Dialog.
 * Uebernommen aus dem 2FA-Abschnitt, wo dieselbe Behandlung bisher
 * lokal nachgebaut war (account-2fa.css). */
.btn.is-danger {
  color: var(--tappr-red-text);
  border-color: var(--tappr-red-text);
}
.btn.is-danger:hover {
  background: var(--tappr-red-soft);
  border-color: var(--tappr-red-text);
}

/* Destructive — Löschen, Abbrechen mit Datenverlust.
 * Bewusst NICHT Coral: Coral ist Brand/Primary, nicht Gefahr.
 * Hover verdunkelt — kein Coral-Wechsel wie bei Primary. */
.btn-destructive {
  background: var(--tappr-red-text);
  color: var(--tappr-bg);
  border-color: var(--tappr-red-text);
}
.btn-destructive:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}
.btn-destructive:active {
  background: #991b1b;
  border-color: #991b1b;
}

/* Grössen */
.btn-lg {
  padding: 13px 22px;
  font-size: 15px;
  min-height: 48px;
  border-radius: var(--radius-lg);
}
.btn-sm {
  padding: 6px var(--space-3);
  font-size: var(--fs-body-sm);
  min-height: 32px;
}

/* Full-Width auf Mobile */
.btn-block {
  width: 100%;
}

/* Icon-Button (nur Icon, 36–40px) */
.btn-icon {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  color: var(--tappr-ink-2);
}
.btn-icon:hover {
  background: var(--tappr-bg-soft);
}
.btn-icon-sm {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

/* Button-Gruppe */
.btn-group {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
}