feat: migrate to Nuxt 4 (Nitro) and Tailwind CSS v3

tailwind.config.ts

@@ -0,0 +1,64 @@
+import type { Config } from "tailwindcss";
+
+/**
+ * Theme colors are RGB-triplet CSS variables (see app/assets/css/main.css),
+ * so every token supports Tailwind opacity modifiers (bg-accent/10, ...)
+ * and switches automatically with prefers-color-scheme.
+ */
+const themeColors = {
+  bg: "rgb(var(--bg) / <alpha-value>)",
+  surface: "rgb(var(--surface) / <alpha-value>)",
+  "surface-2": "rgb(var(--surface-2) / <alpha-value>)",
+  "surface-3": "rgb(var(--surface-3) / <alpha-value>)",
+  border: "rgb(var(--border) / <alpha-value>)",
+  "border-strong": "rgb(var(--border-strong) / <alpha-value>)",
+  text: "rgb(var(--text) / <alpha-value>)",
+  muted: "rgb(var(--muted) / <alpha-value>)",
+  faint: "rgb(var(--faint) / <alpha-value>)",
+  accent: "rgb(var(--accent) / <alpha-value>)",
+  "accent-strong": "rgb(var(--accent-strong) / <alpha-value>)",
+  "accent-dim": "rgb(var(--accent-dim) / <alpha-value>)",
+  "accent-text": "rgb(var(--accent-text) / <alpha-value>)",
+  "accent-border": "rgb(var(--accent-border) / <alpha-value>)",
+  ok: "rgb(var(--ok) / <alpha-value>)",
+  "ok-dim": "rgb(var(--ok-dim) / <alpha-value>)",
+  warn: "rgb(var(--warn) / <alpha-value>)",
+  "warn-dim": "rgb(var(--warn-dim) / <alpha-value>)",
+  bad: "rgb(var(--bad) / <alpha-value>)",
+  "bad-dim": "rgb(var(--bad-dim) / <alpha-value>)",
+  "body-text": "rgb(var(--body-text) / <alpha-value>)",
+  "code-bg": "rgb(var(--code-bg) / <alpha-value>)",
+};
+
+export default <Partial<Config>>{
+  content: [],
+  theme: {
+    extend: {
+      colors: themeColors,
+      fontFamily: {
+        ui: "var(--font-ui)",
+        mono: "var(--font-mono)",
+      },
+      borderRadius: {
+        sm: "var(--radius-sm)",
+        DEFAULT: "var(--radius)",
+      },
+      boxShadow: {
+        card: "var(--shadow)",
+        "card-hover": "0 8px 24px -12px rgba(15, 23, 42, 0.25)",
+        "accent-lg": "0 12px 28px -10px var(--accent)",
+        "drawer": "-16px 0 48px rgba(15, 23, 42, 0.12)",
+        "modal": "0 12px 40px rgba(15, 23, 42, 0.25)",
+      },
+      keyframes: {
+        rise: {
+          from: { opacity: "0", transform: "translateY(8px)" },
+          to: { opacity: "1", transform: "none" },
+        },
+      },
+      animation: {
+        rise: "rise 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both",
+      },
+    },
+  },
+};