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

/**
 * Global variables
 */

:root {

  /** Colors **/

  --color-primary--10: #04142F;
  --color-primary--9: #08285E;
  --color-primary--8: #0B3C8E;
  --color-primary--7: #0F50BD;
  --color-primary--6: #1364EC;
  --color-primary--5: #4283F0;
  --color-primary--4: #689CF3; /*THIS IS THE DEFAULT PRIMARY COLOR*/
  --color-primary--3: #A1C1F7;
  --color-primary--2: #D0E0FB;
  --color-primary--1: #F1F6FE;

  --color-secondary--10: #300903;
  --color-secondary--9: #601206;
  --color-secondary--8: #901B09;
  --color-secondary--7: #D3280D; /*THIS IS THE DEFAULT SECONDARY COLOR*/
  --color-secondary--6: #F02D0F;
  --color-secondary--5: #F3573F;
  --color-secondary--4: #F57966;
  --color-secondary--3: #F9AB9F;
  --color-secondary--2: #FCD5CF;
  --color-secondary--1: #FEF2F1;

  --color-neutral--10: #1A181B;
  --color-neutral--9: #343036;
  --color-neutral--8: #4E4950;
  --color-neutral--7: #736B76; /*THIS IS THE DEFAULT NEUTRAL COLOR*/
  --color-neutral--6: #827986;
  --color-neutral--5: #9B949E;
  --color-neutral--4: #AFA9B2;
  --color-neutral--3: #CDC9CF;
  --color-neutral--2: #E6E4E7;
  --color-neutral--1: #F8F7F8;
  --color-neutral--0: #FFFFFF;

  /** Grids **/

  --grid-small--1: 41px;
  --grid-small--2: 98px;
  --grid-small--3: 155px;
  --grid-small--4: 213px;
  --grid-small--5: 270px;
  --grid-small--6: 327px;

  --grid-medium--1: 80px;
  --grid-medium--2: 184px;
  --grid-medium--3: 288px;
  --grid-medium--4: 392px;
  --grid-medium--5: 496px;
  --grid-medium--6: 600px;
  --grid-medium--7: 704px;
  --grid-medium--8: 808px;
  --grid-medium--9: 912px;
  --grid-medium--10: 1016px;
  --grid-medium--11: 1120px;
  --grid-medium--12: 1224px;

  --grid-large--1: 104px;
  --grid-large--2: 240px;
  --grid-large--3: 376px;
  --grid-large--4: 512px;
  --grid-large--5: 648px;
  --grid-large--6: 784px;
  --grid-large--7: 920px;
  --grid-large--8: 1056px;
  --grid-large--9: 1192px;
  --grid-large--10: 1328px;
  --grid-large--11: 1464px;
  --grid-large--12: 1600px;

  --grid-gutter-small: 1rem;
  --grid-gutter-medium: 1.5rem;
  --grid-gutter-large: 2rem;


  /** Font Size **/

  --content-size-l: 1.25rem;
  --content-size-m: 1rem; /* 16px, DEFAULT CONTENT FONT SIZE */
  --content-size-s: 0.75rem;

  --title-size-xxl: 4.5rem;
  --title-size-xl: 4rem;
  --title-size-l: 3rem;
  --title-size-m: 2rem;
  --title-size-s: 1.5rem;
  --title-size-xs: 1rem;

  --subtitle-size-xl: 4rem;
  --subtitle-size-l: 3rem;
  --subtitle-size-m: 2rem;
  --subtitle-size-s: 1.5rem;
  --subtitle-size-xs: 1rem;


  /** Font Weight **/

  --content-weight-bold: 600;
  --content-weight-normal: 400;
  --content-weight-ultralight: 300;

  --title-weight: 600;

  --subtitle-weight: 300;


  /** Line Height **/

  --content-line-height: 2.25rem;

  --title-line-height: 150%;

  --subtitle-line-height: 150%;



  /** Font **/

  --font-new-hero: new-hero, sans-serif;



  /** SwiperJS **/

  --swiper-scrollbar-sides-offset: 36px;
  --swiper-scrollbar-border-radius: 0;
  --swiper-scrollbar-bg-color: var(--color-neutral--3);
  --swiper-scrollbar-drag-bg-color: var(--color-neutral--8);
  --swiper-scrollbar-size: 3px;
}

@media (min-width: 800px) {
  :root {

    --heading-size-l: 2.375rem /* 38px */;
    --heading-size-m: 1.688rem /* 27px */;
    --heading-size-s: 1.25rem /* 20px */;
    --heading-size-xs: 1rem /* 16px */;

  }
}