:root {
  /*
    Font: Families
  */
  --font-family-mono: monospace;
  --font-family-sans: sans-serif;
  --font-family-serif: serif;
  --font-family-body: var(--font-family-serif);
  --font-family-heading: var(--font-family-sans);
  --font-family-interface: var(--font-family-sans);
  /*
    Font: Sizes

    By default, all font-size declarations will be converted to rems
    via postCSS. Declerations for other properties will maintain their px units.
  */
  --font-size-body: 1rem;
  --font-size-body-small: 0.875rem;
  --font-size-body-large: 1.125rem;
  --font-size-body-huge: 1.25rem;
  --font-size-body-macro: 1.5rem;
  --font-size-description: 0.875rem;
  --font-size-heading-small: 1rem;
  --font-size-heading: 1.125rem;
  --font-size-heading-large: 1.25rem;
  --font-size-heading-huge: 1.375rem;
  --font-size-heading-macro: 3rem;
  --font-size-label: 0.875rem;
  --font-size-title-tiny: 1rem;
  --font-size-title-tiny-tight: 1rem;
  --font-size-title-small: 1.125rem;
  --font-size-title-larger: 1.5rem;
  --font-size-title: 1.5rem;
  --font-size-title-large: 1.6875rem;
  --font-size-title-huge: 1.875rem;
  --font-size-title-macro: 2.0625rem;
  /*
    Font: Line-height;
  */
  --font-line-height-loose: 1.5;
  --font-line-height: 1.3125;
  --font-line-height-tight: 1.125;
  /*
    Font: Weight
  */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-book: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

@media (min-width: 600px) {
  :root {
    --font-size-body: 1.125rem;
    --font-size-body-small: 1rem;
    --font-size-body: 18px;
    --font-size-body-large: 1.25rem;
    --font-size-body-huge: 1.5rem;
    --font-size-body-macro: 2.25rem;
    --font-size-heading-small: 1.125rem;
    --font-size-heading: 1.25rem;
    --font-size-heading-large: 1.5rem;
    --font-size-heading-huge: 2rem;
    --font-size-heading-macro: 4.5rem;
    --font-size-title-tiny: 1.25rem;
    --font-size-title-small: 1.5rem;
    --font-size-title-large: 2.5rem;
    --font-size-title-huge: 3rem;
  }
}

@media (min-width: 768px) {
  :root {
    --font-size-title-macro: 3.75rem;
    --font-size-title-huge: 3.375rem;
  }
}

@media (min-width: 992px) {
  :root {
    --font-size-title: 2.25rem;
    --font-size-title-macro: 3.75rem;
  }
}