/* Type scale. Mobile values on :root, desktop values swapped in at 992px (the source's lg breakpoint). */
:root {
  --text-h1: 3rem;         /* 48px */
  --text-h2: 2.75rem;      /* 44px */
  --text-h3: 2rem;         /* 32px */
  --text-h4: 1.5rem;       /* 24px */
  --text-h5: 1.25rem;      /* 20px */
  --text-h6: 1.125rem;     /* 18px */
  --text-large: 1.125rem;  /* 18px */
  --text-medium: 1.0625rem;/* 17px */
  /* Body copy on a phone. The delivered scale stepped this DOWN from the desktop
     18px to 14px, which is backwards: a phone is held further from the eye than a
     laptop and has less of the page in view. 16px is the floor at which running
     text stays comfortable, and the point below which iOS zooms a focused input. */
  --text-regular: 1rem;    /* 16px */
  --text-small: 0.8125rem; /* 13px */
  --text-tiny: 0.6875rem;  /* 11px */

  --text-h1-line-height: 1.1;
  --text-h2-line-height: 1.2;
  --text-h3-line-height: 1.2;
  --text-h4-line-height: 1.3;
  --text-h5-line-height: 1.3;
  --text-h6-line-height: 1.4;
  --text-body-line-height: 1.5;

  --heading-letter-spacing: -0.01em;
}

@media (min-width: 992px) {
  :root {
    --text-h1: 5.25rem;      /* 84px */
    --text-h2: 3.75rem;      /* 60px */
    --text-h3: 3rem;         /* 48px */
    --text-h4: 2.5rem;       /* 40px */
    --text-h5: 2rem;         /* 32px */
    --text-h6: 1.625rem;     /* 26px */
    --text-large: 1.625rem;  /* 26px */
    --text-medium: 1.25rem;  /* 20px */
    --text-regular: 1.125rem;/* 18px */
    --text-small: 1rem;      /* 16px */
    --text-tiny: 0.75rem;    /* 12px */
  }
}