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

/**
 * Global variables
 */

:root {

  /** Colors **/

  --color-primary--1: #001E6C; /* Primary Dark */
  --color-primary--2: #003AD1; /* Primary Medium */
  --color-primary--3: #386FFF; /* Primary Light */
  --color-primary--4: #F5F8FF; /* Primary Ultralight */

  --color-secondary--1: #E8630A; /* Secondary Dark */
  --color-secondary--2: #F67D2D; /* Secondary Medium */
  --color-secondary--3: #FABA8F; /* Secondary Light */
  --color-secondary--4: #FDE1CE; /* Secondary Ultralight */

  --color-highlight--1: #3CCF4E; /* Highlight Dark */
  --color-highlight--2: #63D972; /* Highlight Medium */
  --color-highlight--3: #8CE397; /* Highlight Light */
  --color-highlight--4: #DEF7E1; /* Highlight Ultralight */

  --color-neutral--1: #292E3D; /* Neutral Ultradark */
  --color-neutral--2: #525D7A; /* Neutral Dark */
  --color-neutral--3: #8590AD; /* Neutral Medium */
  --color-neutral--4: #C2C7D6; /* Neutral Light */
  --color-neutral--5: #F6F7F9; /* Neutral Ultralight */
  --color-neutral--6: #FFFFFF; /* Full white */


  /** Font sizes Mobile **/

	--font-size-l    : 1.222rem;
	--font-size-m   : 1rem;  /* BASE FONT 16px */
	--font-size-s   : 0.778rem;

  --title-xl  : 2rem;
  --title-l   : 1.5rem;
  --title-m   : 1rem;
  --title-s   : 0.75rem;

  --text-l : 1.111rem;

  --stylized-title-xxl  : 3rem;
  --stylized-title-xl   : 2rem;
  --stylized-title-l    : 1.5rem;
  --stylized-title-m    : 1rem;

  /** Fonts **/

  --font-fraunces   : 'Fraunces', serif;
  --font-albertsans : 'Albert Sans', sans-serif;

}
@media all and (min-width: 768px){
  :root {
    /** Font sizes Desktop **/

    --title-xl  : 2.5rem;  /* 45px */
    --title-l   : 2rem;   /* 36px */
    --title-m   : 1.333rem;   /* 24px */
    --title-s   : 1rem;   /* 18px */

    --text-l : 1.222rem;

    --stylized-title-xxl  : 5.556rem;   /* 100px */
    --stylized-title-xl   : 4rem;   /* 72px */
    --stylized-title-l    : 3rem;   /* 54px */
    --stylized-title-m    : 2rem;   /* 36px */

  }
}