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

/**
 * Global variables
 */

:root {

  /** Fonts **/
  --font-poppins: 'Poppins', sans-serif;
  --font-dexotick: 'Dexotick', sans-serif;

  /** Colors **/

  --color-primary--1: #E9651E;
  --color-primary--2: #C94803;

  --color-secondary--1: #FFEFE5;
  --color-secondary--2: #FEF9F5;
  --color-secondary--3: #FFDFCA;
  /* --color-tertiary--1: ; */

  --color-neutral--1: #301C0F;

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

  /** System **/

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

  /** Override swiper variable  **/
  --swiper-pagination-bottom: 0;

  /** Font Size **/

  --content-size--s: 0.875rem /* 14px */;
  --content-size: 1rem /* 16px */;
  --content-size--l: 1.125rem /* 18px */;
  --content-size--xl: 24px;

  --heading-size--xxl: 3rem /* 48px */;
  --heading-size--xl: 2.5rem /* 40px */;
  --heading-size--l: 2.25rem /* 36px */;
  --heading-size--m: 1.6875rem /* 27px */;
  --heading-size--s: 1.375rem /* 22px */;
  --heading-size--xs: 1.125rem /* 18px */;
}
@media (min-width: 800px) {
  :root {
    --heading-size--xxl: 6rem /* 96px */;
    --heading-size--xl: 4rem /* 64px */;
    --heading-size--l: 3.125rem /* 50px */;
    --heading-size--m: 2.5rem /* 40px */;
    --heading-size--s: 1.5rem /* 24px */;
    --heading-size--xs: 1.25rem /* 20px */;

    --content-size--xl: 30px;
  }
}