```css
:root {
  /* primary */
  --color-teal-a: rgba(72, 201, 176, 0.35);
  --color-teal-1: #48c9b0;
  --color-teal-2: #1abc9c;
  --color-teal-3: rgb(22, 160, 133);
  /* success */
  --color-green-a: rgba(70, 221, 126, 0.35);
  --color-green-1: rgb(70, 221, 126);
  --color-green-2: rgb(47, 208, 105);
  --color-green-3: rgb(26, 196, 88);
  /* info */
  --color-blue-a: rgba(100, 181, 246, 0.35);
  --color-blue-1: #64b5f6;
  --color-blue-2: rgb(66, 165, 245);
  --color-blue-3: #2196f3;
  /* danger */
  --color-red-a: rgba(252, 118, 97, 0.35);
  --color-red-1: #fc7661;
  --color-red-2: #ff5f45;
  --color-red-3: #f33e22;
  /* warning */
  --color-orange-a: rgba(255, 211, 66, 0.35);
  --color-orange-1: #ffd342;
  --color-orange-2: #fec401;
  --color-orange-3: #f5bd07;
  /* default1 */
  --color-plain-a: rgba(150, 204, 248, 0.35);
  --color-plain-a: #96ccf859;
  --color-plain-1: #f2f5fc;
  --color-plain-2: #e8ebf4;
  --color-plain-3: #dae1e9;
  /* default2 */
  --color-grey-a: rgba(206, 214, 224, 0.35);
  --color-grey-1: #ced6e0;
  --color-grey-2: #a4b0be;
  --color-grey-3: #86909b;
  /* inverse */
  --color-dark-a: rgba(87, 96, 111, 0.35);
  --color-dark-1: #57606f;
  --color-dark-12: #4d535d;
  --color-dark-13: #44484d;
  --color-dark-2: #3c4d5e;
  --color-dark-3: #323f4d;
}
```