Organize colors

src/index.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 New Vector Ltd
+Copyright 2021-2022 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -25,21 +25,19 @@ limitations under the License.
 :root {
   --inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f,
     U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF;
-  --primaryColor: #0dbd8b;
-  --primaryColor-20: #0dbd8b33;
+  --accent: #0dbd8b;
+  --accent-20: #0dbd8b33;
+  --alert: #ff5b55;
   --alert-20: #ff5b5533;
-  --bgColor1: #15191e;
-  --bgColor2: #21262c;
-  --bgColor3: #444;
-  --bgColor4: #394049;
-  --bgColor5: #8d97a5;
-  --textColor1: #fff;
-  --textColor2: #6f7882;
-  --textColor3: #8e99a4;
-  --textColor4: #a9b2bc;
-  --inputBorderColor: #394049;
-  --inputBorderColorFocused: #0086e6;
-  --linkColor: #0086e6;
+  --links: #0086e6;
+  --primary-content: #ffffff;
+  --secondary-content: #a9b2bc;
+  --tertiary-content: #8e99a4;
+  --quaternary-content: #6f7882;
+  --quinary-content: #394049;
+  --system: #21262c;
+  --background: #15191e;
+  --bgColor3: #444; /* This isn't found anywhere in the designs or Compound */
 }
 
 @font-face {
@@ -123,8 +121,8 @@ limitations under the License.
 }
 
 body {
-  background-color: var(--bgColor1);
-  color: var(--textColor1);
+  background-color: var(--background);
+  color: var(--primary-content);
   color-scheme: dark;
   margin: 0;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
@@ -184,7 +182,7 @@ p {
 }
 
 a {
-  color: var(--primaryColor);
+  color: var(--accent);
   text-decoration: none;
 }
 
@@ -196,8 +194,8 @@ a:active {
 hr {
   width: calc(100% - 24px);
   border: none;
-  border-top: 1px solid var(--bgColor4);
-  color: var(--textColor2);
+  border-top: 1px solid var(--quinary-content);
+  color: var(--quaternary-content);
   overflow: visible;
   text-align: center;
   height: 5px;