feat: landing page at /, studio at /studio, ShadCN token fix

- Add LandingPage.tsx — dark-themed hero, pillars, how-it-works,
features grid, and CTA sections using ShadCN Card/Badge
- Move studio shell to /studio/* route; / renders landing page
- Update all internal navigation to use /studio prefix
- Fix tailwind.config.js to map ShadCN CSS variables so bg-card,
text-muted-foreground, etc. actually generate CSS (variables are
full oklch() values, not channel refs, so use var(--X) directly)
- Replace base-ui Button render-prop links with plain Link/<a> tags
to avoid runtime cloning conflict with React Router

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

studio/src/App.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useState, useEffect, useCallback, useRef } from "react";
-import { BrowserRouter, Routes, Route, Outlet, useMatch, useNavigate, useParams } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Outlet, useMatch, useNavigate, useParams, Link } from "react-router-dom";
 import { Menu, Sparkles, UserCircle } from "lucide-react";
 import { StudioView } from "./components/GalleryView";
 import { CharacterProfileView } from "./components/CharacterProfileView";
@@ -7,6 +7,7 @@ import { ProjectsView } from "./components/ProjectsView";
 import { LoraTrainingPage } from "./components/LoraTrainingPage";
 import { ProjectDetailView } from "./components/ProjectDetailView";
 import { AppSidebar } from "./components/sidebar/AppSidebar";
+import LandingPage from "./LandingPage";
 import type { SidebarTab } from "./components/sidebar/AppSidebar";
 import type { JobItem, LoraCheckpoint, LoraTrainingStatus, MediaItem, Project, Scene, Shot, ProjectPhase, ProjectModeData } from "./types";
 
@@ -60,8 +61,8 @@ export function useApp() {
 function Shell() {
   const ctx = useApp();
   const navigate = useNavigate();
-  const projectMatch = useMatch("/projects/:projectId");
-  const loraMatch = useMatch("/lora-training");
+  const projectMatch = useMatch("/studio/projects/:projectId");
+  const loraMatch = useMatch("/studio/lora-training");
 
   // Load project when entering a project-detail route
   const lastProjectId = useRef<string | undefined>(undefined);
@@ -100,7 +101,7 @@ function Shell() {
           onSelectShot: ctx.setSelectedShotId,
           onBack: () => {
             ctx.setSelectedShotId(null);
-            navigate("/projects");
+            navigate("/studio/projects");
           },
           onRefresh: () => {
             const pid = projectMatch?.params.projectId;
@@ -127,11 +128,11 @@ function Shell() {
           )}
           <button
             onClick={() => {
-              navigate("/");
+              navigate("/studio");
               ctx.setActiveSidebarTab("generate");
             }}
             className="flex items-center gap-3 min-w-0 hover:opacity-80 transition"
-            title="Home"
+            title="Studio home"
           >
             <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-rose-500 via-fuchsia-500 to-amber-400 flex items-center justify-center shadow-lg shadow-rose-500/20 ring-1 ring-white/10">
               <Sparkles className="w-4 h-4 text-white" />
@@ -141,6 +142,9 @@ function Shell() {
               <p className="text-[10px] text-rose-400/60 tracking-wide">AMD MI300X</p>
             </div>
           </button>
+          <Link to="/" className="hidden sm:inline-flex items-center text-[11px] text-gray-600 hover:text-gray-400 transition ml-1" title="Back to home">
+            ← Home
+          </Link>
         </div>
 
         <div className="flex items-center gap-2 text-[11px]">
@@ -187,16 +191,16 @@ function Shell() {
             activeTab={ctx.activeSidebarTab}
             onTabChange={(tab) => {
               ctx.setActiveSidebarTab(tab);
-              if (tab === "generate") navigate("/");
-              if (tab === "projects") navigate("/projects");
-              if (tab === "characters") navigate("/lora-training");
+              if (tab === "generate") navigate("/studio");
+              if (tab === "projects") navigate("/studio/projects");
+              if (tab === "characters") navigate("/studio/lora-training");
             }}
             onClose={() => ctx.setSidebarOpen(false)}
             checkpoints={ctx.checkpoints}
             onQueued={ctx.load}
             onSelectCharacter={(id) => {
               ctx.setActiveSidebarTab("characters");
-              navigate(`/characters/${id}`);
+              navigate(`/studio/characters/${id}`);
             }}
             projectMode={projectMode}
           />
@@ -237,14 +241,14 @@ function StudioRoute() {
       error={ctx.error}
       onOpen={ctx.setSelected}
       onDelete={ctx.deleteItem}
-      onOpenProjects={() => window.location.href = "/projects"}
+      onOpenProjects={() => window.location.href = "/studio/projects"}
     />
   );
 }
 
 function ProjectsRoute() {
   const navigate = useNavigate();
-  return <ProjectsView onOpenProject={(id) => navigate(`/projects/${id}`)} />;
+  return <ProjectsView onOpenProject={(id) => navigate(`/studio/projects/${id}`)} />;
 }
 
 function ProjectRoute() {
@@ -277,7 +281,7 @@ function ProjectRoute() {
       onRefresh={() => (projectId ? ctx.loadProject(projectId) : Promise.resolve())}
       onBack={() => {
         ctx.setSelectedShotId(null);
-        navigate("/projects");
+        navigate("/studio/projects");
       }}
       onDeleteScene={ctx.deleteScene}
       onDeleteShot={ctx.deleteShot}
@@ -299,7 +303,7 @@ function CharacterRoute() {
       onGenerate={() => {
         setSidebarOpen(true);
         setActiveSidebarTab("generate");
-        navigate(`/?character=${characterId}`);
+        navigate(`/studio?character=${characterId}`);
       }}
     />
   );
@@ -483,7 +487,8 @@ export default function App() {
     <BrowserRouter>
       <AppContext.Provider value={ctxValue}>
         <Routes>
-          <Route element={<Shell />}>
+          <Route path="/" element={<LandingPage />} />
+          <Route path="/studio" element={<Shell />}>
             <Route index element={<StudioRoute />} />
             <Route path="projects" element={<ProjectsRoute />} />
             <Route path="projects/:projectId" element={<ProjectRoute />} />

studio/src/LandingPage.tsx

@@ -0,0 +1,430 @@
+import { Link } from "react-router-dom";
+import {
+  ArrowRight,
+  Bot,
+  Cpu,
+  Film,
+  Lock,
+  Server,
+  Sparkles,
+  Users,
+  Zap,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+const btnPrimary = "inline-flex items-center gap-2 rounded-xl bg-rose-600 hover:bg-rose-500 px-6 py-2.5 text-sm font-semibold text-white transition shadow-lg shadow-rose-500/20";
+const btnOutline = "inline-flex items-center gap-2 rounded-xl border border-gray-700 hover:border-gray-500 px-6 py-2.5 text-sm font-semibold text-gray-300 hover:text-white transition";
+
+function GitHubIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className}>
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+  );
+}
+
+/* ── Navbar ── */
+function Navbar() {
+  return (
+    <nav className="fixed top-0 inset-x-0 z-50 h-14 border-b border-gray-800/60 bg-black/90 backdrop-blur-xl flex items-center px-6">
+      <div className="max-w-6xl mx-auto w-full flex items-center justify-between">
+        <div className="flex items-center gap-2.5">
+          <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-rose-500 via-fuchsia-500 to-amber-400 flex items-center justify-center">
+            <Sparkles className="w-3.5 h-3.5 text-white" />
+          </div>
+          <span className="font-bold text-sm tracking-tight text-white">
+            <span className="text-rose-400">Nemo</span>flix
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <a
+            href="https://github.com/ortegarod/nemoflix"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs text-gray-500 hover:text-gray-200 transition"
+          >
+            <GitHubIcon className="w-3.5 h-3.5" />
+            <span className="hidden sm:inline">GitHub</span>
+          </a>
+          <Link
+            to="/studio"
+            className="inline-flex items-center gap-1.5 rounded-lg bg-rose-600 hover:bg-rose-500 px-3 py-1.5 text-xs font-semibold text-white transition"
+          >
+            Launch Studio <ArrowRight className="w-3.5 h-3.5" />
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+/* ── Hero ── */
+function Hero() {
+  return (
+    <section className="min-h-screen flex items-center justify-center pt-14 px-6">
+      <div className="max-w-4xl text-center">
+        <Badge
+          className="mb-8 gap-1.5 border-amber-500/30 bg-amber-500/5 text-amber-300 h-7 px-3"
+          variant="outline"
+        >
+          <Cpu className="w-3.5 h-3.5" />
+          AMD MI300X · 192 GB VRAM · ROCm · Open Source
+        </Badge>
+
+        <h1 className="text-5xl md:text-7xl font-bold leading-tight tracking-tight mb-6 text-white">
+          AI Visual Studio
+          <br />
+          <span className="bg-gradient-to-r from-rose-400 via-fuchsia-400 to-amber-400 bg-clip-text text-transparent">
+            Built for Agents.
+          </span>
+        </h1>
+
+        <p className="text-xl text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed">
+          Train character LoRAs on AMD MI300X in ~90 minutes. Generate
+          photorealistic images. Animate to video. Your AI agent controls the
+          whole pipeline through a simple HTTP API.
+        </p>
+
+        <div className="flex items-center justify-center gap-3 flex-wrap">
+          <Link to="/studio" className={btnPrimary}>
+            <Sparkles className="w-4 h-4" />
+            Launch Studio
+          </Link>
+          <a
+            href="https://github.com/ortegarod/nemoflix"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={btnOutline}
+          >
+            <GitHubIcon className="w-4 h-4" />
+            View on GitHub
+          </a>
+        </div>
+
+        <p className="mt-8 text-xs text-gray-700">
+          ComfyUI-native · PostgreSQL · Python 3.11+
+        </p>
+      </div>
+    </section>
+  );
+}
+
+/* ── Three pillars ── */
+function Pillars() {
+  const items = [
+    {
+      icon: Cpu,
+      color: "text-amber-400",
+      border: "border-amber-500/20",
+      bg: "from-amber-950/20",
+      label: "AMD MI300X",
+      body: "Fine-tune Flux.2 LoRAs on 192 GB VRAM via ROCm. ~90 minutes to a consistent character. No CUDA.",
+    },
+    {
+      icon: Bot,
+      color: "text-rose-400",
+      border: "border-rose-500/20",
+      bg: "from-rose-950/20",
+      label: "Open Agent API",
+      body: "Any AI agent connects with one HTTP call. REST API, no SDK, no vendor lock-in. Agents drive everything.",
+    },
+    {
+      icon: Film,
+      color: "text-fuchsia-400",
+      border: "border-fuchsia-500/20",
+      bg: "from-fuchsia-950/20",
+      label: "Image + Video",
+      body: "Photorealistic Flux.2 images and Wan 2.2 I2V animation on the same pipeline. One character, every format.",
+    },
+  ];
+
+  return (
+    <section className="py-20 px-6 border-y border-gray-800/40">
+      <div className="max-w-6xl mx-auto grid md:grid-cols-3 gap-5">
+        {items.map((item) => (
+          <Card
+            key={item.label}
+            className={`border ${item.border} bg-gradient-to-b ${item.bg} to-gray-950/60 ring-0`}
+          >
+            <CardHeader>
+              <item.icon className={`w-5 h-5 ${item.color} mb-1`} />
+              <CardTitle className="text-white text-sm">{item.label}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CardDescription className="text-gray-400 leading-relaxed">
+                {item.body}
+              </CardDescription>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+/* ── How It Works ── */
+function HowItWorks() {
+  const steps = [
+    {
+      n: "01",
+      color: "text-amber-400",
+      ring: "ring-amber-500/30",
+      title: "Train Your Character LoRA",
+      body: "Upload 15–25 reference photos. Nemoflix fine-tunes a Flux.2 LoRA on AMD MI300X — 192 GB VRAM, ROCm, no CUDA. ~90 minutes to a character that looks consistent in every single frame.",
+      aside: (
+        <Card className="border-amber-500/20 bg-gradient-to-b from-amber-950/20 to-gray-950/60 ring-0">
+          <CardHeader>
+            <Badge className="w-fit gap-1.5 border-amber-500/20 bg-amber-500/5 text-amber-400" variant="outline">
+              <Cpu className="w-3 h-3" /> AMD MI300X
+            </Badge>
+            <CardTitle className="text-white text-sm mt-2">Training Config</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-1.5 font-mono text-xs text-gray-400">
+              {[
+                ["model", "flux.2-dev"],
+                ["vram", "192 GB"],
+                ["runtime", "~90 min"],
+                ["steps", "1000"],
+                ["framework", "ROCm 7.2"],
+              ].map(([k, v]) => (
+                <p key={k}>
+                  <span className="text-gray-600 inline-block w-20">{k}</span>
+                  {v}
+                </p>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      ),
+    },
+    {
+      n: "02",
+      color: "text-rose-400",
+      ring: "ring-rose-500/30",
+      title: "Generate Images via API",
+      body: "Your AI agent calls the API with a prompt and character ID. Nemoflix builds the ComfyUI workflow, routes to the right GPU node, queues the job, and returns a prompt ID. Photorealistic results in seconds.",
+      aside: (
+        <Card className="border-gray-800 bg-gray-950 ring-0">
+          <CardHeader>
+            <CardTitle className="text-xs text-gray-500 font-mono font-normal">API call</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 font-mono text-xs">
+            <p className="text-gray-500">
+              POST <span className="text-rose-400">/api/image/generate</span>
+            </p>
+            <div className="rounded-lg bg-black/60 p-3 space-y-1 text-gray-400">
+              <p className="text-gray-600">{"{"}</p>
+              <p className="pl-3">
+                <span className="text-amber-300">"character"</span>:{" "}
+                <span className="text-emerald-300">"rigo"</span>,
+              </p>
+              <p className="pl-3">
+                <span className="text-amber-300">"prompt"</span>:{" "}
+                <span className="text-emerald-300">"walking through a rainy street"</span>
+              </p>
+              <p className="text-gray-600">{"}"}</p>
+            </div>
+            <p className="text-emerald-400/70 pt-1">← prompt_id: a3f9c1d2</p>
+          </CardContent>
+        </Card>
+      ),
+    },
+    {
+      n: "03",
+      color: "text-fuchsia-400",
+      ring: "ring-fuchsia-500/30",
+      title: "Animate to Video",
+      body: "One more API call and Wan 2.2 I2V animates the image into a short video clip. The same character, moving. String clips together into a full scene. Your agent builds the whole sequence autonomously.",
+      aside: (
+        <Card className="border-fuchsia-500/20 bg-gradient-to-b from-fuchsia-950/20 to-gray-950/60 ring-0">
+          <CardHeader>
+            <Badge className="w-fit gap-1.5 border-fuchsia-500/20 bg-fuchsia-500/5 text-fuchsia-400" variant="outline">
+              Wan 2.2 I2V
+            </Badge>
+            <CardTitle className="text-white text-sm mt-2">Video Config</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-1.5 font-mono text-xs text-gray-400">
+              {[
+                ["model", "wan2.2-i2v-14b"],
+                ["input", "still image"],
+                ["output", "5s video clip"],
+                ["cfg", "3.5 · steps 20"],
+              ].map(([k, v]) => (
+                <p key={k}>
+                  <span className="text-gray-600 inline-block w-20">{k}</span>
+                  {v}
+                </p>
+              ))}
+            </div>
+            <p className="text-[11px] text-fuchsia-300/50 mt-4">
+              Same character. Real motion. Not a filter.
+            </p>
+          </CardContent>
+        </Card>
+      ),
+    },
+  ];
+
+  return (
+    <section className="py-28 px-6">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-20">
+          <h2 className="text-4xl font-bold text-white mb-4">How It Works</h2>
+          <p className="text-gray-500 text-lg">
+            From reference photos to animated video in three steps.
+          </p>
+        </div>
+
+        <div className="space-y-24">
+          {steps.map((step, i) => (
+            <div key={step.n} className="grid md:grid-cols-2 gap-12 items-center">
+              <div className={i % 2 === 1 ? "md:order-2" : ""}>
+                <div
+                  className={`w-10 h-10 rounded-full ring-1 ${step.ring} bg-gray-950 flex items-center justify-center mb-4`}
+                >
+                  <span className={`text-xs font-bold font-mono ${step.color}`}>
+                    {step.n}
+                  </span>
+                </div>
+                <h3 className="text-3xl font-bold text-white mb-4">{step.title}</h3>
+                <p className="text-gray-400 text-lg leading-relaxed">{step.body}</p>
+              </div>
+              <div className={i % 2 === 1 ? "md:order-1" : ""}>{step.aside}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ── Features grid ── */
+function Features() {
+  const features = [
+    { icon: Cpu, color: "text-amber-400", title: "LoRA Training on AMD", body: "Fine-tune Flux.2 on AMD MI300X via ROCm. No CUDA required. Monitor job progress live in the Studio." },
+    { icon: Server, color: "text-rose-400", title: "Self-Hosted", body: "Your hardware, your models, your data. No cloud dependency, no rate limits, no data leaving your machine." },
+    { icon: Bot, color: "text-violet-400", title: "Agent API", body: "REST API any agent can call. Characters, images, video, training jobs — all simple HTTP endpoints." },
+    { icon: Users, color: "text-fuchsia-400", title: "Character Registry", body: "Register characters with trigger words and LoRA weights. Every generation references them consistently." },
+    { icon: Zap, color: "text-emerald-400", title: "Multi-GPU Routing", body: "Images and video automatically routed to the right node. Add more GPUs without changing any code." },
+    { icon: Lock, color: "text-blue-400", title: "Open Source", body: "MIT license. Audit the code, fork it, extend it. No black boxes." },
+  ];
+
+  return (
+    <section className="py-28 px-6 border-t border-gray-800/40">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl font-bold text-white mb-4">What's Inside</h2>
+          <p className="text-gray-500 text-lg">
+            Everything you need to run a visual AI studio.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-5">
+          {features.map((f) => (
+            <Card
+              key={f.title}
+              className="border-gray-800/60 bg-gray-950/50 ring-0 hover:border-gray-700 transition-colors"
+            >
+              <CardHeader>
+                <f.icon className={`w-5 h-5 ${f.color}`} />
+                <CardTitle className="text-white text-sm mt-3">{f.title}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="text-gray-500 leading-relaxed">
+                  {f.body}
+                </CardDescription>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ── CTA ── */
+function CTA() {
+  return (
+    <section className="py-32 px-6">
+      <div className="max-w-2xl mx-auto text-center">
+        <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-rose-500 via-fuchsia-500 to-amber-400 flex items-center justify-center mx-auto mb-8 shadow-2xl shadow-rose-500/20">
+          <Sparkles className="w-7 h-7 text-white" />
+        </div>
+        <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
+          Ready to Run It?
+        </h2>
+        <p className="text-xl text-gray-400 mb-10 leading-relaxed">
+          Clone the repo, point it at your GPU nodes, and your agent is
+          generating in minutes.
+        </p>
+        <div className="flex items-center justify-center gap-3 flex-wrap">
+          <Link to="/studio" className={btnPrimary}>
+            <Sparkles className="w-4 h-4" />
+            Launch Studio
+          </Link>
+          <a
+            href="https://github.com/ortegarod/nemoflix"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={btnOutline}
+          >
+            <GitHubIcon className="w-4 h-4" />
+            View on GitHub
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ── Footer ── */
+function Footer() {
+  return (
+    <footer className="border-t border-gray-800/40 py-10 px-6">
+      <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+        <span className="text-sm font-bold">
+          <span className="text-rose-400">Nemo</span>
+          <span className="text-gray-500">flix</span>
+        </span>
+        <div className="flex items-center gap-6 text-xs text-gray-600">
+          <a
+            href="https://github.com/ortegarod/nemoflix"
+            target="_blank"
+            rel="noreferrer"
+            className="hover:text-gray-400 transition"
+          >
+            GitHub
+          </a>
+          <Link to="/studio" className="hover:text-gray-400 transition">
+            Studio
+          </Link>
+          <span>© {new Date().getFullYear()} Nemoflix · MIT License</span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen bg-black text-white">
+      <Navbar />
+      <Hero />
+      <Pillars />
+      <HowItWorks />
+      <Features />
+      <CTA />
+      <Footer />
+    </div>
+  );
+}

studio/tailwind.config.js

@@ -1,8 +1,29 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: ["class"],
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        card: { DEFAULT: "var(--card)", foreground: "var(--card-foreground)" },
+        popover: { DEFAULT: "var(--popover)", foreground: "var(--popover-foreground)" },
+        primary: { DEFAULT: "var(--primary)", foreground: "var(--primary-foreground)" },
+        secondary: { DEFAULT: "var(--secondary)", foreground: "var(--secondary-foreground)" },
+        muted: { DEFAULT: "var(--muted)", foreground: "var(--muted-foreground)" },
+        accent: { DEFAULT: "var(--accent)", foreground: "var(--accent-foreground)" },
+        destructive: { DEFAULT: "var(--destructive)" },
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
   },
   plugins: [],
 };