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

/**
 * Global variables
 */

:root {

  /** Colors **/

  --color-primary--1: #882133;

  --color-stroke: #dadada;

  --color-neutral--dark: #1F1F1F;
  --color-neutral--2: #32343c;
  --color-neutral--3: #CBCEDB;
  --color-neutral--4: #fff;

  --color-dark: #1F1F1F;
  --color-white: #fff;

  --color-background:#F9F6F2;

  /** System **/

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

  /** Font Size **/

  --content-size: 1rem /* 18px */;
  --content-size-s: 1.111rem /* 20px */;
  --content-size-m: 1.222rem /* 22px */;

  --heading-size-xl: 2rem /* 36px */;
  --heading-size-l: 2rem /* 36px */;
  --heading-size-m: 1.188rem /* 19px */;
  --heading-size-s: 1.063rem /* 17px */;
  --heading-size-xs: 0.938rem /* 15px */;
}
@media (min-width: 800px) {
  :root {
    --content-size-s: 1.222rem /* 22px */;
    --content-size-m: 1.333rem /* 24px */;

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