@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/fraunces-variable.woff2") format("woff2");
}

:root {
  --bb-font-family: "Manrope", Arial, Helvetica, sans-serif;
  --bb-font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --bb-night: #1f1e17;
  --bb-night-elevated: #191812;
  --bb-forest: #4baf47;
  --bb-leaf: #c5ce38;
  --bb-harvest: #eec044;
  --bb-cream: #f7f6ef;
  --bb-cream-deep: #e4e2d7;
  --bb-white: #ffffff;
  --bb-error: #8f2d25;

  --bb-ink: var(--bb-night);
  --bb-ink-soft: #878680;
  --bb-text: var(--bb-white);
  --bb-text-soft: rgba(255, 255, 255, 0.76);
  --bb-text-muted: rgba(255, 255, 255, 0.57);
  --bb-line-dark: rgba(255, 255, 255, 0.2);
  --bb-line-light: rgba(31, 30, 23, 0.2);
  --bb-header-background: rgba(31, 30, 23, 0.94);
  --bb-overlay: rgba(31, 30, 23, 0.26);
  --bb-focus-ring: var(--bb-harvest);
  --bb-field-focus: rgba(238, 192, 68, 0.35);
  --bb-error-soft: rgba(143, 45, 37, 0.09);

  --bb-content: 82rem;
  --bb-page-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --bb-section-space: clamp(5rem, 10vw, 9rem);
  --bb-radius-small: 0.5rem;

  --bb-step--1: clamp(0.8rem, 0.75rem + 0.18vw, 0.92rem);
  --bb-step-0: clamp(1rem, 0.94rem + 0.24vw, 1.14rem);
  --bb-step-1: clamp(1.25rem, 1.08rem + 0.72vw, 1.72rem);
  --bb-step-2: clamp(1.75rem, 1.42rem + 1.2vw, 2.45rem);
  --bb-step-3: clamp(2.5rem, 1.7rem + 3vw, 4.9rem);
  --bb-step-4: clamp(3.4rem, 1.6rem + 7.5vw, 8.6rem);
}