feat(web): add theme definition system with 5 built-in themes (#493)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/themes/dracula.ts

@@ -0,0 +1,45 @@
+import type { ThemeDefinition } from "./types";
+
+/**
+ * Dracula theme — dark theme with vibrant neon accents.
+ * Based on https://draculatheme.com/
+ */
+export const draculaTheme: ThemeDefinition = {
+  id: "dracula",
+  name: "Dracula",
+  description: "Dark theme with vibrant, neon-inspired accents",
+  author: "Zeno Rocha",
+  isDark: true,
+  colorPreview: ["#282a36", "#44475a", "#f8f8f2", "#7b93db", "#ff79c6"],
+  colors: {
+    "bg-950": "#1e1f29",
+    "bg-900": "#282a36",
+    "bg-850": "#2d303d",
+    "surface-800": "#343746",
+    "surface-750": "#44475a",
+    "border-700": "#555a78",
+    "text-100": "#f8f8f2",
+    "text-300": "#d4d4cd",
+    "text-500": "#6272a4",
+    "blue-500": "#7b93db",
+    "blue-400": "#99aee6",
+    "red-500": "#ff5555",
+    "red-400": "#ff7777",
+    "purple-500": "#bd93f9",
+    "purple-400": "#caa9fa",
+    "teal-500": "#50fa7b",
+    "teal-400": "#69ff93",
+    "amber-500": "#f1fa8c",
+    "amber-400": "#f5fca6",
+    "pink-500": "#ff79c6",
+    "emerald-500": "#50fa7b",
+    "orange-500": "#ffb86c",
+    "cyan-500": "#8be9fd",
+    "indigo-500": "#8b8fe8",
+  },
+  shadows: {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4)",
+  },
+};