.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--t-slow),
    color var(--t-slow),
    transform var(--t-bounce),
    border-color var(--t-base);
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-primary-container);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background: var(--color-graphite);
  transform: translateY(-2px);
}

.btn--dark {
  background: var(--color-on-background);
  color: var(--color-on-primary);
}

.btn--dark:hover {
  background: var(--color-brass);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  border: var(--border-thin);
  color: var(--color-on-surface);
}

.btn--ghost:hover {
  border-color: var(--color-outline);
  transform: translateY(-2px);
}

.btn--outline-brass {
  background: transparent;
  border: 1px solid var(--color-brass);
  color: var(--color-brass);
}

.btn--outline-brass:hover {
  background: var(--color-brass);
  color: var(--color-graphite);
  transform: translateY(-2px);
}

.btn--gold {
  background: linear-gradient(135deg, #dcc96e 0%, #b5a642 48%, #9a8835 100%);
  color: #1a1c1c;
  font-weight: 600;
}

.btn--gold:hover {
  background: linear-gradient(135deg, #ead880 0%, #c4b04c 48%, #a89340 100%);
  transform: translateY(-2px);
}

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

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

@media (min-width: 768px) {
  .btn--lg {
    padding: var(--space-4) 2.25rem;
  }
}