.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  min-height: 48px;
}

.btn::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  top: 50%;
  left: 50%;
  transform: scale(0);
  opacity: 0;
}

.btn:active::after { animation: ripple 0.6s ease-out; }

@keyframes ripple {
  from { transform: scale(0); opacity: 0.5; }
  to { transform: scale(4); opacity: 0; }
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-500) 100%);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

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

.btn-secondary {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-danger {
  background: linear-gradient(135deg, var(--terra-cotta) 0%, #6d2e22 100%);
  color: var(--text-inverse);
}

.btn-danger:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-outline {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--stone);
  border-bottom: 2px solid var(--gold-300);
}

.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold-800);
  background: var(--gold-50);
  box-shadow: var(--shadow-gold);
}

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

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

.btn-gold {
  background: var(--bg-elevated);
  color: var(--gold-800);
  border: 1px solid var(--gold-200);
}

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

.btn-block { width: 100%; }

.btn-sm {
  padding: 8px 16px;
  font-size: 0.82rem;
  min-height: 36px;
}