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

/**
 * Global variables
 */

:root {

  /** Colors **/

  --color-primary--1: #00332C;
  --color-primary--2: #00594C;
  --color-primary--3: #408C81;
  --color-primary--4: #91D6AC;

  --color-secondary--1: #AD9985;
  --color-secondary--2: #D6CCC2;
  --color-secondary--3: #EAE5E1;
  --color-secondary--4: #F5F2F0;

  --color-tertiary--1: #723427;
  --color-tertiary--2: #AE503C;
  --color-tertiary--3: #D15B41;
  --color-tertiary--4: #E17A64;
  --color-tertiary--5: #F3C8BF;

  --color-neutral--1: #1E1A17;
  --color-neutral--2: #3A332C;
  --color-neutral--3: #736659;
  --color-neutral--4: #F3F2F2;
  --color-neutral--5: #FCFCFC;

  --color-highlight--1: #C2D6C2;
  --color-highlight--2: #D1E0D1;
  --color-highlight--3: #E0EBE0;
  --color-highlight--4: #F0F5F0;


  /** Font Size **/

  --content-size-l: 1.25rem /* 20px */;
  --content-size-m: 1rem /* 16px */;
  --content-size-s: 0.75rem /* 12px */;

  --heading-size-2xl: 3.75rem /* 60px */;
  --heading-size-xl: 3.125rem /* 50px */;
  --heading-size-l: 2.5rem /* 40px */;
  --heading-size-m: 1.875rem /* 30px */;
  --heading-size-s: 1.5rem /* 24px */;
  --heading-size-xs: 1.25rem /* 20px */;

}

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

    --content-size-l: 1.333rem /* 24px */;
    --content-size-m: 1rem /* 18px */;
    --content-size-s: 0.778rem /* 14px */;

    --heading-size-2xl:5.333rem /* 96px */;
    --heading-size-xl: 4rem /* 72px */;
    --heading-size-l: 3.111rem /* 56px */;
    --heading-size-m: 2.333rem /* 42px */;
    --heading-size-s: 1.667rem /* 30px */;
    --heading-size-xs: 1.111rem /* 20px */;

  }
}