/*** base site css variables ***/

:root {

  /*** base css ***/
  --base-font-family: 'Open Sans', sans-serif;
  --base-header-font-family: 'Nunito Sans', sans-serif;
  --icon-font-family: "Font Awesome 5 Pro";
  --base-font-weight: 100;
  --base-h1-font-bold: 600;
  --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: 90rem;

  --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 css ***/
  --h1-mobile-font-size: 2rem;
  --h1-mobile-line-height: 1.5;

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

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

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

  --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; /*** VSP Blue ***/
  --button-background: #ccc;

  --light-background: #F2F5F7; /*** gray bkgd for LR spreads ***/
  --dark-background: #3A60FF; /*** 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: #9957CB;
  --section-link-default-hover: #241ED6;

  --section-link-inverse: #FFF;
  --section-link-inverse-visited: #D8C9EF;
  --section-link-inverse-hover: #B4DBF7;

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

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

}

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

  }
}