button {
  border-radius: 8px;
  padding: 12px;

  font-family: Oxanium;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: calc(0.05 * 16px);
}

button.primary {
  background-color: var(--primary-50);
  border: 3px var(--primary-40) solid;
  color: #000126;
  outline: none;
}
button.primary:hover,
button.primary:focus-visible {
  background-color: var(--primary-30);
  border-color: var(--primary-20);
  cursor: pointer;
  outline: none;
}
button.primary:active {
  background-color: var(--primary-40);
  border-color: var(--primary-20);
  outline: none;
}

button.secondary {
  background-color: transparent;
  border: 3px var(--primary-50) solid;
  color: var(--fg);
  outline: none;
}
button.secondary:hover,
button.secondary:focus-visible {
  background-color: var(--primary-40);
  border-color: var(--primary-20);
  cursor: pointer;
  outline: none;
}
button.secondary:active {
  background-color: transparent;
  border-color: var(--primary-100);
  outline: none;
}