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

/**
 * Global variables
 */

:root {
  /** Fonts **/
  --font--garamond: "EB Garamond";
  --font--barlow: "Barlow";

  /** Colors **/
  --color-primary--1: #235171;
  --color-primary--2: #01587D;
  --color-primary--3: #F0F5F8;
  --color-secondary--1: #FC9525;
  --color-secondary--2: #EC7D03;

  --color-neutral--1: #888da0;
  --color-neutral--2: #32343c;
  --color-neutral--3: #CBCEDB;
  --color-neutral--4: #fff;
  --color-neutral--5: #DADADA;

  --color-dark: #292E3D;
  --color-white: #fff;

  /** Clear Colors **/

  --color-primary--xclear: #E9EDFB;
  --color-primary-x-light: #F1F6F8;
  --color-neutral--xclear: #E9E9E9;

  /** System **/

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

  /** Font Size **/

  --content-size: 1rem;          /* 16px */
  --content-size-l: 1.125rem;    /* 18px */
  --heading-size-l: 2.5rem;      /* 40px */
  --heading-size-m: 2rem;        /* 32px */
  --heading-size-s: 1.25rem;     /* 20px */
  --heading-size-xs: 1.125rem;   /* 18px */
}
@media (min-width: 800px) {
  /** Font Size [DESKTOP] **/
  :root {
    --content-size: 1.125rem;    /* 18px */
    --content-size-l: 1.25rem;   /* 20px */
    --heading-size-l: 4rem;      /* 64px */
    --heading-size-m: 3rem;      /* 48px */
    --heading-size-s: 1.5rem;    /* 24px */
    --heading-size-xs: 1.25rem;  /* 20px */
  }
}