.btn,
.btn-primary,
.btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-5);
  border: 1.5px solid var(--c-accent);
  border-radius: var(--r-pill);
  background: var(--c-accent);
  background-image: var(--grad-accent);
  color: var(--c-text-inverse);
  box-shadow: 0 4px 14px rgba(var(--c-accent-rgb), 0.22);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast), color var(--t-fast),
    border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.btn:active,
.btn-primary:active,
.btn--primary:active {
  transform: scale(0.97);
}

.btn:hover,
.btn:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible,
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--c-accent-dark);
  background-image: none;
  border-color: var(--c-accent-dark);
  color: var(--c-text-inverse);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--c-accent-rgb), 0.36);
}

.btn--ghost {
  background: rgb(255 255 255 / 0.72);
  background-image: none;
  color: var(--c-text);
  border-color: var(--c-border-strong);
  box-shadow: none;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--c-surface);
  background-image: none;
  border-color: var(--c-accent);
  color: var(--c-text);
  box-shadow: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:hover,
  .btn:active,
  .btn-primary,
  .btn--primary,
  .btn--ghost {
    transition: none;
    transform: none;
  }
}