/*** eyefinity css variables ***/

:root {

  /*** base css ***/
  --base-font-family: "Open Sans", Helvetica, Arial, "sans-serif";
  --base-header-font-family: 'Nunito Sans', sans-serif;
  --base-font-weight: 400;

  --base-text-font-size: 1rem;
  --base-text-line-height: 1.5rem;

  --base-text-large-font-size: 1.3rem;
  --base-text-large-line-height: 2rem;

  --base-h1-font-bold: 800;
  --base-h1-font-size: 2.5rem;
  --base-h1-font-line-height: 3.75rem;

  --base-h2-font-bold: 700;
  --base-h2-font-size: 2.25rem;
  --base-h2-font-line-height: 3.375rem;

  --base-h3-font-bold: 700;
  --base-h3-font-size: 2rem;
  --base-h3-font-line-height: 3rem;

  --base-h4-font-bold: 700;
  --base-h4-font-size: 1.375rem;
  --base-h4-font-line-height: 2.063rem;

  --base-small-headers-font-bold: 300;
  --base-paragraph-size: 1rem;
  --base-paragraph-line-height: 1.75;
  --base-body-background: #fff;
  --text-letter-spacing: 0.12px;
  --header-letter-spacing: 0.5px;

  --row-class-width: 70rem;

  --single-gutter-padding: 0.9375rem;
  --double-gutter-padding: calc(var(--single-gutter-padding)*2);

  --standard-component-padding: 1rem;
  --large-component-padding: 2rem;

  --small-margin-bottom: 1.5rem;
  --medium-margin-bottom: 2.5rem;
  --large-margin-bottom: 3.5rem;

  /*** header tablet css ***/
  --h1-tablet-font-size: 2.25rem;
  --h1-tablet-line-height: 3.375rem;

  --h2-tablet-font-size: 2rem;
  --h2-tablet-line-height: 3rem;

  --h3-tablet-font-size: 1.75rem;
  --h3-tablet-line-height: 2.625rem;

  --h4-tablet-font-size: 1.25rem;
  --h4-tablet-line-height: 1.875rem;

  /*** header mobile css ***/
  --h1-mobile-font-size: 2rem;
  --h1-mobile-line-height: 2.75rem;

  --h2-mobile-font-size: 1.75rem;
  --h2-mobile-line-height: 2.625rem;

  --h3-mobile-font-size: 1.375rem;
  --h3-mobile-line-height: 2.063rem;

  --h4-mobile-font-size: 1.125rem;
  --h4-mobile-line-height: 1.688rem;

  /*--h1-font-size: var(--h1-mobile-font-size);
    --h1-line-height: var(--h1-mobile-line-height);
  
    --h2-font-size: var(--h2-mobile-font-size);
    --h2-line-height: var(--h2-mobile-line-height);
  
    --h3-font-size: var(--h3-mobile-font-size);
    --h3-line-height: var(--h3-mobile-line-height);
  
    --h4-font-size: var(--h4-mobile-font-size);
    --h4-line-height: var(--h4-mobile-line-height);*/

  --tablet-multiplier: 1.125;
  --desktop-multiplier: 1.25;

  /*** colors ***/
  --text-color: #0B2335;
  --inverse-text-color: #FFF;
  --primary-color: #3A60FF;
  --secondary-color: #FFF;

  --light-background: #F6F6F6;
  /*** gray bkgd for LR spreads ***/
  --dark-background: #004761;
  /*** VSP Blue ***/

  --section-color-bkgd1: #EFEFEF;
  --section-text-color-bkgd1: #0B2335;

  --section-color-bkgd2: #B4DBF7;
  --section-text-color-bkgd2: #0B2335;

  --section-color-bkgd3: #3A60FF;
  --section-text-color-bkgd3: #fff;

  --section-color-bkgd4: #0B2335;
  --section-text-color-bkgd4: #fff;

  --section-white-background: #fff;
  --section-text-color-white: #0B2335;

  --section-link-default: #3A60FF;
  --section-link-default-visited: #8B14A4;
  --section-link-default-hover: #241ED6;

  --section-link-inverse: #7BE0FC;
  --section-link-inverse-visited: #D8C9EF;
  --section-link-inverse-hover: #FFFFFF;

  --link-color: #3A60FF;
  --link-hover-color: #241ED6;
  --link-visited-color: #9957CB;
  --link-text-decoration: underline;

  --highliteColor1: #00b6f1;
  --highliteColor2: #003046;
  --highliteColor3: #9fcc3b;
  --highliteColor4: #f58220;

  /*Rebranding 2024*/
  --highliteColor6: #7be0fc;

  --dark-teal-background: #004761;
  --medium-teal-background: #006282;
  --vsp-teal-background: #00C2C0;
  --light-teal-background: #8EF0EF;

  --dark-green-background: #035b44;
  --medium-green-background: #18721A;
  --vsp-green-background: #7FC622;
  --light-green-background: #C8EE87;

  --dark-violet-background: #640E87;
  --medium-violet-background: #8B14A4;
  --vsp-violet-background: #E24EF6;
  --light-violet-background: #F495FF;

  --vsp-premier-orange: #ef6e0b;
  --medium-orange: #ff9f00;
  --vsp-yellow: #ffc300;
  --light-yellow: #ffe572;

  --dark-red-background: #9f0000;
  --visionworks-red-background: #e62003;
  --orange-red-background: #ff4f00;

  --light-brown-background: #b45300;
  --dark-brown-background: #663300;

  --gray-1-background: #333333;
  --gray-2-background: #595959;
  --gray-3-background: #8c8c8c;
  --gray-4-background: #adadad;
  --gray-5-background: #d6d6d6;
  --gray-6-background: #f6f6f6;

  --sideBarBorderColor: #979797;

  --primary-hover-color: #004471;
  --body-background: #fff;
  --light-blue-color: #00b6f1;
  --button-text-color: #fff;
  --red-text-highlite: #9f0000;
  --standard-gutter: 0.9375rem;
  --double-gutter: 1.875rem;
  --background-light-blue: #f2f7fa;

}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  :root {

    --base-paragraph-size: calc(var(--base-paragraph-size) * var(--tablet-multiplier));

    /*** header css ***/
    --h1-font-size: calc(var(--h1-mobile-font-size) * var(--tablet-multiplier));
    --h1-line-height: calc(var(--h1-mobile-line-height) * var(--tablet-multiplier));

    --h2-font-size: calc(var(--h2-mobile-font-size) * var(--tablet-multiplier));
    --h2-line-height: calc(var(--h2-mobile-line-height) * var(--tablet-multiplier));

    --h3-font-size: calc(var(--h3-mobile-font-size) * var(--tablet-multiplier));
    --h3-line-height: calc(var(--h3-mobile-line-height) * var(--tablet-multiplier));

    --h4-font-size: calc(var(--h4-mobile-font-size) * var(--tablet-multiplier));
    --h4-line-height: calc(var(--h4-mobile-line-height) * var(--tablet-multiplier));

  }
}

/* large and up */
@media screen and (min-width: 64em) {
  :root {

    --base-paragraph-size: calc(var(--base-paragraph-size) * var(--desktop-multiplier));

    /*** header css ***/
    --h1-font-size: calc(var(--h1-mobile-font-size) * var(--desktop-multiplier));
    --h1-line-height: calc(var(--h1-line-height) * var(--desktop-multiplier));

    --h2-font-size: calc(var(--h2-mobile-font-size) * var(--desktop-multiplier));
    --h2-line-height: calc(var(--h2-line-height) * var(--desktop-multiplier));

    --h3-font-size: calc(var(--h3-mobile-font-size) * var(--desktop-multiplier));
    --h3-line-height: calc(var(--h3-line-height) * var(--desktop-multiplier));

    --h4-font-size: calc(var(--h4-mobile-font-size) * var(--desktop-multiplier));
    --h4-line-height: calc(var(--h4-line-height) * var(--desktop-multiplier));

  }
}