.hm-button {
  display: inline-block;
  padding: 1rem 2.5rem;
  border-radius: var(--radius-lg);
  font-family: var(--font-body-md);
  font-weight: 700;
  text-align: center;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  cursor: pointer;
}

.hm-button--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hm-button--primary:hover {
  background-color: #000;
  color: #fff;
}

.hm-button--secondary {
  border: 1px solid var(--color-outline);
  background-color: transparent;
  color: inherit;
}

.hm-button--secondary:hover {
  background-color: #000;
  color: #fff;
}