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

/**
 * Global variables
 */

:root {

  /** Fonts **/
  --font--lexend: "Lexend", sans-serif;
  --font--archivo: "Archivo", sans-serif;

  /** Colors **/

  --color-primary--1: #1E3B16;
  --color-primary--2: #103C17;
  --color-primary--3: #F2C174;
  --color-primary--4: #FAF9EF;
  --color-primary--5: #F0EEE1;
  --color-primary--6: #FF832A;
  --color-primary--7: #476D3B;


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

  --color-neutral--1: #888da0;
  --color-neutral--2: #32343c;
  --color-neutral--3: #CBCEDB;
  --color-neutral--4: #fff;
  --color-neutral--6: #27222B;

  --color-dark: #282C27;
  --color-white: #fff;

  /** System **/

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

  /** Font Size **/


  --font-size: 0.889rem;        /* 16px */
  --font-size-m: 1.111rem;  /* 20px */

  --heading-size-xl: 1.667rem /* 30px */;
  --heading-size-l: 1.667rem /* 30px */;
  --heading-size-m: 1.188rem /* 19px */;
  --heading-size-s: 1.063rem /* 17px */;
  --heading-size-xs: 0.938rem /* 15px */;
}



@media (min-width: 800px) {
  :root {
    --font-size: 1rem;        /* 18px */
    --font-size-m: 1.333rem;  /* 24px */

    --heading-size-xl: 2.667rem /* 48px */;
    --heading-size-l: 2.111rem /* 38px */;
    --heading-size-m: 1.688rem /* 27px */;
    --heading-size-s: 1.25rem /* 20px */;
    --heading-size-xs: 1rem /* 16px */;
  }
}