.btn {
  display: inline-block;
  background: var(--coral);
  color: white;
  font-family: var(--font-display);
  font-size: var(--text-base);
  padding: 0.55em var(--space-6);
  border-radius: var(--radius-md);
  text-decoration: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-btn);
  line-height: 1.4;
}

.btn:hover {
  background: var(--coral-dk);
}

.btn:active {
  box-shadow: 0 2px 0 var(--coral-dk), 0 3px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(2px);
}

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--coral);
  font-family: var(--font-display);
  font-size: var(--text-base);
  padding: 0.55em var(--space-6);
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 3px solid var(--coral);
  cursor: pointer;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.btn-outline:hover {
  background: var(--coral);
  color: white;
}

.btn-sm {
  font-size: var(--text-xs);
  padding: 0.35em var(--space-4);
}