.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1;
  padding-block: var(--space-3);
  padding-inline: var(--space-6);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}

.btn--sm {
  font-size: var(--font-size-xs);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
}

.btn--lg {
  font-size: var(--font-size-base);
  padding-block: var(--space-4);
  padding-inline: var(--space-8);
}

.btn--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-gold);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn--primary:active {
  background-color: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
}

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

.btn--secondary:hover {
  border-color: var(--color-text-primary);
  background-color: var(--color-bg-subtle);
}

.btn--secondary:active {
  background-color: var(--color-neutral-100);
}

.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

.btn--ghost:hover {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.btn--ghost:active {
  background-color: var(--color-neutral-100);
}

.btn--inverse {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-black);
}

.btn--inverse:hover {
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-100);
}

.btn--inverse:active {
  background-color: var(--color-neutral-200);
  border-color: var(--color-neutral-200);
}

.btn--outline-gold {
  background-color: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--outline-gold:hover {
  background-color: var(--color-accent);
  color: var(--color-text-on-gold);
}

.btn--outline-gold:active {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-text-on-gold);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--icon {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  aspect-ratio: 1;
  flex-shrink: 0;
}

.btn--icon.btn--sm {
  padding: var(--space-2);
}

.btn--icon.btn--lg {
  padding: var(--space-4);
}

.btn__icon {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
}

.btn__icon--lg {
  width: var(--space-5);
  height: var(--space-5);
}

.btn-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.btn-group--center {
  justify-content: center;
}

.btn-group--col {
  flex-direction: column;
  align-items: stretch;
}

.btn-group--col .btn {
  justify-content: center;
}