:root {  
  /*- main*/
  --color1-Darker:        hsl(0, 0%, 7%);
  --color1-Normal: hsla(0, 0%, 13%, 0.81);
  --color1-Lighter:       hsl(0, 0%, 87%);

  --color1-Normal-Alpha:  hsl(0, 0%, 27%);
 
/* - detail*/
  --color2-Darker:        hsl(6, 83%, 52%);  /*hsl(207, 66%, 46%);*/
  --color2-Normal:        hsl(6, 100%, 59%);  /*hsl(207, 56%, 56%);*/
  --color2-Lighter:       hsl(6, 100%, 65%);  /*hsl(207, 46%, 66%);*/

  --color2-Normal-Alpha:  hsl(6, 100%, 67%);  

/*vermelho - highlight*/
  --color3-Darker:        hsl(0, 100%, 25%);
  --color3-Normal:        hsl(0, 100%, 50%);
  --color3-Lighter:       hsl(24, 100%, 50%); 
 
 /*azul - midtone*/
  --color4-Darker:        hsl(240, 100%, 20%);
  --color4-Normal:        hsl(240, 100%, 60%);
  --color4-Lighter:       hsl(225, 100%, 60%);

/*amarelo - shadow*/
  --color5-Darker:        hsl(45, 100%, 40%);
  --color5-Normal:        hsl(60, 100%, 50%);
  --color5-Lighter:       hsl(60, 100%, 70%);

/*preto, cinza e branco*/
  --color0-Lighter:       hsl(0, 0%, 100%);
  --color0-Normal:        hsl(0, 0%, 50%);
  --color0-Darker:        hsl(0, 0%, 13%);

/*CORES PADRÕES DO EDUKAS*/
  /*cor padrao "--color-header" -> hsl(56, 100%, 6%); */
  --color-header: var(--cor-principal);

  /*cor padrao do botao da navbar "--color-hover" -> hsl(6, 100%, 59%);*/
  --color-hover:  var(--cor-navbar-hover);

  /*cor padrao "--color-header-abaixo" -> hsl(6, 100%, 67%);  */
  --color-header-abaixo: var(--cor-barra);

/*filters */
  --hue-rotate:   hue-rotate(100deg);
  --saturate:     saturate(100%);
  --brightness:   brightness(100%);

  --hsb-filter: hue-rotate(100deg) saturate(100%) brightness(100%);


/*Alertas, botoes, ferramentas*/
  --danger-Darker:        hsl(0, 53%, 58%);
  --danger-Normal:        hsl(0, 59%, 41%);
  --danger-Lighter:     hsl(0, 0%, 100%);

  --warning-Darker:       hsl(39, 100%, 50%);
  --warning-Normal:       hsl(25, 75%, 47%);
  --warning-Lighter:    hsl(0, 0%, 100%);

  --primary-Darker:       var(--color1-Darker); /*hsl(208, 44%, 38%);*/
  --primary-Normal:       var(--color1-Normal); /*hsl(207, 56%, 56%);*/
  --primary-Lighter:      var(--color0-Lighter); /*hsl(0, 0%, 100%);*/
  --primary-Hover:        var(--cor-links-hover);

  --secondary-Darker:     var(--color1-Normal); 
  --secondary-Normal:     hsl(0, 0%, 87%); 
  --secondary-Lighter:    var(--color1-Normal);
  --secondary-Hover:      var(--color1-Normal); 

  --info-Darker:          hsl(207, 56%, 56%);
  --info-Normal:          hsl(208, 44%, 38%);
  --info-Lighter:  hsl(0, 0%, 100%);

  --success-Darker:       hsl(146, 50%, 30%);
  --success-Normal:       hsl(146, 50%, 36%);
  --success-Lighter:   hsl(0, 0%, 100%);

  --default-Darker:       hsl(0, 0%, 80%);
  --default-Normal:       hsla(0, 0%, 100%, 0);
  --default-Lighter: hsl(0, 0%, 25%);

  --especial-Darker:      var(--color1-Darker); /*hsl(208, 44%, 38%);*/
  --especial-Normal:      var(--color1-Normal); /*hsl(207, 56%, 56%);*/
  --especial-Lighter:     var(--color2-Normal); /*hsl(0, 0%, 100%);*/


  /*
  	logoFull N D L
	logo

	azul destaque 				                 hsl(207, 56%, 56%)
	azul escuro sobre 			               hsl(199, 28%, 37%)


	botão primary (azul)
	borda 						     #36648B				 hsl(208, 44%, 38%)
	preenchimento 				 #4F94CD 			   hsl(207, 56%, 56%)

	botão warning (laranja)
	borda 						     #D2691E				 hsl(25, 75%, 47%)
	preenchimento 				 #FFA500 			   hsl(39, 100%, 50%)

	botão success (verde)
	borda 						     #2E8B57				 hsl(146, 50%, 36%)
	preenchimento 				 #3CB371 			   hsl(147, 50%, 47%)

	botão danger (vermelho)
	borda 						     #A52A2A				 hsl(0, 59%, 41%)
	preenchimento 				 #CD5C5C 			   hsl(0, 53%, 58%)

	botão default (branco)
	borda 						     #ccc				     hsl(0, 0%, 80%)
	preenchimento 				 #fff 				   hsl(0, 0%, 100%)

 */


}