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

/**
 * Global variables
 */

:root {

  /** Colors **/

  --color-brand--1: #336182;
  --color-brand--2: #182D3D;
  --color-brand--3: #AD3030;
  --color-brand--4: #E8F8E4;

  --color-neutral--1: #35312D;
  --color-neutral--2: #F4F9F8;
  --color-neutral--3: #969C9A;
  --color-neutral--4: #D9D9D9;
  --color-neutral--5: #F2F3F2;
  --color-neutral--6: #ffffff;


  /** Font Size **/

  --content-size: 1rem /* 16px */;

  --heading-size-l: 2.118rem /* 36px */;
  --heading-size-m: 1.588em /* 27px */;
  --heading-size-s: 1.294rem /* 22px */;
  --heading-size-xs: 1.059rem /* 18px */;

}

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

    --heading-size-l: 3.529rem /* 60px */;
    --heading-size-m: 2.118rem /* 36px */;
    --heading-size-s: 1.588rem /* 27px */;
    --heading-size-xs: 1.176rem /* 20px */;

  }
}