/**
 * @file
 * CSS for CSS variables.
 */




/**
 * ===== CSS VARIABLES =====
 */


/**/
:root {


  /* CUSTOM COLOR - GRAY */
  --custom-color-0-1: #222222; /* gray - dark */
  --custom-color-0-2: #4F4F4F; /* gray - middle */
  --custom-color-0-3: #EEEEEE; /* gray - light */
  --custom-color-0-4: #FFFFFF; /* gray - white */


  /* CUSTOM COLOR - KEY */
  --custom-color-1-1: #014073; /*#963535; /* red - dark */
  --custom-color-1-2: #3BA8E0; /* red - middle */
  --custom-color-1-3: #A4CCEB; /* red - light */


  /* CUSTOM COLOR - BLUE */
  --custom-color-2-1: #014073; /* blue - dark */
  --custom-color-2-2: #81C9EE; /* blue - middle */
  --custom-color-2-3: #DEF1FA; /* blue - light */
  --custom-color-2-4: #FFFFCC; /* blue - light */


  /* CUSTOM COLOR - GREEN */
  --custom-color-3-1: #8AA62F; /* green - dark */
  --custom-color-3-2: #C0E052; /* green - middle */
  --custom-color-3-3: #E5F0C0; /* green - light */


  /* CUSTOM COLOR - YELLOW */
  --custom-color-4-1: #B39F24; /* yellow - dark */
  --custom-color-4-2: #FFE566; /* yellow - middle */
  --custom-color-4-3: #FFF7D6; /* yellow - light */


  /* CUSTOM COLOR - TURQUOISE */
  --custom-color-5-1: #32AD6F; /* turquoise - dark */
  --custom-color-5-2: #57D997; /* turquoise - middle */
  --custom-color-5-3: #D6EBE0; /* turquoise - light */


  /* CUSTOM COLOR - DANGER */
  --custom-color-6-1: #E62600; /* Red */
  --custom-color-6-2: #04AB08; /* Green */


}


/* SAMPLE CODE */
.custom-color-0-1 {
  background-color: var(--custom-color-1-1);
  color: #FFFFFF;
}

/* SAMPLE CODE */
.custom-color-1-1 {
  background-color: var(--custom-color-2-1);
  color: #FFFFFF;
}

/* SAMPLE CODE */
.custom-color-2-1 {
  background-color: var(--custom-color-3-1);
  color: #FFFFFF;
}