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

/**
 * Global variables
 */

:root {

  /** Colors **/

  --color-primary--1: #E35417;
  --color-primary--2: #F1E7E0;

  --color-secondary--1: #522D1C;
  /* --color-tertiary--1: ; */

  --color-neutral--1: #323232;
  /* --color-neutral--2: #32343c;
  --color-neutral--3: #CBCEDB;
  --color-neutral--4: #fff; */

  --color-dark: #0F0F0F;
  --color-white: #fff;

  /** System **/

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

  /** Font Size **/

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

  --heading-size-xxxl: 2.250rem /* 36px */;
  --heading-size-xxl : 1.875rem /* 30px */;
  --heading-size-xl  : 1.375rem /* 22px */;
  --heading-size-l  : 1.125rem /* 18px */;
  --heading-size-s  : 0.875rem /* 14px */;
  --heading-size-xs : 0.750rem /* 12px */;
}
@media (min-width: 750px) {
  :root {
    /* base 18px */
    --heading-size-xxxl: 3.556rem /* 64px */;
    --heading-size-xxl : 2.667rem /* 48px */;
    --heading-size-xl  : 1.5rem /* 27px */;
    --heading-size-l  : 1.1667rem /* 21px */;
    --heading-size-s  : 0.888rem /* 16px */;
    --heading-size-xs : 0.777rem /* 14px */;
  }
}