feat(ui): add Catppuccin Latte light theme

Map Catppuccin Latte palette to semantic tokens following the official
style guide: Base for background, Mantle/Crust for secondary panes,
Surface 0/1 for hover/active, Blue for buttons/links, Lavender for
accent, Base for text-on-button (On Accent per guide).

diff --git a/ui/web/src/assets/themes/catppuccin-latte.css b/ui/web/src/assets/themes/catppuccin-latte.css
new file mode 100644 (file)
index 0000000..c8da8ff
--- /dev/null
+++ b/ui/web/src/assets/themes/catppuccin-latte.css
@@ -0,0 +1,75 @@
+/* Catppuccin Latte */
+
+:root {
+  /* Palette */
+  --ctp-base: #eff1f5;
+  --ctp-mantle: #e6e9ef;
+  --ctp-crust: #dce0e8;
+  --ctp-surface0: #ccd0da;
+  --ctp-surface1: #bcc0cc;
+  --ctp-text: #4c4f69;
+  --ctp-subtext1: #5c5f77;
+  --ctp-overlay1: #8c8fa1;
+  --ctp-blue: #1e66f5;
+  --ctp-lavender: #7287fd;
+
+  /* Semantic */
+  --color-bg: var(--ctp-base);
+  --color-bg-surface: var(--ctp-mantle);
+  --color-bg-input: var(--ctp-crust);
+  --color-bg-hover: var(--ctp-surface0);
+  --color-bg-active: var(--ctp-surface1);
+  --color-bg-header: var(--ctp-mantle);
+  --color-bg-caption: var(--ctp-crust);
+  --color-bg-button: var(--ctp-blue);
+  --color-bg-button-hover: color-mix(in srgb, var(--ctp-blue) 67%, transparent);
+  --color-text: var(--ctp-text);
+  --color-text-strong: var(--ctp-subtext1);
+  --color-text-muted: var(--ctp-overlay1);
+  --color-text-on-button: var(--ctp-base);
+  --color-primary: var(--ctp-blue);
+  --color-border: var(--ctp-crust);
+  --color-border-row: var(--ctp-surface0);
+  --color-accent: var(--ctp-lavender);
+  --color-shadow-inset: rgba(0, 0, 0, 0.1);
+}
+
+body {
+  color: var(--color-text);
+  background-color: var(--color-bg);
+}
+
+button,
+.button {
+  color: var(--color-text-on-button);
+  background-color: var(--color-bg-button);
+  border: 1px solid var(--color-border);
+  cursor: pointer;
+}
+
+button:hover,
+.button:hover {
+  background-color: var(--color-bg-button-hover);
+}
+
+input,
+select,
+textarea {
+  color: var(--color-text);
+  background-color: var(--color-bg-input);
+  border: 1px solid var(--color-border-row);
+}
+
+input::placeholder {
+  color: var(--color-text-muted);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: 1px solid var(--color-primary);
+}
+
+a {
+  color: var(--color-primary);
+}