.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.button--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.button--primary:hover { background: var(--btn-primary-bg-hover); }
.button--outline { border-color: currentColor; background: transparent; }
.button--outline:hover { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.button--ghost { border-color: var(--color-border-dark); color: inherit; }
.button--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }