:root {
  --bs-ink: #0A1E2B;
  --bs-aqua: #3ED9C0;
  --bs-aqua-dark: #0D8F7C;
  --bs-paper: #F3F5F4;
  --bs-mist: #8DA3AD;

  --bs-font: "Archivo", Arial, sans-serif;
  --bs-display-weight: 900;
  --bs-body-weight: 400;
  --bs-semibold-weight: 600;
  --bs-bold-weight: 700;

  --bs-radius-small: 2px;
  --bs-radius-card: 4px;

  --bs-container: 1240px;
  --bs-gutter: clamp(20px, 4vw, 64px);

  --bs-display-size: clamp(3.25rem, 8vw, 8rem);
  --bs-h1-size: clamp(2.75rem, 6vw, 6rem);
  --bs-h2-size: clamp(2rem, 4vw, 4rem);
  --bs-body-size: 1rem;
  --bs-small-size: 0.8rem;
}

.bs-wordmark {
  font-family: var(--bs-font);
  font-weight: var(--bs-display-weight);
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.bs-strapline {
  font-family: var(--bs-font);
  font-weight: var(--bs-bold-weight);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.bs-ink { color: var(--bs-ink); }
.bs-aqua { color: var(--bs-aqua); }
.bs-paper { color: var(--bs-paper); }
.bs-muted { color: var(--bs-mist); }

.bs-bg-ink { background: var(--bs-ink); }
.bs-bg-paper { background: var(--bs-paper); }

.bs-button-primary {
  background: var(--bs-aqua);
  color: var(--bs-ink);
  border: 1px solid var(--bs-aqua);
  border-radius: 2px;
  font-family: var(--bs-font);
  font-weight: 700;
}

.bs-button-secondary {
  background: transparent;
  color: var(--bs-paper);
  border: 1px solid var(--bs-paper);
  border-radius: 2px;
  font-family: var(--bs-font);
  font-weight: 700;
}

.bs-rule {
  height: 2px;
  background: var(--bs-aqua);
  border: 0;
}