colour settings start

static/css/base.css

@@ -1,12 +1,8 @@
-:root {
-    --primary-color: #16767b;
-    --secondary-color: #741b5f;
-    --primary-light: #1a8a90;
-    --secondary-light: #8a2170;
-}
+/* Import color variables */
+@import 'colors.css';
 
 body {
-    background-color: #f8f9fa;
+    background-color: var(--bg-color);
 }
 
 .navbar {
@@ -17,9 +13,9 @@ body {
 }
 
 .sidebar {
-    background-color: white;
+    background-color: var(--white);
     min-height: calc(100vh - 56px);
-    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    box-shadow: 2px 0 5px var(--shadow-color);
     position: sticky;
     top: 56px; /* Height of the navbar */
     height: calc(100vh - 56px);
@@ -27,19 +23,19 @@ body {
 }
 
 .sidebar .nav-link {
-    color: #333;
+    color: var(--text-dark);
     padding: 0.8rem 1rem;
     border-radius: 0.25rem;
     margin: 0.2rem 0;
 }
 
 .sidebar .nav-link:hover {
-    background-color: #f8f9fa;
+    background-color: var(--bg-color);
 }
 
 .sidebar .nav-link.active {
     background-color: var(--primary-color);
-    color: white;
+    color: var(--white);
 }
 
 .sidebar .nav-link i {
@@ -53,7 +49,7 @@ body {
 .card {
     border: none;
     border-radius: 10px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px var(--shadow-color);
 }
 
 .btn-primary {