.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border-radius: var(--hh-radius-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--hh-focus);
}
.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--hh-primary);
  color: color-mix(in srgb, var(--hh-bg) 20%, black);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--hh-primary) 88%, white);
}

.btn-ghost {
  background: transparent;
  color: var(--hh-text);
  border-color: color-mix(in srgb, var(--hh-text) 18%, transparent);
}
.btn-ghost:hover {
  background: color-mix(in srgb, var(--hh-text) 8%, transparent);
}

.btn-accent {
  background: var(--hh-accent);
  color: white;
}
.btn-accent:hover {
  background: color-mix(in srgb, var(--hh-accent) 88%, white);
}