:root {
  /* Site Fonts */
  --siteFont: Helvetica Neue, Helvetica, Arial, sans-serif;
  --siteFont1: 'Open Sans'; /* sans-serif */
  --siteFont2: 'Proxima Nova'; /* sans-serif */
  --siteFont3: 'Proxima Nova Condensed'; /* sans-serif */
  --siteFont4: 'Allura'; /* cursive */

  /* ADMIN COLORS */
  --primary: hsl(var(--siteColor1)); /* Dark Teal */
  --secondary: hsl(var(--siteColor2)); /* Golden Yellow */

  /* 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);

  /* Border Radius Defaults */
  --borderRadius: 1.5625rem; /* Global Radius for most if not all things (25px) */
  --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%));

  /* 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; /* 1170 px */
  --sidebarWidth: 23.4375rem; /* 375px */
  --mainContainerWithSidebar: 49.6875rem;
}