Base webui and backend additions

webui/src/index.css

@@ -1,13 +1,57 @@
+/* Catppuccin Latte (light) — default until JS sets data-theme */
+:root,
+[data-theme='latte'] {
+  --ctp-base: #eff1f5;
+  --ctp-mantle: #e6e9ef;
+  --ctp-crust: #dce0e8;
+  --ctp-surface0: #ccd0da;
+  --ctp-surface1: #bcc0cc;
+  --ctp-overlay0: #9ca0b0;
+  --ctp-overlay1: #8c8fa1;
+  --ctp-text: #4c4f69;
+  --ctp-subtext0: #6c6f85;
+  --ctp-subtext1: #5c5f77;
+  --ctp-mauve: #8839ef;
+  --ctp-mauve-muted: color-mix(in srgb, var(--ctp-mauve) 18%, var(--ctp-base));
+  --ctp-mauve-hover: color-mix(in srgb, var(--ctp-mauve) 12%, var(--ctp-base));
+  color-scheme: light;
+}
+
+/* Catppuccin Mocha (dark) */
+[data-theme='mocha'] {
+  --ctp-base: #1e1e2e;
+  --ctp-mantle: #181825;
+  --ctp-crust: #11111b;
+  --ctp-surface0: #313244;
+  --ctp-surface1: #45475a;
+  --ctp-overlay0: #6c7086;
+  --ctp-overlay1: #7f849c;
+  --ctp-text: #cdd6f4;
+  --ctp-subtext0: #a6adc8;
+  --ctp-subtext1: #bac2de;
+  --ctp-mauve: #cba6f7;
+  --ctp-mauve-muted: color-mix(in srgb, var(--ctp-mauve) 22%, var(--ctp-base));
+  --ctp-mauve-hover: color-mix(in srgb, var(--ctp-mauve) 14%, var(--ctp-base));
+  color-scheme: dark;
+}
+
 :root {
-  color: #12263a;
+  color: var(--ctp-text);
   background:
-    radial-gradient(circle at top left, #d7e7f2 0%, transparent 45%),
-    linear-gradient(180deg, #f4f8fb 0%, #e8eef3 100%);
+    radial-gradient(
+      circle at top left,
+      color-mix(in srgb, var(--ctp-mauve) 22%, transparent) 0%,
+      transparent 45%
+    ),
+    linear-gradient(180deg, var(--ctp-base) 0%, var(--ctp-mantle) 100%);
   font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  transition:
+    color 160ms ease,
+    background-color 160ms ease;
 }
 
 * {
@@ -17,6 +61,7 @@
 body {
   margin: 0;
   min-height: 100vh;
+  background: transparent;
 }
 
 #root {