Defined colors as variables

1 files changed, 27 insertions, 1 deletions

diff --git a/src/Style/style.css b/src/Style/style.css
index 7d6912e..099b76a 100644
--- a/src/Style/style.css
+++ b/src/Style/style.css
@@ -1,6 +1,32 @@
 /* Synthwave Terminal */
 
-/* Define the fonts */
+/* Color variables */
+:root {
+    /* Background layers */
+    --bg-top:      #1a0f2e;
+    --bg-mid:      #090012;
+    --bg-bottom:   #050008;
+    --bg-panel:    rgba(10, 0, 25, 0.6);
+    --bg-lightbox: rgba(5, 0, 8, 0.95);
+
+    /* Accent — magenta */
+    --magenta:     #ff00ff;
+    --magenta-rgb: 255, 0, 255;
+    --magenta-hover:     #ff66ff;
+    --magenta-hover-rgb: 255, 102, 255;
+
+    /* Accent — cyan */
+    --cyan:     #00ffff;
+    --cyan-rgb: 0, 255, 255;
+
+    /* Text */
+    --text-primary:  #e0d6ff;
+    --text-subtitle: #c9b6ff;
+    --text-muted:    #888;
+    --text-black:    #000;
+}
+
+/* Fonts */
 @font-face {
     font-family: 'Hacked';
     src: url('./fonts/Hacked/Hacked-KerX.ttf') format('truetype');