Some basic improvements

src/styles/_global.scss

@@ -1,5 +1,36 @@
 @use 'variables' as *;
 
+// ── Theme tokens ───────────────────────────────────────────────
+:root {
+  --color-bg:           10 14 26;
+  --color-bg-elevated:  17 24 39;
+  --color-bg-card:      19 29 53;
+  --color-border:       30 45 77;
+  --color-primary:      30 58 138;
+  --color-primary-mid:  37 99 235;
+  --color-primary-glow: 59 130 246;
+  --color-accent:       96 165 250;
+  --color-accent-warm:  245 158 11;
+  --color-text:         226 232 240;
+  --color-text-muted:   148 163 184;
+  --color-text-dim:     71 85 105;
+}
+
+[data-theme='light'] {
+  --color-bg:           248 250 252;
+  --color-bg-elevated:  241 245 249;
+  --color-bg-card:      255 255 255;
+  --color-border:       203 213 225;
+  --color-primary:      30 58 138;
+  --color-primary-mid:  37 99 235;
+  --color-primary-glow: 59 130 246;
+  --color-accent:       37 99 235;
+  --color-accent-warm:  217 119 6;
+  --color-text:         15 23 42;
+  --color-text-muted:   71 85 105;
+  --color-text-dim:     148 163 184;
+}
+
 // ── Reset & base ───────────────────────────────────────────────
 *,
 *::before,
@@ -21,6 +52,7 @@ body {
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
+  transition: background-color $transition-base, color $transition-base;
 }
 
 a {

src/styles/_variables.scss

@@ -1,18 +1,18 @@
 // ── Palette ────────────────────────────────────────────────────
-$color-bg:          #0a0e1a;
-$color-bg-elevated: #111827;
-$color-bg-card:     #131d35;
-$color-border:      #1e2d4d;
+$color-bg:          rgb(var(--color-bg));
+$color-bg-elevated: rgb(var(--color-bg-elevated));
+$color-bg-card:     rgb(var(--color-bg-card));
+$color-border:      rgb(var(--color-border));
 
-$color-primary:     #1e3a8a; // dark blue
-$color-primary-mid: #2563eb;
-$color-primary-glow:#3b82f6;
-$color-accent:      #60a5fa; // light blue for highlights
-$color-accent-warm: #f59e0b; // amber – a touch of personality
+$color-primary:     rgb(var(--color-primary));
+$color-primary-mid: rgb(var(--color-primary-mid));
+$color-primary-glow:rgb(var(--color-primary-glow));
+$color-accent:      rgb(var(--color-accent));
+$color-accent-warm: rgb(var(--color-accent-warm));
 
-$color-text:        #e2e8f0;
-$color-text-muted:  #94a3b8;
-$color-text-dim:    #475569;
+$color-text:        rgb(var(--color-text));
+$color-text-muted:  rgb(var(--color-text-muted));
+$color-text-dim:    rgb(var(--color-text-dim));
 
 // ── Typography ─────────────────────────────────────────────────
 $font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;