:root {
  /*  Branding  */
  --primary: tomato;
  --secondary: teal;
  --tertiary: orange;
  
  /* Grayscale */
  --gray-00: white;
  --gray-20: #afaeb5;
  --gray-40: #888790;
  --gray-60: #626169;
  --gray-80: #3d3c41;
  --gray-100: #181819;
  
  /**  
   *  This is where we initialize the color variable and set a default 
   *  color value. This is the variable that will be updated in the color
   *  classes.
   */
  --color: var(--gray-60);
}

/* Which property we want to style: */
.color-text {
  color: var(--color);
}

.color-background {
  background-color: var(--color);
}

.color-border {
  border-color: var(--color);
}


/* Set the color by updating the --color variable: */
.color--primary {
  --color: var(--primary);
}

.color--secondary {
  --color: var(--secondary);
}

.color--tertiary {
  --color: var(--tertiary);
}

.color--gray-00 {
  --color: var(--gray-00);
}

.color--gray-20 {
  --color: var(--gray-20);
}

.color--gray-40 {
  --color: var(--gray-40);
}

.color--gray-60 {
  --color: var(--gray-60);
}

.color--gray-80 {
  --color: var(--gray-80);
}

.color--gray-100 {
  --color: var(--gray-100);
}

/* This is what our code would have looked like without CSS variables: */
.color-text--primary {
  color: tomato;
}

.color-background--primary {
  background-color: tomato;
}

.color-border--primary {
  border-color: tomato;
}

.color-text--secondary {
  color: teal;
}

.color-background--secondary {
  background-color: teal;
}

.color-border--secondary {
  border-color: teal;
}

.color-text--tertiary {
  color: orange;
}

.color-background--tertiary {
  background-color: orange;
}

.color-border--tertiary {
  border-color: orange;
}

.color-text--gray-00 {
  color: white;
}

.color-background--gray-00 {
  background-color: white;
}

.color-border--gray-00 {
  border-color: white;
}

.color-text--gray-20 {
  color: #afaeb5;
}

.color-background--gray-20 {
  background-color: #afaeb5;
}

.color-border--gray-20 {
  border-color: #afaeb5;
}

.color-text--gray-40 {
  color: #888790;
}

.color-background--gray-40 {
  background-color: #888790;
}

.color-border--gray-40 {
  border-color: #888790;
}

.color-text--gray-60 {
  color: #626169;
}

.color-background--gray-60 {
  background-color: #626169;
}

.color-border--gray-60 {
  border-color: #626169;
}

.color-text--gray-80 {
  color: #3d3c41;
}

.color-background--gray-80 {
  background-color: #3d3c41;
}

.color-border--gray-80 {
  border-color: #3d3c41;
}

.color-text--gray-100 {
  color: #181819;
}

.color-background--gray-100 {
  background-color: #181819;
}

.color-border--gray-100 {
  border-color: #181819;
}

/**  
 *  With CSS Variables: 
 *    - 48 lines of actual CSS
 *    - Each new color adds 4 lines of code
 *
 *  Without CSS Variables:
 *    - 81 lines of actual CSS
 *    - Each new color adds 9 lines of code
*/