/**
 * @file
 * The variables.
 *
 * It includes styles variables for colors.
 */

/**
 * Global variables
 */


:root {

  /** Colors **/
  --color-primary--1: #141B4D;
  --color-primary--2: #1C3775;
  --color-primary--3: #98B2DD;
  --color-primary--4: #C1D1EB;
  --color-primary--5: #1A1F5B;

  --color-secondary--1: #FC6100;
  /* --color-tertiary--1: ; */

  --color-neutral--1: #3B3B3B;
  /* --color-neutral--2: #32343c; */
  /* --color-neutral--3: #CBCEDB; */
  /* --color-neutral--4: #fff; */

  --color-dark: #121212;
  --color-white: #ffffff;

  /** System **/

  --color-system--1: #888da0;
  --color-system--2: #32343c;
  --color-system--3: #CBCEDB;
  --color-system--4: #fff;

  /** Font Size **/

  --content-size: 1rem /* 16px */;
  --content-size-l: 1.375rem /* 22px */;

  --heading-size-xl: 2.5rem /* 40px */;
  --heading-size-l: 2rem /* 32px */;
  --heading-size-m: 2rem /* 32px */;
  --heading-size-s: 1.3125rem /* 21px */;
  --heading-size-xs: 1.375rem /* 22px */;

  /* --content-large: 1.2rem; */
  /* --content-medium: 1.2rem; */

  /* --heading-homepage: 2.5rem; */
  /* --content-large: 1rem; */
  /** Fonts **/

  --font-text: 'Roboto';
  --font-title: 'Oswald', sans-serif;

  --offset-user_logged_in:40px;

  /* --px160-percent: 8.408%; */
  --px160-percent: calc(8000vw / 1920); /** dynamic spacing > 16px for 375px wide screen **/

}
@media (min-width: 900px) {
  :root {
    --heading-size-xl: 4.188rem ;
    --heading-size-l: 2.375rem ;
    --heading-size-m: 2rem ;
    --heading-size-s: 1.25rem ;
    --heading-size-xs: 1rem ;

    --heading-homepage: clamp(3.125rem, 2.1739rem + 1.5217vw, 4rem); /* 50px for 1000px wide, 64px for 1920px wide */
    --content-large: clamp(1rem, 0.1667rem + 1.3333vw, 1.5rem);

    --px160-percent: calc(10000vw / 1920); /** dynamic padding > 50px for 900px wide screen **/
  }
}

@media (min-width: 1300px) {
  :root {
      --px160-percent: calc(16000vw / 1920); /** dynamic padding > 160px for 1920px wide screen **/
  }
}
@media (min-width: 1921px) {
  :root {
      --px160-percent: 160px;
  }
}