/* Button. Same name and variants as the Figma component. */
.button {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-button);
  border: 1px solid var(--color-brand-blue);
  font-family: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.button--primary { background: var(--color-brand-blue); color: var(--color-surface); }
.button--primary:hover { background: var(--color-brand-blue-dark); }

.button--secondary { background: var(--color-surface); color: var(--color-brand-blue); }
.button--secondary:hover { background: var(--color-brand-blue-tint); }