fix(var): add variable css

[5][DONE]

p/assets/main-styles/styles.css

@@ -1,13 +1,15 @@
+@import "./var.css";
+
 :root {
   color-scheme: dark;
-  --bg: #0b1020;
-  --bg-soft: rgba(11, 16, 32, 0.72);
+  --bg: var(--background-color);
+  --bg-soft: rgba(15, 52, 96, 0.72);
   --panel: rgba(17, 25, 49, 0.82);
-  --panel-border: rgba(148, 163, 184, 0.18);
-  --text: #e5eefc;
-  --muted: #9fb0cc;
-  --accent: #7dd3fc;
-  --accent-strong: #38bdf8;
+  --panel-border: rgba(22, 33, 62, 0.18);
+  --text: var(--generic-text-color);
+  --muted: var(--sidebar-text);
+  --accent: var(--sidebar-text-highlight);
+  --accent-strong: var(--sidebar-select);
   --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
 }
 

p/assets/main-styles/var.css

@@ -0,0 +1,14 @@
+:root {
+  /* Couleurs de la sidebar */
+  --sidebar-background: #1a1a2e;
+  --sidebar-text: #e0e0e0;
+  --sidebar-text-highlight: #00d4ff;
+  --sidebar-select: #16213e;
+
+  /* Couleurs générales */
+  --background-color: #0f3460;
+  --highlighted-text-color: #ffffff;
+  --generic-text-color: #e0e0e0;
+  --error-text-color: #ff6b6b;
+  --warning-text-color: #ffa500;
+}