1 files changed, 44 insertions, 43 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 96dbe49..bfda4d4 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,35 +1,36 @@
 @import url("/assets/css/fonts.css");
+@import url("/assets/css/colors.css");
 
 :root {
-    --fg-low: oklch(70% 0.01368 253.09);
-    --fg: oklch(80% 0.01368 253.09);
-    --fg-high: oklch(90% 0.01368 253.09);
-
-    --bg-lowest: oklch(15% 0.01368 253.09);
-    --bg-low: oklch(17.5% 0.01368 253.09);
-    --bg: oklch(20% 0.01368 253.09);
-    --bg-high: oklch(22.5% 0.01368 253.09);
-    --bg-highest: oklch(25% 0.01368 253.09);
-
-    --border: oklch(35% 0.023 253.09);
-    --border-variant: oklch(30% 0.023 253.09);
-
-    --red: oklch(80% 0.15765 24.728);
-    --red-bright: oklch(90% 0.15765 24.728);
-    --orange: oklch(80% 0.139 45.216);
-    --orange-bright: oklch(90% 0.139 45.216);
-    --yellow: oklch(80% 0.12758 76.402);
-    --yellow-bright: oklch(90% 0.12758 76.402);
-    --green: oklch(80% 0.11211 147.63);
-    --green-bright: oklch(90% 0.11211 147.63);
-    --cyan: oklch(80% 0.09919 181.49);
-    --cyan-bright: oklch(90% 0.09919 181.49);
-    --blue: oklch(80% 0.09994 249.58);
-    --blue-bright: oklch(90% 0.09994 249.58);
-    --purple: oklch(80% 0.09923 296.61);
-    --purple-bright: oklch(90% 0.09923 296.61);
-    --pink: oklch(80% 0.06662 9.2146);
-    --pink-bright: oklch(90% 0.06662 9.2146);
+    /* --fg-low: oklch(70% 0.01368 253.09); */
+    /* --fg: oklch(80% 0.01368 253.09); */
+    /* --fg-high: oklch(90% 0.01368 253.09); */
+    /**/
+    /* --bg-lowest: oklch(15% 0.01368 253.09); */
+    /* --bg-low: oklch(17.5% 0.01368 253.09); */
+    /* --bg: oklch(20% 0.01368 253.09); */
+    /* --bg-high: oklch(22.5% 0.01368 253.09); */
+    /* --bg-highest: oklch(25% 0.01368 253.09); */
+    /**/
+    /* --border: oklch(35% 0.023 253.09); */
+    /* --border-variant: oklch(30% 0.023 253.09); */
+    /**/
+    /* --red: oklch(80% 0.15765 24.728); */
+    /* --red-bright: oklch(90% 0.15765 24.728); */
+    /* --orange: oklch(80% 0.139 45.216); */
+    /* --orange-bright: oklch(90% 0.139 45.216); */
+    /* --yellow: oklch(80% 0.12758 76.402); */
+    /* --yellow-bright: oklch(90% 0.12758 76.402); */
+    /* --green: oklch(80% 0.11211 147.63); */
+    /* --green-bright: oklch(90% 0.11211 147.63); */
+    /* --cyan: oklch(80% 0.09919 181.49); */
+    /* --cyan-bright: oklch(90% 0.09919 181.49); */
+    /* --blue: oklch(80% 0.09994 249.58); */
+    /* --blue-bright: oklch(90% 0.09994 249.58); */
+    /* --purple: oklch(80% 0.09923 296.61); */
+    /* --purple-bright: oklch(90% 0.09923 296.61); */
+    /* --pink: oklch(80% 0.06662 9.2146); */
+    /* --pink-bright: oklch(90% 0.06662 9.2146); */
 
     --border-radius: 5px;
     --border-radius-big: calc(var(--border-radius) * 4);
@@ -42,7 +43,7 @@
 
 body {
     font-family: "Aporetic", "Aporetic Fallback";
-    background-color: var(--bg-lowest);
+    background-color: var(--prismite-bg-lowest);
     background-repeat: repeat;
     color: var(--bg);
     display: flex;
@@ -82,7 +83,7 @@ body {
 }
 
 .subtle {
-    color: var(--fg-low);
+    color: var(--prismite-fg-low);
 }
 
 main {
@@ -92,7 +93,7 @@ main {
     display: flex;
     justify-content: center;
     box-sizing: border-box;
-    background-color: var(--yellow);
+    background-color: var(--prismite-yellow);
     border-radius: var(--border-radius-big);
     overflow: hidden;
     text-wrap: pretty;
@@ -117,9 +118,9 @@ nav > ul {
 }
 
 nav .tab {
-    --color: var(--bg);
+    --color: var(--prismite-bg);
     display: block;
-    color: var(--fg);
+    color: var(--prismite-fg);
     border-radius: var(--border-radius) var(--border-radius) 0 0;
     background-color: var(--color);
     position: relative;
@@ -131,12 +132,12 @@ nav .tab:not(.active) {
 }
 
 nav .tab:hover {
-    --color: var(--bg-high);
+    --color: var(--prismite-bg-high);
 }
 
 nav .tab.active {
-    --color: var(--yellow);
-    color: var(--bg);
+    --color: var(--prismite-yellow);
+    color: var(--prismite-bg);
 }
 
 nav .tab > a {
@@ -150,7 +151,7 @@ nav .tab > a {
 
 nav .tab > a:focus-visible {
     border-radius: var(--border-radius) var(--border-radius) 0 0;
-    outline: var(--blue) solid calc(var(--border-radius) + 1px);
+    outline: var(--prismite-blue) solid calc(var(--border-radius) + 1px);
     outline-offset: 0;
 }
 
@@ -174,12 +175,12 @@ nav .tab > a > div {
 
 footer {
     text-align: center;
-    color: var(--fg);
+    color: var(--prismite-fg);
     border-radius: var(--border-radius-big) var(--border-radius-big) 0 0;
     padding: var(--padding-big);
     font-size: 0.8em;
     position: relative;
-    background-color: var(--bg-lowest);
+    background-color: var(--prismite-bg-lowest);
     z-index: 3;
 }
 
@@ -195,7 +196,7 @@ footer > div > div {
 
 footer > div > div > span:not(:last-of-type)::after {
     content: "";
-    border-left: calc(var(--border-width) * 1) solid var(--border);
+    border-left: calc(var(--border-width) * 1) solid var(--prismite-border);
     margin-left: var(--padding);
     margin-right: var(--padding);
     display: inline-block;
@@ -204,12 +205,12 @@ footer > div > div > span:not(:last-of-type)::after {
 }
 
 footer a {
-    color: var(--fg);
+    color: var(--prismite-fg);
 }
 
 footer a:hover,
 footer a:focus {
-    color: var(--yellow);
+    color: var(--prismite-yellow);
 }
 
 main a {