:root {
  /* Site Fonts */
  --siteFont: var(--siteFont2), Helvetica Neue, Helvetica, Arial, sans-serif;
  --siteFont1: 'Montserrat'; /* sans-serif */
  --siteFont2: 'Lato'; /* sans-serif */
  --siteFont3: 'Raleway'; /* sans-serif */

  /* Site Scale */
  --siteScale: 16px; /* Keep as px value for all the other rem values to be based off of */

  /* Body Fonts */
  --bodyFontSize: 1rem;
  --bodyFont: var(--siteFont);

  /* Title Fonts - Desktop At Bottom */
  --titleFontSize1: 2.25rem;
  --titleFontSize2: 2rem;
  --titleFontSize3: 1.75rem;
  --titleFontSize4: 1.5rem;
  --titleFontSize5: 1.375rem;
  --titleFontSize6: 1.125rem;

  /* Border Radius Defaults */
  --borderRadius: 0.5rem; /* Global Radius for most if not all things (8px) */
  --borderRadiusXS: 0.5rem;
  --borderRadiusSM: 1rem;
  --borderRadiusMD: 2rem;
  --borderRadiusLG: 3rem;
  --borderRadiusXL: 4rem;
  --borderRadiusPill: 100vw;
  --borderRadiusCircle: 100rem;
  --borderRadiusCheckbox: 0.25rem;

  /* Drop Shadow Defaults */
  --dropShadow: 0 0 1.25rem hsla(var(--siteColor1), 0.15);
  --focusShadow: 0 0 0 0.125rem hsla(var(--siteColor1), 0.25);
  --focusShadowLight: 0 0 0 0.125rem hsla(var(--white), 0.25);
  --focusShadowDark: 0 0 0 0.125rem hsla(var(--black), 0.25);
  --dropShadowFilter: drop-shadow(0.0625rem 0.0625rem 0.125rem hsla(var(--black), 70%));
  --dropShadowFilterLight: drop-shadow(0.0625rem 0.0625rem 0.125rem hsla(var(--white), 70%));

  /* Button Drop Shadow */
  --btnShadow: 0 0 0 0.125rem hsla(var(--black), 0.5);
  --btnShadowWhite: 0 0 0 0.125rem hsla(var(--white), 0.5);
  --btnShadowBlack: 0 0 0 0.125rem hsla(var(--black), 0.5);
  --btnShadowColor1: 0 0 0 0.125rem hsla(var(--siteColor1), 0.5);
  --btnShadowColor2: 0 0 0 0.125rem hsla(var(--siteColor2), 0.5);
  --btnShadowColor3: 0 0 0 0.125rem hsla(var(--siteColor3), 0.5);
  --btnShadowColor4: 0 0 0 0.125rem hsla(var(--siteColor4), 0.5);
  --btnShadowColor5: 0 0 0 0.125rem hsla(var(--siteColor5), 0.5);
  --btnShadowColor6: 0 0 0 0.125rem hsla(var(--siteColor6), 0.5);

  /* Button Outline */
  --btnOutlineWhite: 0.0625rem solid hsl(var(--white));
  --btnOutlineBlack: 0.0625rem solid hsl(var(--black));
  --btnOutlineColor1: 0.0625rem solid hsl(var(--siteColor1));
  --btnOutlineColor2: 0.0625rem solid hsl(var(--siteColor2));
  --btnOutlineColor3: 0.0625rem solid hsl(var(--siteColor3));
  --btnOutlineColor4: 0.0625rem solid hsl(var(--siteColor4));
  --btnOutlineColor5: 0.0625rem solid hsl(var(--siteColor5));
  --btnOutlineColor6: 0.0625rem solid hsl(var(--siteColor6));

  /* Font Weight Defaults */
  --wUltraLight: 100;
  --wThin: 200;
  --wLight: 300;
  --wRegular: 400;
  --wMedium: 500;
  --wBold: 600;
  --wHeavy: 700;
  --wBlack: 800;
  --wExtraBlack: 900;

  /* Sup - Settings for Sup Text <sup> */
  --supFontSize: 60%;
  --supLineHeight: 125%;
  --supTop: -0.3125rem;

  /* Header Height - used by JS and CSS */
  --headerHeight: 9rem;

  /* Layout Sizing */
  --bsContainerWidth: 73.125rem; /* 1170px */
  --bsContainerWideWidth: 100rem; /* 1600px */
  --sidebarWidth: 23.4375rem; /* 375px */
  --mainContainerWithSidebar: 49.6875rem;

  /* ADMIN COLORS */
  --primary: hsl(var(--siteColor1));
  --secondary: hsl(var(--siteColor2));
}

/* Desktop */
@media (min-width: 1025px) {
  :root {
    --titleFontSize1: 3rem;
    --titleFontSize2: 2.75rem;
    --titleFontSize3: 2.5rem;
    --titleFontSize4: 2.25rem;
    --titleFontSize5: 2rem;
    --titleFontSize6: 1.75rem;
  }
}