:root {

  --blue: #1e90ff;
  --white: #ffffff; 

  --primaria: DarkSlateGrey;
  --secundaria: DarkSlateGray;
  --texto: DarkSlateGrey;  
  --fundo: #f3f6fb;
  --brancoTransparente: rgba(255, 255, 255, 0.75); 

  --DARK-PRIMARY-COLOR : #ffa000;
  --LIGHT-PRIMARY-COLOR : #FFECB3;
  --PRIMARY-COLOR : #FFC107;
  --TEXT-ICONS : #212121;
  --ACCENT-COLOR : #9E9E9E;
  --PRIMARY-TEXT : #212121;
  --SECONDARY-TEXT : #757575;
  --DIVIDER-COLOR : #BDBDBD;
}

/* Exemplo de uso 
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
*/

body { 
  background-color: white;
  font-family: Roboto, Helvetica, Arial, sans-serif; 
  margin: 0px; 
  padding: 0px;
  font-size: 20px;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700

.bgt{  background-color:  rgba(255, 255, 255, 0);  }
.bgt75{  background-color:  rgba(255, 255, 255, 0.75);  }

.bgcDPC{  background-color: var(--DARK-PRIMARY-COLOR); }


.bgw{  background-color: white }
.bgd{  background-color: DarkSlateGrey; }
.bgr{  background-color: #ff4081; }

.cw{   color: white;  }
.cd{   color: DarkSlateGrey;  }
.cr{   color: #ff4081; }

.cDPC{ color: var(--DARK-PRIMARY-COLOR); }

.bcw{  border-color: white;  }
.bcd{  border-color: DarkSlateGrey; }
.bcr{  border-color: #ff4081; }

.cDPC{ color: var(--DARK-PRIMARY-COLOR); }
.cLPC{ color: var(--LIGHT-PRIMARY-COLOR); }
.cPC{ color: var(--PRIMARY-COLOR); }
.cTI{ color: var(--TEXT-ICONS); }
.cAC{ color: var(--ACCENT-COLOR); }
.cPT{ color: var(--PRIMARY-TEXT); }
.cST{ color: var(--SECONDARY-TEXT); }
.cDC{ color: var(--DIVIDER-COLOR); }

.bcDPC{ border-color: var(--DARK-PRIMARY-COLOR); }
.bcLPC{ border-color: var(--LIGHT-PRIMARY-COLOR); }
.bcPC{ border-color: var(--PRIMARY-COLOR); }
.bcTI{ border-color: var(--TEXT-ICONS); }
.bcAC{ border-color: var(--ACCENT-COLOR); }
.bcPT{ border-color: var(--PRIMARY-TEXT); }
.bcST{ border-color: var(--SECONDARY-TEXT); }
.bcDC{ border-color: var(--DIVIDER-COLOR); }

.bgcDPC{ background-color: var(--DARK-PRIMARY-COLOR); }
.bgcLPC{ background-color: var(--LIGHT-PRIMARY-COLOR); }
.bgcPC{ background-color: var(--PRIMARY-COLOR); }
.bgcTI{ background-color: var(--TEXT-ICONS); }
.bgcAC{ background-color: var(--ACCENT-COLOR); }
.bgcPT{ background-color: var(--PRIMARY-TEXT); }
.bgcST{ background-color: var(--SECONDARY-TEXT); }
.bgcDC{ background-color: var(--DIVIDER-COLOR); }


/* 
 background-color : rgba(255, 255, 255, 0.5); 
 color : DarkSlateGrey;            
 color : #ff4081;                  
 font-family:  Roboto, Helvetica, Arial, sans-serif; 
 font-family: "Megrim", system-ui;   
 font-family: "Courier Prime", monospace;
*/