add colour and remove topbar

frontend/src/index.css

@@ -2,25 +2,23 @@
 @plugin "flowbite-react/plugin/tailwindcss";
 
 @theme {
+    /* Fonts */
     --font-heading: "Newsreader", serif;
     --font-body: "IBM Plex Sans", sans-serif;
     --font-data: "IBM Plex Mono", monospace;
 
-    /* Breakpoints */
-    --breakpoint-3xl: 1920px;
+    /* Colours */
+    --color-background: #F7F4EE;
+    --color-sidebar: #F2EEE6;
+    --color-card: #FDFBF7;
 
-    --color-primary: oklch(0.55 0.21 254);
-    --color-primary-pressed: oklch(0.45 0.21 254);
-    --color-secondary: oklch(0.94 0.01 250);
-    --color-accent: oklch(0.68 0.20 288);
-    --color-text: oklch(0.17 0.01 270);
-    --color-background: oklch(0.97 0.005 250);
-    --color-surface: oklch(1 0 0);
-    --color-border: oklch(0.91 0.008 250);
-
-    /* Easing */
-    --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
-    --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
+    /* Colour Fonts */
+    --color-text-primary: #2B2620;
+    --color-text-strong: #35302A;
+    --color-faint-mono: #A79C8E;
+    --color-muted: #9A9084;
+    --color-hover: #E7E0D2;
+    --color-hairline: #F0EBE2;
 }
 
 :root {
@@ -35,12 +33,4 @@
 
 body {
     background-color: var(--color-background);
-}
-
-#range-slider .range-slider__range {
-    background: var(--color-primary);
-}
-
-#range-slider .range-slider__thumb {
-    background: var(--color-primary);
 }