.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  white-space: nowrap;
  position: relative;
  border: none;
}

.btn--primary {
  background: var(--color-accent-emerald);
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: #059669;
}

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

.btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 2px solid var(--color-accent-emerald);
}

.btn--secondary:hover {
  background: var(--color-accent-emerald);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

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

.btn--large {
  padding: 1.125rem 2.5rem;
  font-size: 1.0625rem;
}

.btn--small,
.btn--sm {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
}

@media (max-width: 767px) {
  .btn {
    width: 100%;
  }
}