inital working version

frontend/src/app/globals.css

@@ -3,15 +3,85 @@
 @tailwind utilities;
 
 @layer base {
+  :root {
+    /* Light Mode Variables */
+    --color-background: #FAFAF8;
+    --color-text-primary: #2C3E50;
+    --color-text-header: #0A1628;
+    --color-accent: #2A4D5C;
+    --color-accent-hover: #1E3D4A;
+    --color-border: #E2E8F0;
+    --color-card: #FFFFFF;
+    --color-shadow: rgba(0, 0, 0, 0.1);
+  }
+
+  .dark {
+    /* Dark Mode Variables */
+    --color-background: #0A1628;
+    --color-text-primary: #F5E6D3;
+    --color-text-header: #F5E6D3;
+    --color-accent: #D4A574;
+    --color-accent-hover: #C49860;
+    --color-border: #2A4D5C;
+    --color-card: #1E2D3A;
+    --color-shadow: rgba(0, 0, 0, 0.3);
+  }
+
   html {
     font-family: Inter, system-ui, sans-serif;
+    background-color: var(--color-background);
+    color: var(--color-text-primary);
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-text-primary);
+    transition: background-color 0.2s ease, color 0.2s ease;
   }
 }
 
 @layer components {
+  .theme-bg {
+    background-color: var(--color-background);
+  }
+
+  .theme-text {
+    color: var(--color-text-primary);
+  }
+
+  .theme-header {
+    color: var(--color-text-header);
+  }
+
+  .theme-accent {
+    color: var(--color-accent);
+  }
+
+  .theme-accent-bg {
+    background-color: var(--color-accent);
+  }
+
+  .theme-accent-bg:hover {
+    background-color: var(--color-accent-hover);
+  }
+
+  .theme-border {
+    border-color: var(--color-border);
+  }
+
+  .theme-card {
+    background-color: var(--color-card);
+  }
+
+  .theme-shadow {
+    box-shadow: 0 4px 6px -1px var(--color-shadow), 0 2px 4px -1px var(--color-shadow);
+  }
+
   .reading-content {
-    @apply max-w-reading mx-auto px-6 py-8;
-    font-family: Georgia, Times, serif;
+    @apply mx-auto px-6 py-8;
+    font-family: var(--reading-font-family, Georgia, Times, serif);
+    font-size: var(--reading-font-size, 16px);
+    max-width: var(--reading-max-width, 800px);
     line-height: 1.7;
   }
   
@@ -21,14 +91,31 @@
   .reading-content h4,
   .reading-content h5,
   .reading-content h6 {
-    @apply font-bold mt-8 mb-4;
+    @apply font-bold mt-8 mb-4 theme-header;
   }
   
   .reading-content p {
-    @apply mb-4;
+    @apply mb-4 theme-text;
   }
   
   .reading-content blockquote {
-    @apply border-l-4 border-gray-300 pl-4 italic my-6;
+    @apply border-l-4 pl-4 italic my-6 theme-border theme-text;
+  }
+
+  .reading-content ul,
+  .reading-content ol {
+    @apply mb-4 pl-6 theme-text;
+  }
+
+  .reading-content li {
+    @apply mb-2;
+  }
+
+  .reading-content strong {
+    @apply font-semibold theme-header;
+  }
+
+  .reading-content em {
+    @apply italic;
   }
 }