feat(style.css): replace colors with var values

judas_server/web/static/css/style.css

@@ -1,3 +1,22 @@
+:root {
+    --nord-bg0: #2e3440;
+    --nord-bg1: #3b4252;
+    --nord-bg2: #434c5e;
+    --nord-bg3: #4c566a;
+    --nord-fg0: #eceff4;
+    --nord-fg1: #e5e9f0;
+    --nord-fg2: #d8dee9;
+    --nord-acc0: #8fbcbb;
+    --nord-acc1: #88c0d0;
+    --nord-acc2: #81a1c1;
+    --nord-acc3: #5e81ac;
+    --nord-aur0: #bf616a;
+    --nord-aur1: #d08770;
+    --nord-aur2: #ebcb8b;
+    --nord-aur3: #a3be8c;
+    --nord-aur4: #b48ead;
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -5,15 +24,15 @@
 }
 
 body {
-    background-color: #b48ead;
+    background-color: var(--nord-aur4);
     font-family: monospace, sans-serif !important;
-    color: #eceff4;
+    color: var(--nord-fg0);
 }
 
 input {
     font-family: inherit;
     color: #eceff4;
-    background-color: #434c5e;
+    background-color: var(--nord-bg2);
     border: none;
     border-radius: 0.25rem;
     padding: 0.25rem;
@@ -29,27 +48,27 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: #2e3440;
-    color: #eceff4;
+    background-color: var(--nord-bg0);
+    color: var(--nord-fg0);
     padding: 1rem;
 }
 
 main {
     padding: 1rem;
-    background-color: #3b4252;
+    background-color: var(--nord-bg1);
     flex-grow: 1;
 }
 
 header a {
     text-decoration: none;
-    color: #eceff4;
+    color: var(--nord-fg0);
 }
 
 .button {
     display: inline-block;
     padding: 0.5rem 1rem;
     background-color: #8fbcbb;
-    color: #2e3440;
+    color: var(--nord-bg0);
     border: none;
     border-radius: 0.25rem;
     text-decoration: none;
@@ -57,7 +76,7 @@ header a {
 }
 
 .button:hover {
-    background-color: #81a1c1;
+    background-color: var(--nord-acc2);
     cursor: pointer;
 }