:root {

  /* Fonts */
  --bs-font-sans-serif: "franklin-gothic-atf", sans-serif;
  --bs-font-monospace: "franklin-gothic-atf", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);

  /* Body - Mobile (default) */
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.4;
  --bs-body-font-weight: 400;

  /* Headings - Mobile (default) */
  --bs-h1-font-size: 24px;
  --bs-h1-line-height: 1.25;
  --bs-h1-font-weight: 500;

  --bs-h2-font-size: 18px;
  --bs-h2-line-height: 22px;
  --bs-h2-font-weight: 500;

  --bs-h3-font-size: 16px;
  --bs-h3-line-height: 1.4;
  --bs-h3-font-weight: 700;

  --bs-h4-font-size: 16px;
  --bs-h4-line-height: 1.4;
  --bs-h4-font-weight: 700;

  /* Letter Spacing (Mobile) */
  --bs-letter-spacing-h1: -0.03em;
  --bs-letter-spacing-h2: -0.03em;
  --bs-letter-spacing-h3: 0;
  --bs-letter-spacing-h4: 0;
  --bs-letter-spacing-body: 0;

  /* Paragraphs (Mobile) */
  --bs-font-size-p-small: 11px;
  --bs-line-height-p-small: 1.4;
  --bs-line-height-p-large: 1.5;

  /* Navigation (Mobile) */
  --bs-nav-font-size: 16px;
  --bs-nav-font-weight: 500;
  --bs-nav-line-height: 1.4;
  --bs-nav-letter-spacing: 0;

  /* CTA Button (Mobile) */
  --bs-btn-font-size: 14px;
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 1.4;
  --bs-btn-letter-spacing: 0;

  /* Form Input (Mobile) */
  --bs-input-font-size: 16px;
  --bs-input-font-weight: 400;
  --bs-input-line-height: 1.4;
  --bs-input-letter-spacing: 0;

  /* Navy shades */
  --navy-10: #08203F;
  --navy-20: #1A3E6F;
  --navy-40: #768CAA;
  --navy-60: #C5D0DF;
  --navy-80: #D1E0F2;
  --navy-90: #D1E0F2;
  --navy-100: #F0F5FB;
  
  /* Other */
  --blue: #6496CF;
  --gray-10: #323232;
  --gray-20: #797776;
  --gray-50: #C7C7C7;
  --red: #D41612;
  --white: #FFFFFF;
  --black: #000000;
}

/* Typography - Desktop (min-width: 992px) */
@media (min-width: 992px) {
  :root {
    /* Bootstrap Body Typography - Desktop */
    --bs-body-font-size: 16px;
    --bs-body-line-height: 1.4;

    /* Bootstrap Headings - Desktop */
    --bs-h1-font-size: 30px;
    --bs-h1-line-height: 1.25;

    --bs-h2-font-size: 26px;
    --bs-h2-line-height: 1.25;

    --bs-h3-font-size: 20px;
    --bs-h3-font-weight: 500;
    --bs-h3-line-height: 1.5;

    --bs-h4-font-size: 16px;
    --bs-h4-line-height: 1.4;

    /* Letter Spacing (Desktop) */
    --bs-letter-spacing-h1: 0;
    --bs-letter-spacing-h2: -0.03em;
    --bs-letter-spacing-h3: 0;
    --bs-letter-spacing-h4: 0;

    /* Paragraphs (Desktop) */
    --bs-font-size-p-small: 14px;
    --bs-line-height-p-small: 1.4;
    --bs-font-size-p-large: 20px;

    /* Navigation (Desktop) */
    --bs-nav-font-size: 12px;
    --bs-nav-line-height: 1.6;
    --bs-nav-letter-spacing: 0.03em;

    /* CTA Button (Desktop) */
    --bs-btn-font-size: 16px;
  }
}

h1, .h1 {
  font-size: var(--bs-h1-font-size);
  font-weight: var(--bs-h1-font-weight);
  line-height: var(--bs-h1-line-height);
  letter-spacing: var(--bs-letter-spacing-h1);
}

h2, .h2 {
  font-size: var(--bs-h2-font-size);
  font-weight: var(--bs-h2-font-weight);
  line-height: var(--bs-h2-line-height);
  letter-spacing: var(--bs-letter-spacing-h2);
}

h3, .h3 {
  font-size: var(--bs-h3-font-size);
  font-weight: var(--bs-h3-font-weight);
  line-height: var(--bs-h3-line-height);
  letter-spacing: var(--bs-letter-spacing-h3);
}

h4, .h4 {
  font-size: var(--bs-h4-font-size);
  font-weight: var(--bs-h4-font-weight);
  line-height: var(--bs-h4-line-height);
  letter-spacing: var(--bs-letter-spacing-h4);
}

.body-large {
  font-size: var(--bs-font-size-p-large);
  line-height: var(--bs-line-height-p-large);
}

.body-small {
  font-size: var(--bs-font-size-p-small);
  line-height: var(--bs-line-height-p-small);
}