feat: introduce css variables

frontend/src/routes/app.css

@@ -22,6 +22,42 @@
 
 :root {
   font-family: 'Fira Code', monospace;
+
+  /* Colors */
+  --primary-color: #007bff;
+  /* Primary brand color */
+  --secondary-color: #6c757d;
+  /* Secondary color */
+  --background-color: #151515;
+  --background-color-lightest: #ffffff;
+  --background-color-lighter: #202020;
+  --background-color-dark: #dae0e5;
+  --background-color-darkest: #c8d1d7;
+  /* Background color */
+  --text-color: #aeaeae;
+  /* Text color */
+  --accent-color: #ffc107;
+  /* Accent color */
+
+  /* Typography */
+  --font-family: Arial, sans-serif;
+  --font-size-base: 16px;
+  /* Base font size */
+  --line-height-base: 1.5;
+  /* Base line height */
+
+  /* Spacing */
+  --spacing-xs: 4px;
+  /* Extra small spacing */
+  --spacing-sm: 8px;
+  /* Small spacing */
+  --spacing-md: 16px;
+  /* Medium spacing */
+  --spacing-lg: 24px;
+  /* Large spacing */
+  --spacing-xl: 32px;
+  /* Extra large spacing */
+
 }
 
 body {