@srcroot/ui 0.0.3 → 0.0.5

package/dist/index.js

@@ -18,54 +18,255 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 `;
-var CSS_VARIABLES = `@tailwind base;
+var THEMES = {
+  slate: {
+    name: "Slate",
+    description: "Cool gray with strong blue undertones (default)",
+    light: {
+      background: "0 0% 100%",
+      foreground: "222.2 84% 4.9%",
+      card: "0 0% 100%",
+      "card-foreground": "222.2 84% 4.9%",
+      popover: "0 0% 100%",
+      "popover-foreground": "222.2 84% 4.9%",
+      primary: "222.2 47.4% 11.2%",
+      "primary-foreground": "210 40% 98%",
+      secondary: "210 40% 96.1%",
+      "secondary-foreground": "222.2 47.4% 11.2%",
+      muted: "210 40% 96.1%",
+      "muted-foreground": "215.4 16.3% 46.9%",
+      accent: "210 40% 96.1%",
+      "accent-foreground": "222.2 47.4% 11.2%",
+      destructive: "0 84.2% 60.2%",
+      "destructive-foreground": "210 40% 98%",
+      border: "214.3 31.8% 91.4%",
+      input: "214.3 31.8% 91.4%",
+      ring: "222.2 84% 4.9%"
+    },
+    dark: {
+      background: "222.2 84% 4.9%",
+      foreground: "210 40% 98%",
+      card: "222.2 84% 4.9%",
+      "card-foreground": "210 40% 98%",
+      popover: "222.2 84% 4.9%",
+      "popover-foreground": "210 40% 98%",
+      primary: "210 40% 98%",
+      "primary-foreground": "222.2 47.4% 11.2%",
+      secondary: "217.2 32.6% 17.5%",
+      "secondary-foreground": "210 40% 98%",
+      muted: "217.2 32.6% 17.5%",
+      "muted-foreground": "215 20.2% 65.1%",
+      accent: "217.2 32.6% 17.5%",
+      "accent-foreground": "210 40% 98%",
+      destructive: "0 62.8% 30.6%",
+      "destructive-foreground": "210 40% 98%",
+      border: "217.2 32.6% 17.5%",
+      input: "217.2 32.6% 17.5%",
+      ring: "212.7 26.8% 83.9%"
+    }
+  },
+  neutral: {
+    name: "Neutral",
+    description: "Pure gray, no undertones",
+    light: {
+      background: "0 0% 100%",
+      foreground: "0 0% 3.9%",
+      card: "0 0% 100%",
+      "card-foreground": "0 0% 3.9%",
+      popover: "0 0% 100%",
+      "popover-foreground": "0 0% 3.9%",
+      primary: "0 0% 9%",
+      "primary-foreground": "0 0% 98%",
+      secondary: "0 0% 96.1%",
+      "secondary-foreground": "0 0% 9%",
+      muted: "0 0% 96.1%",
+      "muted-foreground": "0 0% 45.1%",
+      accent: "0 0% 96.1%",
+      "accent-foreground": "0 0% 9%",
+      destructive: "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      border: "0 0% 89.8%",
+      input: "0 0% 89.8%",
+      ring: "0 0% 3.9%"
+    },
+    dark: {
+      background: "0 0% 3.9%",
+      foreground: "0 0% 98%",
+      card: "0 0% 3.9%",
+      "card-foreground": "0 0% 98%",
+      popover: "0 0% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      primary: "0 0% 98%",
+      "primary-foreground": "0 0% 9%",
+      secondary: "0 0% 14.9%",
+      "secondary-foreground": "0 0% 98%",
+      muted: "0 0% 14.9%",
+      "muted-foreground": "0 0% 63.9%",
+      accent: "0 0% 14.9%",
+      "accent-foreground": "0 0% 98%",
+      destructive: "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      border: "0 0% 14.9%",
+      input: "0 0% 14.9%",
+      ring: "0 0% 83.1%"
+    }
+  },
+  stone: {
+    name: "Stone",
+    description: "Warm gray with brown undertones",
+    light: {
+      background: "0 0% 100%",
+      foreground: "24 9.8% 10%",
+      card: "0 0% 100%",
+      "card-foreground": "24 9.8% 10%",
+      popover: "0 0% 100%",
+      "popover-foreground": "24 9.8% 10%",
+      primary: "24 9.8% 10%",
+      "primary-foreground": "60 9.1% 97.8%",
+      secondary: "60 4.8% 95.9%",
+      "secondary-foreground": "24 9.8% 10%",
+      muted: "60 4.8% 95.9%",
+      "muted-foreground": "25 5.3% 44.7%",
+      accent: "60 4.8% 95.9%",
+      "accent-foreground": "24 9.8% 10%",
+      destructive: "0 84.2% 60.2%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      border: "20 5.9% 90%",
+      input: "20 5.9% 90%",
+      ring: "24 9.8% 10%"
+    },
+    dark: {
+      background: "24 9.8% 10%",
+      foreground: "60 9.1% 97.8%",
+      card: "24 9.8% 10%",
+      "card-foreground": "60 9.1% 97.8%",
+      popover: "24 9.8% 10%",
+      "popover-foreground": "60 9.1% 97.8%",
+      primary: "60 9.1% 97.8%",
+      "primary-foreground": "24 9.8% 10%",
+      secondary: "12 6.5% 15.1%",
+      "secondary-foreground": "60 9.1% 97.8%",
+      muted: "12 6.5% 15.1%",
+      "muted-foreground": "24 5.4% 63.9%",
+      accent: "12 6.5% 15.1%",
+      "accent-foreground": "60 9.1% 97.8%",
+      destructive: "0 62.8% 30.6%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      border: "12 6.5% 15.1%",
+      input: "12 6.5% 15.1%",
+      ring: "24 5.7% 82.9%"
+    }
+  },
+  zinc: {
+    name: "Zinc",
+    description: "Cool gray with subtle blue undertones",
+    light: {
+      background: "0 0% 100%",
+      foreground: "240 10% 3.9%",
+      card: "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      popover: "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      primary: "240 5.9% 10%",
+      "primary-foreground": "0 0% 98%",
+      secondary: "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      muted: "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 46.1%",
+      accent: "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      destructive: "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      border: "240 5.9% 90%",
+      input: "240 5.9% 90%",
+      ring: "240 10% 3.9%"
+    },
+    dark: {
+      background: "240 10% 3.9%",
+      foreground: "0 0% 98%",
+      card: "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      popover: "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      primary: "0 0% 98%",
+      "primary-foreground": "240 5.9% 10%",
+      secondary: "240 3.7% 15.9%",
+      "secondary-foreground": "0 0% 98%",
+      muted: "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      accent: "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      destructive: "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      border: "240 3.7% 15.9%",
+      input: "240 3.7% 15.9%",
+      ring: "240 4.9% 83.9%"
+    }
+  },
+  gray: {
+    name: "Gray",
+    description: "True neutral gray",
+    light: {
+      background: "0 0% 100%",
+      foreground: "224 71.4% 4.1%",
+      card: "0 0% 100%",
+      "card-foreground": "224 71.4% 4.1%",
+      popover: "0 0% 100%",
+      "popover-foreground": "224 71.4% 4.1%",
+      primary: "220.9 39.3% 11%",
+      "primary-foreground": "210 20% 98%",
+      secondary: "220 14.3% 95.9%",
+      "secondary-foreground": "220.9 39.3% 11%",
+      muted: "220 14.3% 95.9%",
+      "muted-foreground": "220 8.9% 46.1%",
+      accent: "220 14.3% 95.9%",
+      "accent-foreground": "220.9 39.3% 11%",
+      destructive: "0 84.2% 60.2%",
+      "destructive-foreground": "210 20% 98%",
+      border: "220 13% 91%",
+      input: "220 13% 91%",
+      ring: "224 71.4% 4.1%"
+    },
+    dark: {
+      background: "224 71.4% 4.1%",
+      foreground: "210 20% 98%",
+      card: "224 71.4% 4.1%",
+      "card-foreground": "210 20% 98%",
+      popover: "224 71.4% 4.1%",
+      "popover-foreground": "210 20% 98%",
+      primary: "210 20% 98%",
+      "primary-foreground": "220.9 39.3% 11%",
+      secondary: "215 27.9% 16.9%",
+      "secondary-foreground": "210 20% 98%",
+      muted: "215 27.9% 16.9%",
+      "muted-foreground": "217.9 10.6% 64.9%",
+      accent: "215 27.9% 16.9%",
+      "accent-foreground": "210 20% 98%",
+      destructive: "0 62.8% 30.6%",
+      "destructive-foreground": "210 20% 98%",
+      border: "215 27.9% 16.9%",
+      input: "215 27.9% 16.9%",
+      ring: "216 12.2% 83.9%"
+    }
+  }
+};
+function generateCssVariables(themeName) {
+  const theme = THEMES[themeName];
+  if (!theme) return "";
+  const lightVars = Object.entries(theme.light).map(([key, value]) => `    --${key}: ${value};`).join("\n");
+  const darkVars = Object.entries(theme.dark).map(([key, value]) => `    --${key}: ${value};`).join("\n");
+  return `@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+${lightVars}
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+${darkVars}
   }
 }
 
@@ -77,7 +278,25 @@ var CSS_VARIABLES = `@tailwind base;
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  @keyframes accordion-down {
+    from { height: 0; }
+    to { height: var(--radix-accordion-content-height); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--radix-accordion-content-height); }
+    to { height: 0; }
+  }
+  .animate-accordion-down {
+    animation: accordion-down 0.2s ease-out;
+  }
+  .animate-accordion-up {
+    animation: accordion-up 0.2s ease-out;
+  }
+}
 `;
+}
 var TAILWIND_CONFIG = `import type { Config } from "tailwindcss"
 
 const config: Config = {
@@ -150,12 +369,30 @@ async function init(options) {
   const libDir = path.join(srcDir, "lib");
   const componentsDir = path.join(srcDir, "components", "ui");
   const globalsPath = isAppRouter ? path.join(appDir, "globals.css") : path.join(srcDir, "styles", "globals.css");
+  let selectedTheme = options.theme || "slate";
+  if (!options.yes && !options.theme) {
+    const themeChoices = Object.entries(THEMES).map(([key, theme]) => ({
+      title: `${theme.name} - ${chalk.dim(theme.description)}`,
+      value: key
+    }));
+    const themeResponse = await prompts({
+      type: "select",
+      name: "theme",
+      message: "Which color theme would you like to use?",
+      choices: themeChoices,
+      initial: 0
+      // slate is first
+    });
+    if (themeResponse.theme) {
+      selectedTheme = themeResponse.theme;
+    }
+  }
   if (!options.yes) {
     const response = await prompts([
       {
         type: "confirm",
         name: "proceed",
-        message: `This will create files in ${chalk.cyan(cwd)}. Continue?`,
+        message: `This will create files in ${chalk.cyan(cwd)} with ${chalk.cyan(THEMES[selectedTheme].name)} theme. Continue?`,
         initial: true
       }
     ]);
@@ -171,20 +408,21 @@ async function init(options) {
     const utilsPath = path.join(libDir, "utils.ts");
     await fs.writeFile(utilsPath, UTILS_CONTENT);
     spinner.succeed(`Created ${chalk.cyan("src/lib/utils.ts")}`);
-    spinner.start("Setting up CSS variables...");
+    spinner.start(`Setting up ${chalk.cyan(THEMES[selectedTheme].name)} theme...`);
     const stylesDir = path.dirname(globalsPath);
     await fs.ensureDir(stylesDir);
+    const cssContent = generateCssVariables(selectedTheme);
     if (fs.existsSync(globalsPath)) {
       const existingCss = await fs.readFile(globalsPath, "utf-8");
       if (!existingCss.includes("--background:")) {
-        await fs.writeFile(globalsPath, CSS_VARIABLES + "\n" + existingCss);
-        spinner.succeed(`Updated ${chalk.cyan(path.relative(cwd, globalsPath))}`);
+        await fs.writeFile(globalsPath, cssContent + "\n" + existingCss);
+        spinner.succeed(`Updated ${chalk.cyan(path.relative(cwd, globalsPath))} with ${chalk.cyan(THEMES[selectedTheme].name)} theme`);
       } else {
         spinner.info(`CSS variables already exist in ${chalk.cyan(path.relative(cwd, globalsPath))}`);
       }
     } else {
-      await fs.writeFile(globalsPath, CSS_VARIABLES);
-      spinner.succeed(`Created ${chalk.cyan(path.relative(cwd, globalsPath))}`);
+      await fs.writeFile(globalsPath, cssContent);
+      spinner.succeed(`Created ${chalk.cyan(path.relative(cwd, globalsPath))} with ${chalk.cyan(THEMES[selectedTheme].name)} theme`);
     }
     spinner.start("Setting up Tailwind config...");
     const tailwindConfigPath = path.join(cwd, "tailwind.config.ts");
@@ -232,7 +470,8 @@ Please manually run: npm install ${missing.join(" ")}
       spinner.succeed("All dependencies installed");
     }
     console.log(chalk.green("\n\u2705 Project initialized successfully!\n"));
-    console.log("Next steps:");
+    console.log(`Theme: ${chalk.cyan(THEMES[selectedTheme].name)}`);
+    console.log("\nNext steps:");
     console.log(chalk.dim("  1. Install missing dependencies (if any)"));
     console.log(chalk.dim("  2. Run: npx srcroot-ui add button"));
     console.log();
@@ -725,7 +964,7 @@ async function list() {
 // src/cli/index.ts
 var program = new Command();
 program.name("@srcroot/ui").description("Add polymorphic, accessible UI components to your project").version("0.0.1");
-program.command("init").description("Initialize your project with srcroot-ui").option("-y, --yes", "Skip confirmation prompts", false).option("--cwd <path>", "Working directory", process.cwd()).action(init);
+program.command("init").description("Initialize your project with srcroot-ui").option("-y, --yes", "Skip confirmation prompts", false).option("-t, --theme <theme>", "Color theme (slate, neutral, stone, zinc, gray)").option("--cwd <path>", "Working directory", process.cwd()).action(init);
 program.command("add").description("Add components to your project").argument("[components...]", "Components to add").option("-y, --yes", "Skip confirmation prompts", false).option("-o, --overwrite", "Overwrite existing files", false).option("-a, --all", "Add all available components", false).option("--cwd <path>", "Working directory", process.cwd()).action(add);
 program.command("list").description("List all available components").action(list);
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "A shadcn-style CLI UI library with polymorphic, accessible React components",
   "type": "module",
   "bin": {

package/registry/accordion.tsx

@@ -5,6 +5,7 @@ interface AccordionContextValue {
     value: string[]
     onValueChange: (value: string[]) => void
     type: "single" | "multiple"
+    collapsible: boolean
 }
 
 const AccordionContext = React.createContext<AccordionContextValue | null>(null)
@@ -37,14 +38,14 @@ interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
  * </Accordion>
  */
 const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
-    ({ className, type = "single", value: controlledValue, onValueChange, defaultValue = [], children, ...props }, ref) => {
+    ({ className, type = "single", value: controlledValue, onValueChange, defaultValue = [], collapsible = false, children, ...props }, ref) => {
         const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
 
         const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
         const setValue = onValueChange || setUncontrolledValue
 
         return (
-            <AccordionContext.Provider value={{ value, onValueChange: setValue, type }}>
+            <AccordionContext.Provider value={{ value, onValueChange: setValue, type, collapsible }}>
                 <div ref={ref} className={cn("", className)} {...props}>
                     {children}
                 </div>
@@ -54,6 +55,7 @@ const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
 )
 Accordion.displayName = "Accordion"
 
+
 interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
     value: string
 }
@@ -67,6 +69,8 @@ const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
 
         const toggle = () => {
             if (context.type === "single") {
+                // In single mode with collapsible=false, don't allow closing
+                if (isOpen && !context.collapsible) return
                 context.onValueChange(isOpen ? [] : [value])
             } else {
                 context.onValueChange(

package/registry/design-tokens.css

@@ -0,0 +1,197 @@
+/**
+ * @srcroot/ui Design Tokens
+ * 
+ * A comprehensive design token system for consistent styling.
+ * Copy this file to your project and import it in your main CSS file.
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        /* ========================================
+       COLOR TOKENS (HSL format for Tailwind)
+       ======================================== */
+
+        /* Semantic Colors */
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+
+        /* Surfaces */
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+
+        /* Brand Colors */
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+
+        /* UI Colors */
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+
+        /* Status Colors */
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+        --success: 142.1 76.2% 36.3%;
+        --success-foreground: 355.7 100% 97.3%;
+        --warning: 45.4 93.4% 47.5%;
+        --warning-foreground: 26 83.3% 14.1%;
+        --info: 201.3 96.3% 32.2%;
+        --info-foreground: 210 40% 98%;
+
+        /* Form & Border Colors */
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 222.2 84% 4.9%;
+
+        /* ========================================
+       RADIUS TOKENS
+       ======================================== */
+        --radius: 0.5rem;
+        --radius-sm: 0.25rem;
+        --radius-md: 0.5rem;
+        --radius-lg: 0.75rem;
+        --radius-xl: 1rem;
+        --radius-2xl: 1.5rem;
+        --radius-full: 9999px;
+
+        /* ========================================
+       SPACING TOKENS
+       ======================================== */
+        --spacing-0: 0;
+        --spacing-1: 0.25rem;
+        --spacing-2: 0.5rem;
+        --spacing-3: 0.75rem;
+        --spacing-4: 1rem;
+        --spacing-6: 1.5rem;
+        --spacing-8: 2rem;
+        --spacing-12: 3rem;
+        --spacing-16: 4rem;
+
+        /* ========================================
+       TYPOGRAPHY TOKENS
+       ======================================== */
+        --font-sans: ui-sans-serif, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+
+        --text-xs: 0.75rem;
+        --text-sm: 0.875rem;
+        --text-base: 1rem;
+        --text-lg: 1.125rem;
+        --text-xl: 1.25rem;
+        --text-2xl: 1.5rem;
+        --text-3xl: 1.875rem;
+        --text-4xl: 2.25rem;
+
+        /* ========================================
+       SHADOW TOKENS
+       ======================================== */
+        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+        /* ========================================
+       COMPONENT TOKENS
+       ======================================== */
+        --sidebar-width: 16rem;
+        --sidebar-width-collapsed: 3.5rem;
+        --header-height: 3.5rem;
+    }
+
+    /* ========================================
+     DARK MODE TOKENS
+     ======================================== */
+    .dark {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+        --success: 142.1 70.6% 45.3%;
+        --success-foreground: 144.9 80.4% 10%;
+        --warning: 48 96.5% 53.1%;
+        --warning-foreground: 20.9 91.7% 14.1%;
+        --info: 199.4 95.5% 53.8%;
+        --info-foreground: 204.9 73.1% 12.9%;
+
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 212.7 26.8% 83.9%;
+
+        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4);
+        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
+        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);
+    }
+}
+
+/* ========================================
+   BASE STYLES
+   ======================================== */
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+        font-feature-settings: "rlig" 1, "calt" 1;
+    }
+}
+
+/* ========================================
+   ACCORDION ANIMATION (required)
+   ======================================== */
+@layer utilities {
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+
+    .animate-accordion-down {
+        animation: accordion-down 0.2s ease-out;
+    }
+
+    .animate-accordion-up {
+        animation: accordion-up 0.2s ease-out;
+    }
+}