/*// The following custom property naming conventions are inspired by*/
/*// "Naming Tokens in Design Systems" by Nathan Curtis*/
/*// https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676*/
/*// These default values are intended to be mofified and extended to suite the needs*/
/*// of an individula project.*/
:root {
  /*
       Font: Families
     */
  --font-family-mono: monospace;
  --font-family-sans: "Montserrat", sans-serif;
  --font-family-serif: "Domine", serif;
  --font-family-body: var(--font-family-serif);
  --font-family-heading: var(--font-family-sans);
  --font-family-interface: var(--font-family-sans);
  /*Campaign Specific Font Variable*/
  --font-family-campaign: "arteria-std-compress", sans-serif;
  /*
       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-heading-tiny: 1rem;
  --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-small: 1.125rem;
  --font-size-title: 1.25rem;
  --font-size-title-large: 1.75rem;
  --font-size-title-huge: 1.875rem;
  --font-size-title-macro: 2rem;
  /* Camaign heading sizes */
  --font-size-campaign-h1: 2.625rem;
  --font-size-campaign-h2: 2rem;
  --font-line-height-campaign-h1: 119%;
  --font-line-height-campaign-h2: 131%;
  /*
       Font: Line-height;
     */
  --font-line-height-large: 1.875;
  --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;
  --font-weight-bold-heading: 800;
}

@media (min-width: 600px) {
  :root {
    --font-size-body-small: 1rem;
    --font-size-body: 1.125rem;
    --font-size-body-large: 1.25rem;
    --font-size-body-huge: 1.5rem;
    --font-size-body-macro: 2.25rem;
    --font-size-heading-tiny: 1rem;
    --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-heading-large: 1.625rem;
    --font-size-heading-huge: 2.5rem;
    --font-size-title: 1.5rem;
    --font-size-title-macro: 3.75rem;
    --font-size-title-huge: 3.375rem;
    /* Camaign heading sizes */
    --font-size-campaign-h1: 5rem;
    --font-size-campaign-h2: 3.75rem;
    --font-line-height-campaign-h1: 112%;
    --font-line-height-campaign-h2: 117%;
  }
}
@media (min-width: 992px) {
  :root {
    --font-size-title: 2rem;
    --font-size-title-huge: 4.5rem;
    --font-size-heading-large: 1.875rem;
    --font-size-heading-huge: 3rem;
    /* Camaign heading sizes */
    --font-size-campaign-h1: 6.875rem;
    --font-size-campaign-h2: 4.5rem;
    --font-line-height-campaign-h1: 116%;
    --font-line-height-campaign-h2: 111%;
  }
}
@media (min-width: 1440px) {
  :root {
    /* Camaign heading sizes */
    --font-size-campaign-h1: 7.5rem;
    --font-size-campaign-h2: 5.5rem;
    --font-line-height-campaign-h1: 117%;
    --font-line-height-campaign-h2: 114%;
  }
}