chore(frontend): wire Tailwind v3 + brand palette

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/src/App.tsx

@@ -1,3 +1,10 @@
 export default function App() {
-  return <div className="p-6">VolcanicCore</div>;
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="rounded-lg bg-slate-900 border border-slate-800 p-6">
+        <h1 className="text-2xl font-semibold text-brand-500">VolcanicCore</h1>
+        <p className="text-slate-400 mt-2 text-sm">Frontend scaffold — Tailwind wired.</p>
+      </div>
+    </div>
+  );
 }

frontend/src/index.css

@@ -1 +1,8 @@
-/* replaced with Tailwind directives in Task 2 */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html, body, #root { height: 100%; }
+  body { @apply bg-slate-950 text-slate-100; }
+}

frontend/tailwind.config.ts

@@ -0,0 +1,21 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        // A small palette so pages don't require ad-hoc color choices.
+        brand: {
+          50:  "#f5f7ff",
+          500: "#5b6cff",
+          600: "#4a5ae8",
+          700: "#3946bf",
+        },
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;