.colorSwatch {
  width: 120px;
  height: 50px;
  display: inline-block;
  font-size: 12pt;
  font-weight: bold;
  display: none;
}

:root {
  --focus: #969;
  --annotation: #f00;
  --logo1: #c74441;
  --logo2: #2e3645;

  --accent1: #7b98a0;
  --accent2: #899;
  --accent3: #344;

  --neutral1: #ffffff;
  --neutral2: #d6dfe6;
  --neutral3: #c9cdd6;
  --neutral4: #bcbcc4;

  --neutral5: #898d96;
  --neutral6: var(--logo2);
  /*
  --neutral5: #999da6;
  --neutral6: #626972;
   */

  /*
  --neutral1: #dee3e6;
  --neutral2: #c6cbce;
  --neutral3: #b0b5b9;
  --neutral4: #9aa2a5;
  --neutral5: #5c676b;
  --neutral6: #2d383c;
  */

  /*
  --neutral1: hsl(217, 20%, 80%);
  --neutral2: hsl(217, 20%, 70%);
  --neutral3: hsl(217, 20%, 60%);
  --neutral4: hsl(217, 20%, 50%);
  --neutral5: hsl(217, 20%, 40%);
  --neutral6: hsl(217, 20%, 30%);
  */
}

#focus {
  background-color: var(--focus);
}
#logo1 {
  background-color: var(--logo1);
}
#logo2 {
  background-color: var(--logo2);
}
#neutral1 {
  background-color: var(--neutral1);
}
#neutral2 {
  background-color: var(--neutral2);
}
#neutral3 {
  background-color: var(--neutral3);
}
#neutral4 {
  background-color: var(--neutral4);
}
#neutral5 {
  background-color: var(--neutral5);
}
#neutral6 {
  background-color: var(--neutral6);
}
#accent1 {
  background-color: var(--accent1);
}
#accent2 {
  background-color: var(--accent2);
}
#accent3 {
  background-color: var(--accent3);
}