.btn {
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  display: inline-flex;
}
.btn:hover {
  cursor: pointer;
}

.btn-primary {
  color: #ffffff;
  background-color: hsl(var(--primary-500));
}

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

.btn-alternative {
  color: #1f2937;
  background-color: hsl(var(--secondary-500));
}

.btn-alternative:hover {
  background-color: var(--secondary-dark-1);
  color: #fff;
}

.btn-sm {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
}

.btn-md {
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
}

.btn-lg {
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
}