import { jsxs as a, Fragment as t, jsx as e } from "react/jsx-runtime";
import { H as l, T as r, ax as n, C as c, a as s, c as o, aj as u } from "../index-sdOMz8GW.js";
import { Code as d, Circle as m, Layers as p, Moon as g } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const w = () => /* @__PURE__ */ a(t, { children: [
  /* @__PURE__ */ e(
    l,
    {
      title: "Tailwind CSS Configuration",
      description: "Built on Tailwind CSS v4 with Tucu UI Design Tokens for a CSS-first configuration system.",
      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-indigo-500 via-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(d, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
    /* @__PURE__ */ a("div", { className: "text-center", children: [
      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Design Tokens" }),
      /* @__PURE__ */ e(
        r,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Primitive color tokens organized into spectrums"
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: [
      {
        icon: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Color Spectrums",
        description: "Blue, Green, Orange, Gray, Indigo, Pink, Purple, Red, Teal, Yellow, Chartreuse — 11 spectrums total.",
        iconBgClassName: "from-indigo-500 to-purple-500"
      },
      {
        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Scale 0-100",
        description: "Each spectrum has values from 0 to 100 in steps of 5/10 (e.g., blue-0, blue-5, blue-10 ... blue-100).",
        iconBgClassName: "from-cyan-500 to-blue-500"
      },
      {
        icon: /* @__PURE__ */ e(g, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Light & Dark Variants",
        description: "Separate color sets for light and dark modes (e.g., --color-tucu-ui-blue-60 vs --color-tucu-ui-dark-blue-70).",
        iconBgClassName: "from-violet-500 to-purple-500"
      }
    ].map((i) => /* @__PURE__ */ e(n, { layout: "horizontal", ...i }, i.title)) })
  ] }),
  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
    /* @__PURE__ */ a("div", { className: "text-center", children: [
      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Semantic Colors" }),
      /* @__PURE__ */ e(
        r,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Design tokens mapped to functional purposes"
        }
      )
    ] }),
    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(s, { title: "Semantic Color Variables", children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ e(
      o,
      {
        language: "css",
        code: `/* Semantic Background Colors */
--color-semantic-bg-primary: var(--color-tucu-ui-blue-60);
--color-semantic-bg-secondary: var(--color-tucu-ui-gray-10);
--color-semantic-bg-positive: var(--color-tucu-ui-green-60);
--color-semantic-bg-negative: var(--color-tucu-ui-red-60);

/* Semantic Foreground Colors */
--color-semantic-fg: var(--color-tucu-ui-gray-100);
--color-semantic-fg-muted: var(--color-tucu-ui-gray-60);
--color-semantic-fg-primary: var(--color-tucu-ui-blue-60);

/* Dark mode variants */
--color-semantic-dark-bg-primary: var(--color-tucu-ui-dark-blue-70);
--color-semantic-dark-bg-secondary: var(--color-tucu-ui-dark-gray-20);`
      }
    ) }) }) })
  ] }),
  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
    /* @__PURE__ */ a("div", { className: "text-center", children: [
      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Spacing Scale" }),
      /* @__PURE__ */ e(
        r,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Pixel-based spacing mapped to Tucu UI Design Tokens"
        }
      )
    ] }),
    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(s, { title: "Spacing Tokens", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
      /* @__PURE__ */ e(
        o,
        {
          language: "css",
          code: `/* Spacing Scale - Mapped to Tucu UI Design Tokens */
--spacing-0: 0px;
--spacing-1: 8px;    /* --spacing-tucu-ui-1 */
--spacing-2: 16px;   /* --spacing-tucu-ui-2 */
--spacing-3: 24px;   /* --spacing-tucu-ui-3 */
--spacing-4: 32px;   /* --spacing-tucu-ui-4 */
--spacing-5: 40px;   /* --spacing-tucu-ui-5 */
--spacing-6: 48px;   /* --spacing-tucu-ui-6 */
--spacing-8: 64px;   /* --spacing-tucu-ui-8 */
--spacing-10: 80px;  /* --spacing-tucu-ui-10 */`
        }
      ),
      /* @__PURE__ */ e(u, { variant: "info", children: /* @__PURE__ */ a(r, { tag: "p", className: "text-sm", children: [
        /* @__PURE__ */ e("strong", { children: "Note:" }),
        " Components use arbitrary values like",
        " ",
        /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "p-[16px]" }),
        " ",
        "instead of",
        " ",
        /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "p-4" }),
        " ",
        "to maintain original spacing values consistently."
      ] }) })
    ] }) }) })
  ] })
] });
export {
  w as default
};
