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

/**
 * Global variables
 */

:root {

  /** Colors **/

  --color-primary: #004E44;
  --color-primary--3: #00756a;
  --color-primary--2: #15618e;
  --color-primary--4: #eaf0ff;
  --color-primary--clear: #EAF2F1;
  --color-primary--xclear: #EDF5F2;

  --color-secondary: #76ADC1;
  --color-secondary-dark: #285768;

  --color-tertiary: #D78549;
  --color-tertiary--dark: #B84E15;
  --color-tertiary--xclear: #E7F0F3;

  --color-neutral--1: #888da0;
  --color-neutral--2: #CFCFCF;
  --color-neutral--4: #fff;
  --color-neutral--5: #E8E8E8;

  --color-dark: #232B2E;
  --color-white: #fff;

  /** System **/

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

  /** Font Size **/

  --content-size--s: 0.875rem /* 14px */;
  --content-size: 1rem /* 16px */;
  --content-size--l: 1.125rem /* 18px */;
  --content-size--xl: 24px;

  --heading-size--xl: 1.875rem /* 30px */;
  --heading-size--l: 1.875rem /* 30px */;
  --heading-size--m: 1.6875rem /* 27px */;
  --heading-size--s: 1.375rem /* 22px */;
  --heading-size--xs: 1.125rem /* 18px */;
}
@media (min-width: 800px) {
  :root {
    --heading-size--xl: 4rem /* 64px */;
    --heading-size--l: 3.125rem /* 50px */;
    --heading-size--m: 2.25rem /* 36px */;
    --heading-size--s: 1.5rem /* 24px */;
    --heading-size--xs: 1.25rem /* 20px */;

    --content-size--xl: 30px;
  }
}