.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  border: var(--border-width) solid var(--interactive);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-button-l);
  font-weight: var(--fw-body-bold);
  line-height: var(--lh-button);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: none;
}

.button--primary {
  background: var(--interactive);
  color: var(--white);
}

.button--primary:hover {
  border-color: var(--interactive-hover);
  background: var(--interactive-hover);
}

.button--primary:active {
  border-color: var(--interactive-active);
  background: var(--interactive-active);
}

.button--secondary {
  background: var(--surface-card);
  color: var(--text-brand);
}

.button--secondary:hover {
  background: var(--surface-hover);
}