darkmode is now available

frontend/src/index.css

@@ -1,15 +1,71 @@
 @import "tailwindcss";
 
-/* Reset #root to full viewport — Tailwind handles all layout via utility classes */
+/* Enable class-based dark mode for Tailwind v4 */
+@variant dark (&:where(.dark, .dark *));
+
+/* ── Semantic color tokens ───────────────────────────────────────────────── */
+:root {
+  --c-text:           #172B4D;
+  --c-muted:          #5E6C84;
+  --c-subtle:         #97A0AF;
+  --c-surface:        #FFFFFF;
+  --c-surface-raised: #FAFBFC;
+  --c-surface-muted:  #F4F5F7;
+  --c-border:         #DFE1E6;
+  --c-brand:          #0052CC;
+  --c-brand-hover:    #0065FF;
+  --c-brand-focus:    #4C9AFF;
+  --c-brand-tint:     #DEEBFF;
+  --c-success:        #00875A;
+  --c-danger:         #DE350B;
+  --c-danger-dark:    #BF2600;
+  --c-danger-tint:    #FFEBE6;
+  --c-warning:        #FF8B00;
+}
+
+.dark {
+  color-scheme: dark;
+  --c-text:           #CBD5E1;
+  --c-muted:          #94A3B8;
+  --c-subtle:         #64748B;
+  --c-surface:        #1E293B;
+  --c-surface-raised: #1A2535;
+  --c-surface-muted:  #0F172A;
+  --c-border:         #334155;
+  --c-brand:          #3B82F6;
+  --c-brand-hover:    #60A5FA;
+  --c-brand-focus:    #93C5FD;
+  --c-brand-tint:     #1E3A5F;
+  --c-success:        #34D399;
+  --c-danger:         #F87171;
+  --c-danger-dark:    #EF4444;
+  --c-danger-tint:    #451a1a;
+  --c-warning:        #FBBF24;
+}
+
 body {
   margin: 0;
   font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #172B4D;
-  background: #FAFBFC;
+  color: var(--c-text);
+  background: var(--c-surface-raised);
 }
 
 #root {
   height: 100dvh;
 }
+
+/* Native form elements in dark mode */
+.dark input,
+.dark textarea,
+.dark select {
+  background-color: var(--c-surface);
+  color: var(--c-text);
+  border-color: var(--c-border);
+  color-scheme: dark;
+}
+.dark input::placeholder,
+.dark textarea::placeholder {
+  color: var(--c-subtle);
+}