bugfix: the whole theming structure overhauled. light/dark mode icon added.

frontend/src/styles/globals.css

@@ -1,40 +1,140 @@
 @import "tailwindcss";
 
-/* 🎨 Design Tokens (CSS-based, no JS dependency) */
-:root {
-  --color-background-primary: #0B1A2B;
-  --color-background-secondary: #0F2236;
-  --color-background-card: #132A42;
+/* Light theme tokens (future-ready) */
+:root[data-theme="light"] {
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
 
-  --color-text-primary: #FFFFFF;
-  --color-text-secondary: #A0AEC0;
+  --color-background-primary: #f6f9fc;
+  --color-background-secondary: #ffffff;
+  --color-background-card: #ffffff;
+  --color-surface-elevated: #f8fbff;
 
-  --color-border: #1F3A5F;
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-muted: #64748b;
 
-  --color-primary: #009CAE;
+  --color-border: #d2dcec;
+  --color-border-strong: #aec0de;
+
+  --color-primary: #009cae;
+  --color-primary-contrast: #031014;
+  --color-primary-soft: rgba(0, 156, 174, 0.16);
+  --color-icon: #e1bc72;
+
+  --web-opacity: 0.12;
+  --web-line: rgba(0, 188, 255, 0.32);
+  --web-glow: rgba(0, 188, 255, 0.42);
+}
+
+/* Dark theme tokens */
+:root[data-theme="dark"] {
+  --color-background-primary: #000c1c;
+  --color-background-secondary: #0b1a2b;
+  --color-background-card: #14253d;
+  --color-surface-elevated: #1b2f4e;
+
+  --color-text-primary: #f5f9ff;
+  --color-text-secondary: #b6c6dd;
+  --color-text-muted: #8ea3bf;
+
+  --color-border: #29456a;
+  --color-border-strong: #3b5f8f;
+
+  --color-primary: #09a9bc;
+  --color-primary-contrast: #001117;
+  --color-primary-soft: rgba(9, 169, 188, 0.2);
+  --color-icon: #f3bb4b;
+}
+
+/* Default theme = dark */
+:root {
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+
+  --color-background-primary: #000c1c;
+  --color-background-secondary: #0a1520;
+  --color-background-card: #14253d;
+  --color-surface-elevated: #1b2f4e;
+
+  --color-text-primary: #f5f9ff;
+  --color-text-secondary: #b6c6dd;
+  --color-text-muted: #8ea3bf;
+
+  --color-border: #29456a;
+  --color-border-strong: #3b5f8f;
+
+  --color-primary: #09a9bc;
+  --color-primary-contrast: #001117;
+  --color-primary-soft: rgba(9, 169, 188, 0.2);
+  --color-icon: #f3bb4b;
+
+  --web-opacity: 0.14;
+  --web-line: rgba(59, 153, 220, 0.34);
+  --web-line-strong: rgba(73, 214, 255, 0.78);
+  --web-glow: rgba(48, 204, 255, 0.55);
 }
 
-/* Tailwind theme mapping */
 @theme inline {
   --color-background-primary: var(--color-background-primary);
   --color-background-secondary: var(--color-background-secondary);
   --color-background-card: var(--color-background-card);
+  --color-surface-elevated: var(--color-surface-elevated);
 
   --color-text-primary: var(--color-text-primary);
   --color-text-secondary: var(--color-text-secondary);
+  --color-text-muted: var(--color-text-muted);
 
   --color-border: var(--color-border);
+  --color-border-strong: var(--color-border-strong);
   --color-primary: var(--color-primary);
+  --color-primary-contrast: var(--color-primary-contrast);
+  --color-primary-soft: var(--color-primary-soft);
 }
 
-/* Base styles */
-html, body {
+html,
+body {
   padding: 0;
   margin: 0;
 }
 
+html {
+  color-scheme: dark;
+}
+
+html[data-theme='light'] {
+  color-scheme: light;
+}
+
 body {
-  background-color: #f9fafb; /* light gray */
-  color: #111827; /* dark text */
+  background-color: var(--color-background-primary);
+  color: var(--color-text-primary);
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+}
+
+.surface-card {
+  background: color-mix(in srgb, var(--color-background-card) 92%, transparent);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
+.surface-panel {
+  background: color-mix(in srgb, var(--color-background-secondary) 96%, transparent);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.icon-flat {
+  stroke-width: 1.9;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Global icon color override (easy to revert) */
+.lucide {
+  color: var(--color-icon);
+  stroke: currentColor;
 }