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

/**
 * Global variables
 */


:root {

  /** Colors **/

  --color-primary--1: #E52521;
  --color-primary--2: #F3F1F1;
  --color-primary--3: #890D0C;
  --color-primary--4: #eaf0ff;
  --color-primary--5: #C31512;

  /* --color-secondary--1: ; */
  /* --color-tertiary--1: ; */

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

  --color-dark: #121212;
  --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-xl: 2.5rem /* 38px */;
  --heading-size-m: 1.875rem /* 30px */;
  --heading-size-s: 1.5rem /* 24px */;

  --content-large: 1.2rem;
  --content-medium: 1.2rem;

  --heading-homepage: 2.5rem;
  --content-large: 1rem;
  /** Fonts **/

  --font-inter: 'Inter';
  --font-europa: 'europa', sans-serif;
}
@media (min-width: 900px) {
  :root {
    --heading-size-xl: 4.188rem /* 38px */;
    --heading-size-l: 2.375rem /* 38px */;
    --heading-size-m: 2.5rem /* 40px */;
    --heading-size-s: 1.25rem /* 20px */;
    --heading-size-xs: 1rem /* 16px */;

    --heading-homepage: clamp(2.5rem, -3rem + 8vw, 5rem);
    --content-large: clamp(1rem, 0.1667rem + 1.3333vw, 1.5rem);
  }
}