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

/**
 * Global variables
 */

:root {

  /** Colors **/

  --color-primary: #5DAF60;
  --color-primary--text: #29632E;
  --color-primary--clear: #CFEFD2;
  --color-secondary: #EB951F;
  --color-tertiary: #C12B87;

  --color-neutral--light: #FCF3EC;
  --color-neutral--dark: #2D2424;

  --color-dark: #121212;
  --color-white: #fff;

  --color-pink: #EFC8E080;
  --color-orange: #F9D091;
  --color-green: #A5D6A9;
  --color-green-kaki: #99B19B;


  /** System **/

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



  /** Font Size **/
  --content-size: 1rem /* 18px */;

  /* Mobile (valeurs par défaut) */
  --heading-size-l: 1.667rem /* 30px */;
  --heading-size-m: 1.5rem /* 27px */;
  --heading-size-s: 1.222rem /* 22px */;
  --heading-size-xs: 1.111rem /* 20px */;
  --text-size-l: 1rem /* 18px */;
  --text-size-m: 0.889rem /* 16px */;
  --text-size-s: 0.889rem /* 16px */;
}

@media (min-width: 1200px) {
  :root {
    /* Desktop */
    --heading-size-l: 2.667rem /* 48px */;
    --heading-size-m: 2.333rem /* 42px */;
    --heading-size-s: 1.778rem /* 32px */;
    --heading-size-xs: 1.333rem /* 24px */;
    --text-size-l: 1.111rem /* 20px */;
    --text-size-m: 1rem /* 18px */;
    --text-size-s: 0.889rem /* 16px */;
  }
}