/* color variable  */
:root {
  /* Primary Brand Colors */
  --clr-primary: #2B818C;
  --clr-primary-dark: #264A53;
  --clr-primary-light: #57A4B5;
  /* Teal / Accent */
  --clr-teal: #2C828E;
  --clr-teal-dark: #296670;
  --clr-teal-deep: #1D4A52;
  /* Grays */
  --clr-gray-50: #FAFAFA;
  --clr-gray-100: #F5F5F5;
  --clr-gray-200: #E9EAEB;
  --clr-gray-300: #D5D7DA;
  --clr-gray-400: #A4A7AE;
  --clr-gray-500: #717680;
  --clr-gray-600: #58595B;
  --clr-gray-700: #535862;
  --clr-gray-800: #414651;
  --clr-gray-900: #333;

  /* Text & Neutral */
  --clr-black: #000;
  --clr-white: #fff;
  /* Reds / Alerts */
  --clr-error: #D92D20;
  --clr-error-light: #FDA29B;
  --clr-error-bg: #FFF4F3;
  --clr-error-dark: #b91c1c;
  
  /* Text Links */
  --clr-link: #2A6974;

  /* Font Sizes */
  --fs-xxs: 10px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-4xl: 30px;
  --fs-5xl: 36px;

  /* Font Weights */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;
  --fw-black: 900;

}

@media (max-width: 767px) {
  :root {
    --fs-sm: 12px;
    --fs-md: 12px;
    --fs-lg: 14px;
    --fs-xl: 16px;
    --fs-2xl: 18px;
    --fs-3xl: 20px;
    --fs-4xl: 22px;
    --fs-5xl: 28px;
  }
  h1 {
    font-size: 28px !important;
    line-height: 35px;
  }
  h2 {
    line-height: 28px !important;
  }
  h4 {line-height: 25px !important;}
  p, a, li {line-height: 20px !important;}
}

@media (max-width: 420px) {
  h1 {font-size: 20px !important; line-height: 30px !important;}
}