@layer variables {
  :root {
    --rgb-blue: 52, 151, 183;
    --rgb-salmon: 231, 76, 56;
    --rgb-green: 177, 208, 42;
    
    --rgb-light-gray: 244, 244, 244;
    --rgb-dark-gray: 51, 51, 51;
    --primary-color: rgb(var(--rgb-blue));
    --secondary-color: rgb(var(--rgb-salmon));
    --highlight-color: rgb(var(--rgb-green));
    --color-background: rgb(var(--rgb-light-gray));
    --color-text: rgb(var(--rgb-dark-gray));
    
    --font-family: 'Montserrat', Sans-Serif;
    --font-family-subtext: 'Libre Baskerville', Serif;
    --font-size: 1rem;
    --font-size-xxxx-small: max(0.875rem, 50%);
    --font-size-xxx-small: max(0.9375rem, 60%);
    --font-size-xx-small: max(1rem, 65%);
    --font-size-x-small: max(1.0625rem, 75%);
    --font-size-small: 85%;
    --font-size-medium: 130%;
    --font-size-large: 140%;
    --font-size-x-large: 160%;
    --font-size-xx-large: 200%;
    --font-size-xxx-large: 300%;
    --line-height: normal;
    --space-neutral: 1.4em;
    --space-micro: 0.1em;
    --space-tiny: 0.25em;
    --space-small: 0.5em;
    --space-medium: 1em;
    --space-large: 2em;
    --space-x-large: 3em;
    --space-xx-large: 4em;
    --space-xxx-large: 8em;
    --space-xxxx-large: 16em;
    --space-safe-top: var(--space-xxx-large);
    --content-width: 916px;
    --z-index-nav:                  10;
    --z-index-nav-menu:             11;
    --z-index-nav-logo:             12;
    --z-index-footer:               20;
    --z-index-footer-background:    21;
    --z-index-footer-copy:          22;
    --z-index-admin-content:        60;
    --z-index-admin-content-scroll: 61;
    --z-index-flash:               100;
    --z-index-mobile-nav:         1000;

    --box-shadow-large: 0px 4px 20px rgba(var(--rgb-charcoal-gray), 0.5);
    --box-shadow-small: 0px 2px 5px rgba(var(--rgb-charcoal-gray), 0.5);
  }

  @media only screen and (max-width: 1191px) {
    :root {
      --content-width: 681px;
    }
  }
  
  @media only screen and (max-width: 974px) {
    :root {
      --content-width: calc(100vw - (25px * 2));
    }
  }
}
