/* Every clickable button is a pill. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.1s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn[disabled],
.btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-sm { height: 34px; padding: 0 14px; font-size: 14px; }
.btn-md { height: 42px; padding: 0 18px; font-size: 15px; }
.btn-lg { height: 52px; padding: 0 24px; font-size: 16px; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--turf);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--turf-strong); color: #FFFFFF; }

.btn-dark {
  background: var(--hedge);
  color: var(--on-dark);
}
.btn-dark:hover { background: var(--hedge-deep); color: var(--on-dark); }

.btn-light {
  background: #FFFFFF;
  color: #1F4B3C;
}
.btn-light:hover { background: #E4F5EC; color: #1F4B3C; }

.btn-ghost {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--card); border-color: var(--loam-soft); color: var(--ink); }

.btn-soft {
  background: var(--sprout);
  color: var(--turf-ink);
}
.btn-soft:hover { background: var(--sprout-strong); color: var(--turf-ink); }

.btn-danger {
  background: var(--danger);
  color: #FFFFFF;
}
.btn-danger:hover { background: var(--danger-ink); color: #FFFFFF; }

.btn-danger-ghost {
  background: transparent;
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger-ink);
}
.btn-danger-ghost:hover { background: var(--danger-soft); color: var(--danger-ink); }

.btn-text {
  background: none;
  color: var(--loam);
  padding-left: 6px;
  padding-right: 6px;
}
.btn-text:hover { color: var(--ink); }

.btn .fa-spinner { animation: btn-spin 0.9s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }