/* 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(--ink);
  color: var(--bg-2);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--coral);
  border-color: var(--coral);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  background: var(--coral-2);
  border-color: var(--coral-2);
}

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

/* Tertiary — Link-Style */
.btn-tertiary {
  background: transparent;
  color: var(--ink);
  padding: 0;
  min-height: auto;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}
.btn-tertiary:hover {
  color: var(--coral);
}

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

/* 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(--red);
  color: var(--bg-2);
  border-color: var(--red);
}
.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(--ink-2);
}
.btn-icon:hover {
  background: var(--bg-3);
}
.btn-icon-sm {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

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