:root{
  --btn-font-family:var(--font-family-body);
  --btn-font-size:var(--type-size-button);
  --btn-font-size-hero:var(--type-size-button-hero);
  --btn-font-weight:var(--type-weight-body-medium);
  --btn-letter-spacing:var(--tracking-button);
  --btn-text-transform:uppercase;
  --btn-gap:0.65rem;
  --btn-gap-hero:0.75rem;
  --btn-padding-outline:0.8rem 1.75rem;
  --btn-padding-filled:0.9rem 2rem;
  --btn-padding-hero:0.85rem 1.75rem;
  --btn-transition-base:background .3s,color .3s,transform .3s,border-color .3s;
}

.btn,
.btn-outline,
.btn-filled,
.hero-cta,
.newsletter-btn{
  font-family:var(--btn-font-family);
  font-weight:var(--btn-font-weight);
  letter-spacing:var(--btn-letter-spacing);
  text-transform:var(--btn-text-transform);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--btn-gap);
  text-decoration:none;
  transition:var(--btn-transition-base);
}

.btn--outline-light{
  color:var(--ivory);
  border:1px solid rgba(245,241,234,.35);
}

.btn--outline-dark{
  color:var(--charcoal);
  border:1px solid rgba(17,17,17,.35);
}

.btn--filled-accent{
  background:var(--accent);
  color:var(--ivory);
  border:1px solid var(--accent);
}