/* ============================================================
   BUTTONS — SM style: pill shape, near-black → red on hover
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.6875rem;  /* 11px — SM uses small uppercase */
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: var(--radius-full);  /* pill — SM nav-btn style */
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background   var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color        var(--dur-fast) var(--ease-out),
    transform    var(--dur-normal) var(--ease-out),
    box-shadow   var(--dur-normal) var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
}

/* Sizes */
.btn--sm  { padding: 10px 20px; }
.btn--md  { padding: 14px 32px; }
.btn--lg  { padding: 16px 40px; font-size: 0.75rem; }
.btn--full { width: 100%; }

/* --- Primary: near-black → red on hover (SM nav-btn pattern) --- */
.btn--primary {
  background: var(--color-bg-dark);
  color: #ffffff;
  border-color: var(--color-bg-dark);
}

.btn--primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.22);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn--primary:disabled {
  background: var(--color-text-muted);
  border-color: var(--color-text-muted);
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

/* Loading state */
.btn--primary.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.btn--primary.is-loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: var(--radius-full);
  animation: btn-spin 600ms linear infinite;
}

/* --- Secondary / Ghost --- */
.btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.btn--secondary:hover {
  background: var(--color-bg-overlay);
  border-color: var(--color-text-primary);
  transform: translateY(-1px);
}

.btn--secondary:active { transform: translateY(0); }

/* --- Text link --- */
.btn--text {
  background: transparent;
  color: var(--color-accent);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  letter-spacing: var(--tracking-wide);
}

.btn--text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--dur-normal) var(--ease-out);
}
.btn--text:hover::after { width: 100%; }

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}