:root {
  --font-body: "Instrument Sans", "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

html {
  font-size: 16px;
}

body,
button,
input,
select,
textarea,
footer,
footer p,
footer span,
footer a,
footer li,
.navbar,
.nav-link,
.card,
.btn,
.badge,
.form-control {
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.hero-title,
.title,
.section-title,
.card-title,
.display-1,
.display-2,
.display-3,
.display-4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

p,
li,
.lead,
.content,
.card-text {
  line-height: 1.7;
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}

.btn,
.badge,
.nav-link {
  font-weight: 500;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer .title,
footer .section-title,
footer .navbar-brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}