Typography

  --font-family-base: var(--font-family-primary);
  --font-size-base: var(--font-size-10);
  --font-weight-base: var(--font-weight-regular);    
  --line-height-base: var(--line-height-10);
  --letter-spacing-base: var(--letter-spacing-10);

  --font-family-primary: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
  --font-family-secondary: var(--font-family-primary);
  --font-family-code: "Menlo, Courier, monospace"

  --font-size-1:  6rem;
  --font-size-2:  5rem;
  --font-size-3:  4rem;
  --font-size-4:  3rem;
  --font-size-5:  2.5rem;
  --font-size-6:  2rem;
  --font-size-7:  1.5rem;
  --font-size-8:  1.25rem;
  --font-size-9:  1.125rem;
  --font-size-10: 1rem;
  --font-size-11: .875rem;
  --font-size-12: .75rem;

--line-height-ratio: 1.4;

--line-height-1:  calc(var(--font-size-1) * var(--line-height-ratio));
--line-height-2:  calc(var(--font-size-2) * var(--line-height-ratio));
--line-height-3:  calc(var(--font-size-3) * var(--line-height-ratio));
--line-height-4:  calc(var(--font-size-4) * var(--line-height-ratio));
--line-height-5:  calc(var(--font-size-5) * var(--line-height-ratio));
--line-height-6:  calc(var(--font-size-6) * var(--line-height-ratio));
--line-height-7:  calc(var(--font-size-7) * var(--line-height-ratio));
--line-height-8:  calc(var(--font-size-8) * var(--line-height-ratio));
--line-height-9:  calc(var(--font-size-9) * var(--line-height-ratio));
--line-height-10: calc(var(--font-size-10) * var(--line-height-ratio));
--line-height-11: calc(var(--font-size-11) * var(--line-height-ratio));
--line-height-12: calc(var(--font-size-12) * var(--line-height-ratio));
--line-height-13: calc(var(--font-size-13) * var(--line-height-ratio));
--line-height-14: calc(var(--font-size-14) * var(--line-height-ratio));