@nice2dev/design-tokens 1.0.28

package/dist/index.cjs

@@ -0,0 +1,3880 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ENHANCED_ACCESSIBILITY: () => ENHANCED_ACCESSIBILITY,
+  ENHANCED_FOCUS: () => ENHANCED_FOCUS,
+  ENHANCED_TYPOGRAPHY: () => ENHANCED_TYPOGRAPHY,
+  HIGH_CONTRAST: () => HIGH_CONTRAST,
+  HIGH_CONTRAST_DARK: () => HIGH_CONTRAST_DARK,
+  HIGH_VISIBILITY_FOCUS: () => HIGH_VISIBILITY_FOCUS,
+  MAXIMUM_ACCESSIBILITY: () => MAXIMUM_ACCESSIBILITY,
+  MAXIMUM_READABILITY_TYPOGRAPHY: () => MAXIMUM_READABILITY_TYPOGRAPHY,
+  MINIMAL_MOTION: () => MINIMAL_MOTION,
+  PRESETS: () => PRESETS,
+  REDUCED_MOTION: () => REDUCED_MOTION,
+  STANDARD_ACCESSIBILITY: () => STANDARD_ACCESSIBILITY,
+  STANDARD_CONTRAST: () => STANDARD_CONTRAST,
+  STANDARD_FOCUS: () => STANDARD_FOCUS,
+  STANDARD_MOTION: () => STANDARD_MOTION,
+  STANDARD_TYPOGRAPHY: () => STANDARD_TYPOGRAPHY,
+  TokenGenerator: () => TokenGenerator,
+  analyzeColor: () => analyzeColor,
+  buildTokenObject: () => buildTokenObject,
+  checkCircularReferences: () => checkCircularReferences,
+  checkContrast: () => checkContrast,
+  createGenerator: () => createGenerator,
+  createTheme: () => createTheme,
+  createTokenCollection: () => createTokenCollection,
+  cubicBezierToCss: () => cubicBezierToCss,
+  darkenColor: () => darkenColor,
+  defaultOptions: () => defaultOptions,
+  defaultThemes: () => defaultThemes,
+  durationToMs: () => durationToMs,
+  extractReferencePath: () => extractReferencePath,
+  filterTokensByPath: () => filterTokensByPath,
+  filterTokensByType: () => filterTokensByType,
+  findReferences: () => findReferences,
+  flattenTokens: () => flattenTokens,
+  fontWeightToNumber: () => fontWeightToNumber,
+  generateAccessibilityCss: () => generateAccessibilityCss,
+  generateBrandKit: () => generateBrandKit,
+  generateColorScale: () => generateColorScale2,
+  generateColorScaleAsync: () => generateColorScale,
+  generateCompleteStylesheet: () => generateCompleteStylesheet,
+  generateComponentStyles: () => generateComponentStyles,
+  generateDarkModeTokens: () => generateDarkModeTokens,
+  generateFocusCss: () => generateFocusCss,
+  generateHighContrastCss: () => generateHighContrastCss,
+  generateHighContrastTokens: () => generateHighContrastTokens,
+  generateReactThemeContext: () => generateReactThemeContext,
+  generateReducedMotionCss: () => generateReducedMotionCss,
+  generateThemeSwitcher: () => generateThemeSwitcher,
+  generateThemesCss: () => generateThemesCss,
+  generateTokenTypes: () => generateTokenTypes,
+  generateTokens: () => generateTokens,
+  getAccessibleTextColor: () => getAccessibleTextColor,
+  getAllCategories: () => getAllCategories,
+  getCategories: () => getCategories,
+  getContrastRatio: () => getContrastRatio2,
+  getContrastRatioAsync: () => getContrastRatio,
+  getDependencyGraph: () => getDependencyGraph,
+  getPresetByName: () => getPresetByName,
+  getPresetsByCategory: () => getPresetsByCategory,
+  getTokenByPath: () => getTokenByPath,
+  hexToHsl: () => hexToHsl,
+  hexToOklch: () => hexToOklch,
+  hexToRgb: () => hexToRgb,
+  industryBrandKit: () => industryBrandKit,
+  isDesignToken: () => isDesignToken,
+  isReference: () => isReference,
+  isTokenGroup: () => isTokenGroup,
+  lightenColor: () => lightenColor,
+  mergeTokenFiles: () => mergeTokenFiles,
+  parseTokenDirectory: () => parseTokenDirectory,
+  parseTokenFile: () => parseTokenFile,
+  parseTokenFiles: () => parseTokenFiles,
+  pathToCssVariable: () => pathToCssVariable,
+  pathToString: () => pathToString,
+  presetToCss: () => presetToCss,
+  presetToCssVariables: () => presetToCssVariables,
+  presetToTokens: () => presetToTokens,
+  pxToEm: () => pxToEm,
+  pxToRem: () => pxToRem,
+  quickBrandKit: () => quickBrandKit,
+  remToPx: () => remToPx,
+  resolveToVariable: () => resolveToVariable,
+  resolveTokenValue: () => resolveTokenValue,
+  resolveTokens: () => resolveTokens,
+  sortTokensByDependencies: () => sortTokensByDependencies,
+  suggestAccessibleColor: () => suggestAccessibleColor,
+  tokensToCssVariables: () => tokensToCssVariables,
+  transformToCss: () => transformToCss,
+  transformToJs: () => transformToJs,
+  transformToScss: () => transformToScss,
+  transformToTailwind: () => transformToTailwind,
+  transformToTs: () => transformToTs
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/parser.ts
+var fs = __toESM(require("fs"), 1);
+var path = __toESM(require("path"), 1);
+function isDesignToken(obj) {
+  return typeof obj === "object" && obj !== null && "$value" in obj && obj.$value !== void 0;
+}
+function isTokenGroup(obj) {
+  if (typeof obj !== "object" || obj === null) {
+    return false;
+  }
+  if (isDesignToken(obj)) {
+    return false;
+  }
+  return Object.keys(obj).some((key) => !key.startsWith("$"));
+}
+function isReference(value) {
+  if (typeof value !== "string") {
+    return false;
+  }
+  return /^\{[\w.]+\}$/.test(value);
+}
+function extractReferencePath(ref) {
+  const match = ref.match(/^\{([\w.]+)\}$/);
+  if (!match) {
+    throw new Error(`Invalid reference: ${ref}`);
+  }
+  return match[1].split(".");
+}
+function pathToCssVariable(path3, prefix = "nice") {
+  return `--${prefix}-${path3.join("-")}`;
+}
+function pathToString(path3) {
+  return path3.join(".");
+}
+function parseTokenFile(filePath) {
+  const content = fs.readFileSync(filePath, "utf-8");
+  const parsed = JSON.parse(content);
+  return parsed;
+}
+function parseTokenFiles(filePaths) {
+  const merged = {};
+  for (const filePath of filePaths) {
+    const tokens = parseTokenFile(filePath);
+    mergeTokenFiles(merged, tokens);
+  }
+  return merged;
+}
+function mergeTokenFiles(target, source) {
+  for (const [key, value] of Object.entries(source)) {
+    if (key.startsWith("$")) {
+      if (!(key in target)) {
+        target[key] = value;
+      }
+    } else if (typeof value === "object" && value !== null) {
+      if (!(key in target)) {
+        target[key] = {};
+      }
+      const targetValue = target[key];
+      if (typeof targetValue === "object" && targetValue !== null) {
+        mergeTokenFiles(targetValue, value);
+      }
+    } else {
+      target[key] = value;
+    }
+  }
+}
+function flattenTokens(tokenFile, prefix = [], inheritedType) {
+  const tokens = [];
+  const currentType = tokenFile.$type ?? inheritedType;
+  for (const [key, value] of Object.entries(tokenFile)) {
+    if (key.startsWith("$")) {
+      continue;
+    }
+    const currentPath = [...prefix, key];
+    if (isDesignToken(value)) {
+      const token = value;
+      const tokenType = token.$type ?? currentType;
+      const references = [];
+      findReferences(token.$value, references);
+      tokens.push({
+        path: currentPath,
+        name: key,
+        value: token.$value,
+        resolvedValue: "",
+        // Will be populated by resolver
+        type: tokenType,
+        description: token.$description,
+        cssVariable: pathToCssVariable(currentPath),
+        references: references.length > 0 ? references : void 0
+      });
+    } else if (isTokenGroup(value)) {
+      const group = value;
+      const groupType = group.$type ?? currentType;
+      tokens.push(...flattenTokens(group, currentPath, groupType));
+    }
+  }
+  return tokens;
+}
+function findReferences(value, refs) {
+  if (typeof value === "string" && isReference(value)) {
+    refs.push(extractReferencePath(value).join("."));
+  } else if (typeof value === "object" && value !== null) {
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        findReferences(item, refs);
+      }
+    } else {
+      for (const v of Object.values(value)) {
+        findReferences(v, refs);
+      }
+    }
+  }
+}
+function createTokenCollection(tokens) {
+  const byPath = /* @__PURE__ */ new Map();
+  const byName = /* @__PURE__ */ new Map();
+  for (const token of tokens) {
+    const pathStr = pathToString(token.path);
+    byPath.set(pathStr, token);
+    const existing = byName.get(token.name);
+    if (!existing || token.path.length > existing.path.length) {
+      byName.set(token.name, token);
+    }
+  }
+  return { tokens, byPath, byName };
+}
+function parseTokenDirectory(dirPath, pattern = "*.json") {
+  const glob = require("fast-glob");
+  const files = glob.sync(path.join(dirPath, pattern));
+  const tokenFile = parseTokenFiles(files);
+  const flatTokens = flattenTokens(tokenFile);
+  return createTokenCollection(flatTokens);
+}
+function getTokenByPath(collection, path3) {
+  const pathStr = Array.isArray(path3) ? pathToString(path3) : path3;
+  return collection.byPath.get(pathStr);
+}
+function filterTokensByType(collection, type) {
+  return collection.tokens.filter((token) => token.type === type);
+}
+function filterTokensByPath(collection, prefix) {
+  return collection.tokens.filter((token) => pathToString(token.path).startsWith(prefix));
+}
+function getCategories(collection) {
+  const categories = /* @__PURE__ */ new Set();
+  for (const token of collection.tokens) {
+    if (token.path.length > 0) {
+      categories.add(token.path[0]);
+    }
+  }
+  return Array.from(categories);
+}
+
+// src/generator.ts
+var fs2 = __toESM(require("fs"), 1);
+var path2 = __toESM(require("path"), 1);
+
+// src/resolver.ts
+var MAX_RESOLUTION_DEPTH = 10;
+function resolveTokens(collection) {
+  const resolvedTokens = collection.tokens.map((token) => {
+    const resolved = { ...token };
+    resolved.resolvedValue = resolveTokenValue(token.value, collection, 0);
+    return resolved;
+  });
+  return {
+    tokens: resolvedTokens,
+    byPath: new Map(resolvedTokens.map((t) => [pathToString(t.path), t])),
+    byName: new Map(resolvedTokens.map((t) => [t.name, t]))
+  };
+}
+function resolveTokenValue(value, collection, depth) {
+  if (depth > MAX_RESOLUTION_DEPTH) {
+    throw new Error(`Maximum reference depth exceeded while resolving token`);
+  }
+  if (typeof value === "string") {
+    if (isReference(value)) {
+      const refPath = extractReferencePath(value);
+      const refPathStr = pathToString(refPath);
+      const refToken = collection.byPath.get(refPathStr);
+      if (!refToken) {
+        console.warn(`Reference not found: ${value}`);
+        return value;
+      }
+      return resolveTokenValue(refToken.value, collection, depth + 1);
+    }
+    return value;
+  }
+  if (typeof value === "number") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map((v) => {
+      if (typeof v === "string") {
+        return v.includes(" ") ? `"${v}"` : v;
+      }
+      return String(v);
+    }).join(", ");
+  }
+  if (isShadowValue(value)) {
+    return resolveShadowValue(value, collection, depth);
+  }
+  if (Array.isArray(value) && value.length > 0 && isShadowValue(value[0])) {
+    return value.map((s) => resolveShadowValue(s, collection, depth)).join(", ");
+  }
+  if (isTypographyValue(value)) {
+    return resolveTypographyValue(value, collection, depth);
+  }
+  if (isBorderValue(value)) {
+    return resolveBorderValue(value, collection, depth);
+  }
+  return JSON.stringify(value);
+}
+function isShadowValue(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  return "offsetX" in value && "offsetY" in value && "blur" in value;
+}
+function resolveShadowValue(shadow, collection, depth) {
+  const offsetX = resolveTokenValue(shadow.offsetX, collection, depth);
+  const offsetY = resolveTokenValue(shadow.offsetY, collection, depth);
+  const blur = resolveTokenValue(shadow.blur, collection, depth);
+  const spread = resolveTokenValue(shadow.spread, collection, depth);
+  const color = resolveTokenValue(shadow.color, collection, depth);
+  const inset = shadow.inset ? "inset " : "";
+  return `${inset}${offsetX} ${offsetY} ${blur} ${spread} ${color}`;
+}
+function isTypographyValue(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  return "fontFamily" in value && "fontSize" in value;
+}
+function resolveTypographyValue(typography, collection, depth) {
+  const fontFamily = resolveTokenValue(typography.fontFamily, collection, depth);
+  const fontSize = resolveTokenValue(typography.fontSize, collection, depth);
+  const fontWeight = resolveTokenValue(typography.fontWeight, collection, depth);
+  const lineHeight = typography.lineHeight ? resolveTokenValue(typography.lineHeight, collection, depth) : "normal";
+  const fontStyle = typography.fontStyle || "normal";
+  return `${fontStyle} ${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`;
+}
+function isBorderValue(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  return "color" in value && "width" in value && "style" in value;
+}
+function resolveBorderValue(border, collection, depth) {
+  const width = resolveTokenValue(border.width, collection, depth);
+  const style = resolveTokenValue(border.style, collection, depth);
+  const color = resolveTokenValue(border.color, collection, depth);
+  return `${width} ${style} ${color}`;
+}
+function resolveToVariable(value, collection, _prefix = "nice") {
+  if (typeof value === "string" && isReference(value)) {
+    const refPath = extractReferencePath(value);
+    const refPathStr = pathToString(refPath);
+    const refToken = collection.byPath.get(refPathStr);
+    if (refToken) {
+      return `var(${refToken.cssVariable})`;
+    }
+  }
+  return resolveTokenValue(value, collection, 0);
+}
+function getDependencyGraph(collection) {
+  const graph = /* @__PURE__ */ new Map();
+  for (const token of collection.tokens) {
+    const pathStr = pathToString(token.path);
+    const deps = /* @__PURE__ */ new Set();
+    if (token.references) {
+      for (const ref of token.references) {
+        deps.add(ref);
+      }
+    }
+    graph.set(pathStr, deps);
+  }
+  return graph;
+}
+function sortTokensByDependencies(collection) {
+  const graph = getDependencyGraph(collection);
+  const visited = /* @__PURE__ */ new Set();
+  const sorted = [];
+  function visit(pathStr) {
+    if (visited.has(pathStr)) {
+      return;
+    }
+    visited.add(pathStr);
+    const deps = graph.get(pathStr);
+    if (deps) {
+      for (const dep of deps) {
+        visit(dep);
+      }
+    }
+    const token = collection.byPath.get(pathStr);
+    if (token) {
+      sorted.push(token);
+    }
+  }
+  for (const token of collection.tokens) {
+    visit(pathToString(token.path));
+  }
+  return sorted;
+}
+function checkCircularReferences(collection) {
+  const graph = getDependencyGraph(collection);
+  const circles = [];
+  const visiting = /* @__PURE__ */ new Set();
+  const visited = /* @__PURE__ */ new Set();
+  function visit(pathStr, path3) {
+    if (visited.has(pathStr)) {
+      return false;
+    }
+    if (visiting.has(pathStr)) {
+      const circleStart = path3.indexOf(pathStr);
+      circles.push(path3.slice(circleStart));
+      return true;
+    }
+    visiting.add(pathStr);
+    path3.push(pathStr);
+    const deps = graph.get(pathStr);
+    if (deps) {
+      for (const dep of deps) {
+        if (visit(dep, [...path3])) {
+          return true;
+        }
+      }
+    }
+    visiting.delete(pathStr);
+    visited.add(pathStr);
+    return false;
+  }
+  for (const token of collection.tokens) {
+    const pathStr = pathToString(token.path);
+    if (!visited.has(pathStr)) {
+      visit(pathStr, []);
+    }
+  }
+  return circles;
+}
+
+// src/transforms.ts
+var chroma = null;
+async function getChroma() {
+  if (!chroma) {
+    chroma = (await import("chroma-js")).default;
+  }
+  return chroma;
+}
+async function hexToRgb(hex) {
+  const c = await getChroma();
+  const [r, g, b] = c(hex).rgb();
+  return `rgb(${r}, ${g}, ${b})`;
+}
+async function hexToHsl(hex) {
+  const c = await getChroma();
+  const [h, s, l] = c(hex).hsl();
+  return `hsl(${Math.round(h)}deg ${Math.round(s * 100)}% ${Math.round(l * 100)}%)`;
+}
+async function hexToOklch(hex) {
+  const c = await getChroma();
+  const [l, a, b] = c(hex).lab();
+  const L = l / 100;
+  const C = Math.sqrt(a * a + b * b) / 125;
+  const H = Math.atan2(b, a) * 180 / Math.PI;
+  return `oklch(${(L * 100).toFixed(1)}% ${C.toFixed(3)} ${H < 0 ? H + 360 : H}deg)`;
+}
+async function lightenColor(hex, amount) {
+  const c = await getChroma();
+  return c(hex).brighten(amount).hex();
+}
+async function darkenColor(hex, amount) {
+  const c = await getChroma();
+  return c(hex).darken(amount).hex();
+}
+async function getContrastRatio(fg, bg) {
+  const c = await getChroma();
+  return c.contrast(fg, bg);
+}
+async function getAccessibleTextColor(bgColor) {
+  const c = await getChroma();
+  const contrastWhite = c.contrast(bgColor, "white");
+  const contrastBlack = c.contrast(bgColor, "black");
+  return contrastWhite > contrastBlack ? "#ffffff" : "#000000";
+}
+async function generateColorScale(baseColor, steps = 10) {
+  const c = await getChroma();
+  const scale = {};
+  const labels = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
+  const colors = c.scale(["white", baseColor, "black"]).mode("lab").colors(steps + 2);
+  for (let i = 0; i < Math.min(labels.length, colors.length - 1); i++) {
+    const index = Math.floor(i / (labels.length - 1) * (colors.length - 1));
+    scale[labels[i]] = colors[index];
+  }
+  return scale;
+}
+function pxToRem(px, baseFontSize = 16) {
+  const value = typeof px === "string" ? parseFloat(px) : px;
+  return `${value / baseFontSize}rem`;
+}
+function remToPx(rem, baseFontSize = 16) {
+  const value = typeof rem === "string" ? parseFloat(rem) : rem;
+  return `${value * baseFontSize}px`;
+}
+function pxToEm(px, context = 16) {
+  const value = typeof px === "string" ? parseFloat(px) : px;
+  return `${value / context}em`;
+}
+function fontWeightToNumber(weight) {
+  const weights = {
+    thin: 100,
+    hairline: 100,
+    extralight: 200,
+    ultralight: 200,
+    light: 300,
+    normal: 400,
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    demibold: 600,
+    bold: 700,
+    extrabold: 800,
+    ultrabold: 800,
+    black: 900,
+    heavy: 900
+  };
+  return (weights[weight.toLowerCase()] ?? parseInt(weight, 10)) || 400;
+}
+function cubicBezierToCss(values) {
+  if (values.length !== 4) {
+    throw new Error("Cubic bezier must have exactly 4 values");
+  }
+  return `cubic-bezier(${values.join(", ")})`;
+}
+function durationToMs(duration) {
+  if (duration.endsWith("ms")) {
+    return parseFloat(duration);
+  }
+  if (duration.endsWith("s")) {
+    return parseFloat(duration) * 1e3;
+  }
+  return parseFloat(duration);
+}
+function transformToCss(collection, prefix = "nice") {
+  const lines = [];
+  for (const token of collection.tokens) {
+    const varName = `--${prefix}-${token.path.join("-")}`;
+    lines.push(`  ${varName}: ${token.resolvedValue};`);
+  }
+  return `:root {
+${lines.join("\n")}
+}`;
+}
+function transformToScss(collection, prefix = "nice") {
+  const lines = [];
+  for (const token of collection.tokens) {
+    const varName = `$${prefix}-${token.path.join("-")}`;
+    lines.push(`${varName}: ${token.resolvedValue};`);
+  }
+  return lines.join("\n");
+}
+function transformToJs(collection, variableName = "tokens") {
+  const obj = buildTokenObject(collection);
+  return `export const ${variableName} = ${JSON.stringify(obj, null, 2)};`;
+}
+function transformToTs(collection, variableName = "tokens") {
+  const obj = buildTokenObject(collection);
+  const types = generateTokenTypes(collection);
+  return `${types}
+
+export const ${variableName}: Tokens = ${JSON.stringify(obj, null, 2)};`;
+}
+function buildTokenObject(collection) {
+  const result = {};
+  for (const token of collection.tokens) {
+    let current = result;
+    for (let i = 0; i < token.path.length - 1; i++) {
+      const key = token.path[i];
+      if (!(key in current)) {
+        current[key] = {};
+      }
+      current = current[key];
+    }
+    const lastKey = token.path[token.path.length - 1];
+    current[lastKey] = token.resolvedValue;
+  }
+  return result;
+}
+function generateTokenTypes(collection) {
+  const typeObj = buildTypeStructure(collection);
+  return `interface Tokens ${formatTypeStructure(typeObj)}`;
+}
+function buildTypeStructure(collection) {
+  const result = {};
+  for (const token of collection.tokens) {
+    let current = result;
+    for (let i = 0; i < token.path.length - 1; i++) {
+      const key = token.path[i];
+      if (!(key in current)) {
+        current[key] = {};
+      }
+      current = current[key];
+    }
+    const lastKey = token.path[token.path.length - 1];
+    current[lastKey] = "string";
+  }
+  return result;
+}
+function formatTypeStructure(obj, indent = 0) {
+  const spaces = "  ".repeat(indent);
+  const lines = ["{"];
+  for (const [key, value] of Object.entries(obj)) {
+    const safeKey = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key) ? key : `'${key}'`;
+    if (typeof value === "string") {
+      lines.push(`${spaces}  ${safeKey}: ${value};`);
+    } else {
+      lines.push(
+        `${spaces}  ${safeKey}: ${formatTypeStructure(value, indent + 1)};`
+      );
+    }
+  }
+  lines.push(`${spaces}}`);
+  return lines.join("\n");
+}
+function transformToTailwind(collection) {
+  const colors = {};
+  const spacing = {};
+  const fontSize = {};
+  const fontFamily = {};
+  const borderRadius = {};
+  const boxShadow = {};
+  for (const token of collection.tokens) {
+    const path3 = token.path;
+    const value = token.resolvedValue;
+    if (path3[0] === "color" || path3[0] === "colors") {
+      setNestedValue(colors, path3.slice(1), value);
+    } else if (path3[0] === "spacing") {
+      spacing[path3.slice(1).join("-")] = value;
+    } else if (path3[0] === "typography" && path3[1] === "fontSize") {
+      fontSize[path3[2]] = value;
+    } else if (path3[0] === "typography" && path3[1] === "fontFamily") {
+      fontFamily[path3[2]] = value.split(",").map((f) => f.trim());
+    } else if (path3[0] === "effects" && path3[1] === "radius") {
+      borderRadius[path3[2]] = value;
+    } else if (path3[0] === "effects" && path3[1] === "shadow") {
+      boxShadow[path3[2]] = value;
+    }
+  }
+  const config = {
+    theme: {
+      extend: {
+        colors,
+        spacing,
+        fontSize,
+        fontFamily,
+        borderRadius,
+        boxShadow
+      }
+    }
+  };
+  return `module.exports = ${JSON.stringify(config, null, 2)};`;
+}
+function setNestedValue(obj, path3, value) {
+  let current = obj;
+  for (let i = 0; i < path3.length - 1; i++) {
+    const key = path3[i];
+    if (!(key in current)) {
+      current[key] = {};
+    }
+    current = current[key];
+  }
+  current[path3[path3.length - 1]] = value;
+}
+function applyThemeOverrides(baseCollection, overrides) {
+  const mergedTokens = [...baseCollection.tokens];
+  for (const override of overrides.tokens) {
+    const pathStr = pathToString(override.path);
+    const existingIndex = mergedTokens.findIndex((t) => pathToString(t.path) === pathStr);
+    if (existingIndex >= 0) {
+      mergedTokens[existingIndex] = { ...mergedTokens[existingIndex], ...override };
+    } else {
+      mergedTokens.push(override);
+    }
+  }
+  return {
+    tokens: mergedTokens,
+    byPath: new Map(mergedTokens.map((t) => [pathToString(t.path), t])),
+    byName: new Map(mergedTokens.map((t) => [t.name, t]))
+  };
+}
+
+// src/themes.ts
+var defaultThemes = {
+  light: {
+    name: "light",
+    displayName: "Light",
+    mode: "light",
+    selector: ':root, [data-theme="light"]'
+  },
+  dark: {
+    name: "dark",
+    displayName: "Dark",
+    mode: "dark",
+    selector: '[data-theme="dark"]',
+    mediaQuery: "(prefers-color-scheme: dark)",
+    extends: "light"
+  },
+  "high-contrast": {
+    name: "high-contrast",
+    displayName: "High Contrast",
+    mode: "high-contrast",
+    selector: '[data-theme="high-contrast"]',
+    mediaQuery: "(prefers-contrast: more)",
+    extends: "light"
+  },
+  "high-contrast-dark": {
+    name: "high-contrast-dark",
+    displayName: "High Contrast Dark",
+    mode: "high-contrast-dark",
+    selector: '[data-theme="high-contrast-dark"]',
+    extends: "dark"
+  },
+  dim: {
+    name: "dim",
+    displayName: "Dim",
+    mode: "dim",
+    selector: '[data-theme="dim"]',
+    extends: "dark"
+  }
+};
+function createTheme(name, baseTokens, overrideTokens, config) {
+  const tokens = overrideTokens ? applyThemeOverrides(baseTokens, overrideTokens) : baseTokens;
+  const resolvedTokens = resolveTokens(tokens);
+  const themeConfig = { ...defaultThemes.light, ...config, name };
+  return {
+    name,
+    tokens: resolvedTokens,
+    extends: themeConfig.extends,
+    selector: themeConfig.selector,
+    mediaQuery: themeConfig.mediaQuery
+  };
+}
+function generateThemesCss(themes, prefix = "nice") {
+  const sections = [];
+  for (const theme of themes) {
+    const vars = generateThemeVariables(theme, prefix);
+    sections.push(`${theme.selector} {
+${vars}
+}`);
+    if (theme.mediaQuery) {
+      sections.push(
+        `@media ${theme.mediaQuery} {
+  :root {
+${vars.split("\n").map((l) => `  ${l}`).join("\n")}
+  }
+}`
+      );
+    }
+  }
+  return sections.join("\n\n");
+}
+function generateThemeVariables(theme, prefix) {
+  const lines = [];
+  for (const token of theme.tokens.tokens) {
+    const varName = `--${prefix}-${token.path.join("-")}`;
+    lines.push(`  ${varName}: ${token.resolvedValue};`);
+  }
+  return lines.join("\n");
+}
+function generateThemeSwitcher() {
+  return `
+/**
+ * Nice2Dev Theme Switcher
+ * Auto-generated by @nice2dev/design-tokens
+ */
+
+const THEME_KEY = 'nice-theme';
+const THEMES = ['light', 'dark', 'high-contrast', 'high-contrast-dark', 'dim'];
+
+/**
+ * Get current theme
+ */
+function getTheme() {
+  return document.documentElement.getAttribute('data-theme') || 'light';
+}
+
+/**
+ * Set theme
+ */
+function setTheme(theme) {
+  if (!THEMES.includes(theme)) {
+    console.warn(\`Invalid theme: \${theme}\`);
+    return;
+  }
+  
+  document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem(THEME_KEY, theme);
+  
+  // Dispatch event
+  window.dispatchEvent(new CustomEvent('nice-theme-change', { detail: { theme } }));
+}
+
+/**
+ * Toggle between light and dark
+ */
+function toggleTheme() {
+  const current = getTheme();
+  const next = current === 'dark' ? 'light' : 'dark';
+  setTheme(next);
+  return next;
+}
+
+/**
+ * Use system preference
+ */
+function useSystemTheme() {
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const prefersHighContrast = window.matchMedia('(prefers-contrast: more)').matches;
+  
+  let theme = 'light';
+  if (prefersDark && prefersHighContrast) {
+    theme = 'high-contrast-dark';
+  } else if (prefersDark) {
+    theme = 'dark';
+  } else if (prefersHighContrast) {
+    theme = 'high-contrast';
+  }
+  
+  setTheme(theme);
+  return theme;
+}
+
+/**
+ * Initialize theme on page load
+ */
+function initTheme() {
+  const saved = localStorage.getItem(THEME_KEY);
+  
+  if (saved && THEMES.includes(saved)) {
+    setTheme(saved);
+  } else {
+    useSystemTheme();
+  }
+  
+  // Listen for system changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (!localStorage.getItem(THEME_KEY)) {
+      useSystemTheme();
+    }
+  });
+}
+
+// Auto-init
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTheme);
+  } else {
+    initTheme();
+  }
+}
+
+export { getTheme, setTheme, toggleTheme, useSystemTheme, initTheme, THEMES };
+`.trim();
+}
+function generateReactThemeContext() {
+  return `
+'use client';
+
+import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
+
+type Theme = 'light' | 'dark' | 'high-contrast' | 'high-contrast-dark' | 'dim';
+
+interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+  useSystemTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+const THEME_KEY = 'nice-theme';
+const THEMES: Theme[] = ['light', 'dark', 'high-contrast', 'high-contrast-dark', 'dim'];
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+}
+
+export function ThemeProvider({ children, defaultTheme = 'light' }: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(defaultTheme);
+
+  useEffect(() => {
+    const saved = localStorage.getItem(THEME_KEY) as Theme | null;
+    if (saved && THEMES.includes(saved)) {
+      setThemeState(saved);
+      document.documentElement.setAttribute('data-theme', saved);
+    } else {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const initial = prefersDark ? 'dark' : 'light';
+      setThemeState(initial);
+      document.documentElement.setAttribute('data-theme', initial);
+    }
+  }, []);
+
+  const setTheme = useCallback((newTheme: Theme) => {
+    setThemeState(newTheme);
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem(THEME_KEY, newTheme);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  }, [theme, setTheme]);
+
+  const useSystemTheme = useCallback(() => {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const prefersHighContrast = window.matchMedia('(prefers-contrast: more)').matches;
+    
+    let systemTheme: Theme = 'light';
+    if (prefersDark && prefersHighContrast) {
+      systemTheme = 'high-contrast-dark';
+    } else if (prefersDark) {
+      systemTheme = 'dark';
+    } else if (prefersHighContrast) {
+      systemTheme = 'high-contrast';
+    }
+    
+    setTheme(systemTheme);
+    localStorage.removeItem(THEME_KEY);
+  }, [setTheme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme, useSystemTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+export { THEMES };
+export type { Theme };
+`.trim();
+}
+async function generateDarkModeTokens(lightTokens) {
+  const darkTokens = [];
+  const chroma2 = (await import("chroma-js")).default;
+  for (const token of lightTokens.tokens) {
+    if (token.type !== "color" || !token.path.includes("semantic")) {
+      continue;
+    }
+    const pathStr = pathToString(token.path);
+    if (pathStr.includes("dark")) {
+      continue;
+    }
+    try {
+      const color = chroma2(token.resolvedValue);
+      let darkValue;
+      if (token.name.includes("background") || token.name.includes("bg")) {
+        const [h, s, l] = color.hsl();
+        darkValue = chroma2.hsl(h, s, 1 - l).hex();
+      } else if (token.name.includes("text") || token.name.includes("foreground")) {
+        const [h, s, l] = color.hsl();
+        darkValue = chroma2.hsl(h, s, 1 - l).hex();
+      } else if (token.name.includes("border")) {
+        darkValue = color.brighten(0.5).hex();
+      } else {
+        const [h, s, l] = color.hsl();
+        darkValue = chroma2.hsl(h, Math.min(s * 1.1, 1), Math.min(l * 1.2, 0.9)).hex();
+      }
+      darkTokens.push({
+        ...token,
+        value: darkValue,
+        resolvedValue: darkValue
+      });
+    } catch {
+    }
+  }
+  return darkTokens;
+}
+async function generateHighContrastTokens(baseTokens, _minContrast = 7) {
+  const contrastTokens = [];
+  const chroma2 = (await import("chroma-js")).default;
+  for (const token of baseTokens.tokens) {
+    if (token.type !== "color") {
+      continue;
+    }
+    try {
+      const color = chroma2(token.resolvedValue);
+      const [, s, l] = color.hsl();
+      let newL = l;
+      if (l > 0.5) {
+        newL = Math.min(l * 1.2, 1);
+      } else {
+        newL = Math.max(l * 0.8, 0);
+      }
+      const newS = Math.min(s * 1.3, 1);
+      const newColor = chroma2.hsl(color.get("hsl.h"), newS, newL);
+      contrastTokens.push({
+        ...token,
+        value: newColor.hex(),
+        resolvedValue: newColor.hex()
+      });
+    } catch {
+    }
+  }
+  return contrastTokens;
+}
+
+// src/generator.ts
+var defaultOptions = {
+  formats: ["css"],
+  outputDir: "./dist",
+  prefix: "nice",
+  includePrimitives: true,
+  separateFiles: false,
+  includeDarkMode: true,
+  includeComponents: true
+};
+var TokenGenerator = class {
+  constructor(options = {}) {
+    this.plugins = [];
+    this.collection = null;
+    this.themes = [];
+    this.options = { ...defaultOptions, ...options };
+  }
+  /**
+   * Add plugin
+   */
+  use(plugin) {
+    this.plugins.push(plugin);
+    return this;
+  }
+  /**
+   * Load tokens from files
+   */
+  load(files) {
+    const tokenFile = parseTokenFiles(files);
+    let processedTokens = [tokenFile];
+    for (const plugin of this.plugins) {
+      if (plugin.beforeResolve) {
+        processedTokens = plugin.beforeResolve(processedTokens);
+      }
+    }
+    const flatTokens = flattenTokens(processedTokens[0]);
+    let collection = createTokenCollection(flatTokens);
+    collection = resolveTokens(collection);
+    for (const plugin of this.plugins) {
+      if (plugin.afterResolve) {
+        collection = plugin.afterResolve(collection);
+      }
+    }
+    this.collection = collection;
+    return this;
+  }
+  /**
+   * Load tokens from directory
+   */
+  loadDirectory(dir, pattern = "**/*.json") {
+    const glob = require("fast-glob");
+    const files = glob.sync(path2.join(dir, pattern));
+    return this.load(files);
+  }
+  /**
+   * Add theme
+   */
+  addTheme(name, overrideTokens) {
+    if (!this.collection) {
+      throw new Error("Load tokens first before adding themes");
+    }
+    const theme = createTheme(name, this.collection, overrideTokens);
+    this.themes.push(theme);
+    return this;
+  }
+  /**
+   * Generate output files
+   */
+  async generate() {
+    if (!this.collection) {
+      throw new Error("No tokens loaded");
+    }
+    fs2.mkdirSync(this.options.outputDir, { recursive: true });
+    for (const format of this.options.formats) {
+      await this.generateFormat(format);
+    }
+    if (this.themes.length > 0) {
+      await this.generateThemeFiles();
+    }
+  }
+  /**
+   * Generate single format
+   */
+  async generateFormat(format) {
+    if (!this.collection) {
+      return;
+    }
+    for (const plugin of this.plugins) {
+      if (plugin.customFormat) {
+        const output = plugin.customFormat(this.collection, this.options);
+        if (output) {
+          const ext = this.getExtension(format);
+          fs2.writeFileSync(
+            path2.join(this.options.outputDir, `tokens.${plugin.name}.${ext}`),
+            output
+          );
+        }
+      }
+    }
+    if (this.options.separateFiles) {
+      await this.generateSeparateFiles(format);
+    } else {
+      await this.generateSingleFile(format);
+    }
+  }
+  /**
+   * Generate single output file
+   */
+  async generateSingleFile(format) {
+    if (!this.collection) {
+      return;
+    }
+    const content = this.transform(this.collection, format);
+    const filename = `tokens.${this.getExtension(format)}`;
+    const filepath = path2.join(this.options.outputDir, filename);
+    fs2.writeFileSync(filepath, content);
+    console.log(`Generated: ${filepath}`);
+  }
+  /**
+   * Generate separate files by category
+   */
+  async generateSeparateFiles(format) {
+    if (!this.collection) {
+      return;
+    }
+    const categories = getCategories(this.collection);
+    const ext = this.getExtension(format);
+    for (const category of categories) {
+      const tokens = this.collection.tokens.filter((t) => t.path[0] === category);
+      const catCollection = {
+        tokens,
+        byPath: new Map(tokens.map((t) => [t.path.join("."), t])),
+        byName: new Map(tokens.map((t) => [t.name, t]))
+      };
+      const content = this.transform(catCollection, format);
+      const filename = `${category}.${ext}`;
+      const filepath = path2.join(this.options.outputDir, filename);
+      fs2.writeFileSync(filepath, content);
+      console.log(`Generated: ${filepath}`);
+    }
+    this.generateIndexFile(categories, format);
+  }
+  /**
+   * Generate index file for separated files
+   */
+  generateIndexFile(categories, format) {
+    const ext = this.getExtension(format);
+    let content = "";
+    switch (format) {
+      case "css":
+        content = categories.map((c) => `@import './${c}.css';`).join("\n");
+        break;
+      case "scss":
+        content = categories.map((c) => `@import './${c}';`).join("\n");
+        break;
+      case "js":
+      case "ts":
+        content = categories.map((c) => `export * from './${c}';`).join("\n");
+        break;
+      default:
+        return;
+    }
+    const filepath = path2.join(this.options.outputDir, `index.${ext}`);
+    fs2.writeFileSync(filepath, content);
+    console.log(`Generated: ${filepath}`);
+  }
+  /**
+   * Transform collection to format
+   */
+  transform(collection, format) {
+    const prefix = this.options.prefix ?? "nice";
+    switch (format) {
+      case "css":
+        return transformToCss(collection, prefix);
+      case "scss":
+        return transformToScss(collection, prefix);
+      case "js":
+        return transformToJs(collection);
+      case "ts":
+        return transformToTs(collection);
+      case "json":
+        return JSON.stringify(this.buildNestedObject(collection), null, 2);
+      case "tailwind":
+        return transformToTailwind(collection);
+      default:
+        throw new Error(`Unsupported format: ${format}`);
+    }
+  }
+  /**
+   * Build nested object from flat tokens
+   */
+  buildNestedObject(collection) {
+    const result = {};
+    for (const token of collection.tokens) {
+      let current = result;
+      for (let i = 0; i < token.path.length - 1; i++) {
+        const key = token.path[i];
+        if (!(key in current)) {
+          current[key] = {};
+        }
+        current = current[key];
+      }
+      current[token.path[token.path.length - 1]] = token.resolvedValue;
+    }
+    return result;
+  }
+  /**
+   * Get file extension for format
+   */
+  getExtension(format) {
+    switch (format) {
+      case "css":
+        return "css";
+      case "scss":
+        return "scss";
+      case "js":
+        return "js";
+      case "ts":
+        return "ts";
+      case "json":
+        return "json";
+      case "tailwind":
+        return "tailwind.js";
+      default:
+        return "txt";
+    }
+  }
+  /**
+   * Generate theme-related files
+   */
+  async generateThemeFiles() {
+    const prefix = this.options.prefix ?? "nice";
+    const themesCss = generateThemesCss(this.themes, prefix);
+    fs2.writeFileSync(path2.join(this.options.outputDir, "themes.css"), themesCss);
+    console.log(`Generated: themes.css`);
+    const switcherJs = generateThemeSwitcher();
+    fs2.writeFileSync(path2.join(this.options.outputDir, "theme-switcher.js"), switcherJs);
+    console.log(`Generated: theme-switcher.js`);
+    const reactContext = generateReactThemeContext();
+    fs2.writeFileSync(path2.join(this.options.outputDir, "ThemeContext.tsx"), reactContext);
+    console.log(`Generated: ThemeContext.tsx`);
+  }
+  /**
+   * Get generated token collection
+   */
+  getCollection() {
+    return this.collection;
+  }
+  /**
+   * Get generated themes
+   */
+  getThemes() {
+    return this.themes;
+  }
+};
+function createGenerator(options) {
+  return new TokenGenerator(options);
+}
+async function generateTokens(tokenDir, outputDir, options) {
+  const generator = createGenerator({
+    ...options,
+    outputDir
+  });
+  generator.loadDirectory(tokenDir);
+  await generator.generate();
+}
+
+// src/presets.ts
+function generateColorScale2(baseColor) {
+  return {
+    50: lighten(baseColor, 0.95),
+    100: lighten(baseColor, 0.9),
+    200: lighten(baseColor, 0.75),
+    300: lighten(baseColor, 0.6),
+    400: lighten(baseColor, 0.3),
+    500: baseColor,
+    600: darken(baseColor, 0.1),
+    700: darken(baseColor, 0.25),
+    800: darken(baseColor, 0.4),
+    900: darken(baseColor, 0.55),
+    950: darken(baseColor, 0.7)
+  };
+}
+function hexToHsl2(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return [h * 360, s * 100, l * 100];
+}
+function hslToHex(h, s, l) {
+  h /= 360;
+  s /= 100;
+  l /= 100;
+  const hue2rgb = (p, q, t) => {
+    if (t < 0) {
+      t += 1;
+    }
+    if (t > 1) {
+      t -= 1;
+    }
+    if (t < 1 / 6) {
+      return p + (q - p) * 6 * t;
+    }
+    if (t < 1 / 2) {
+      return q;
+    }
+    if (t < 2 / 3) {
+      return p + (q - p) * (2 / 3 - t) * 6;
+    }
+    return p;
+  };
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  const toHex = (n) => Math.round(n * 255).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function lighten(hex, amount) {
+  const [h, s, l] = hexToHsl2(hex);
+  return hslToHex(h, s, Math.min(100, l + (100 - l) * amount));
+}
+function darken(hex, amount) {
+  const [h, s, l] = hexToHsl2(hex);
+  return hslToHex(h, s, Math.max(0, l * (1 - amount)));
+}
+var GRAY_NEUTRAL = {
+  50: "#f9fafb",
+  100: "#f3f4f6",
+  200: "#e5e7eb",
+  300: "#d1d5db",
+  400: "#9ca3af",
+  500: "#6b7280",
+  600: "#4b5563",
+  700: "#374151",
+  800: "#1f2937",
+  900: "#111827",
+  950: "#030712"
+};
+var SLATE_NEUTRAL = {
+  50: "#f8fafc",
+  100: "#f1f5f9",
+  200: "#e2e8f0",
+  300: "#cbd5e1",
+  400: "#94a3b8",
+  500: "#64748b",
+  600: "#475569",
+  700: "#334155",
+  800: "#1e293b",
+  900: "#0f172a",
+  950: "#020617"
+};
+var ZINC_NEUTRAL = {
+  50: "#fafafa",
+  100: "#f4f4f5",
+  200: "#e4e4e7",
+  300: "#d4d4d8",
+  400: "#a1a1aa",
+  500: "#71717a",
+  600: "#52525b",
+  700: "#3f3f46",
+  800: "#27272a",
+  900: "#18181b",
+  950: "#09090b"
+};
+var WARM_NEUTRAL = {
+  50: "#faf5f0",
+  100: "#f0e8dd",
+  200: "#e0d0bb",
+  300: "#cdb899",
+  400: "#b89d77",
+  500: "#9a7f5a",
+  600: "#7d6548",
+  700: "#604c37",
+  800: "#443527",
+  900: "#2a1f18",
+  950: "#150f0c"
+};
+var PRESETS = [
+  // ─────────────────────────────────────────────────────────────────────────
+  // BRAND COLORS
+  // ─────────────────────────────────────────────────────────────────────────
+  {
+    name: "ocean-blue",
+    displayName: "Ocean Blue",
+    description: "Deep blue tones inspired by the ocean",
+    category: "brand",
+    colors: {
+      primary: generateColorScale2("#0077b6"),
+      secondary: generateColorScale2("#00b4d8"),
+      neutral: SLATE_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6"
+    }
+  },
+  {
+    name: "forest-green",
+    displayName: "Forest Green",
+    description: "Natural green tones inspired by forests",
+    category: "brand",
+    colors: {
+      primary: generateColorScale2("#15803d"),
+      secondary: generateColorScale2("#84cc16"),
+      neutral: GRAY_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6"
+    }
+  },
+  {
+    name: "sunset-orange",
+    displayName: "Sunset Orange",
+    description: "Warm orange and coral tones",
+    category: "brand",
+    colors: {
+      primary: generateColorScale2("#ea580c"),
+      secondary: generateColorScale2("#facc15"),
+      neutral: WARM_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#dc2626",
+      info: "#0ea5e9"
+    }
+  },
+  {
+    name: "royal-purple",
+    displayName: "Royal Purple",
+    description: "Elegant purple and violet tones",
+    category: "brand",
+    colors: {
+      primary: generateColorScale2("#7c3aed"),
+      secondary: generateColorScale2("#c026d3"),
+      neutral: SLATE_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6"
+    }
+  },
+  {
+    name: "cherry-red",
+    displayName: "Cherry Red",
+    description: "Bold red with dark accents",
+    category: "bold",
+    colors: {
+      primary: generateColorScale2("#dc2626"),
+      secondary: generateColorScale2("#1f2937"),
+      neutral: ZINC_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#b91c1c",
+      info: "#3b82f6"
+    }
+  },
+  {
+    name: "rose-gold",
+    displayName: "Rose Gold",
+    description: "Elegant rose and gold combination",
+    category: "brand",
+    colors: {
+      primary: generateColorScale2("#f43f5e"),
+      secondary: generateColorScale2("#d4a574"),
+      neutral: WARM_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#e11d48",
+      info: "#3b82f6"
+    }
+  },
+  {
+    name: "midnight",
+    displayName: "Midnight",
+    description: "Dark blue with cyan accents",
+    category: "professional",
+    colors: {
+      primary: generateColorScale2("#1e3a5f"),
+      secondary: generateColorScale2("#06b6d4"),
+      neutral: SLATE_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#0ea5e9"
+    }
+  },
+  {
+    name: "teal-modern",
+    displayName: "Teal Modern",
+    description: "Modern teal with warm accents",
+    category: "technology",
+    colors: {
+      primary: generateColorScale2("#0d9488"),
+      secondary: generateColorScale2("#f97316"),
+      neutral: GRAY_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#14b8a6"
+    }
+  },
+  // ─────────────────────────────────────────────────────────────────────────
+  // HEALTHCARE
+  // ─────────────────────────────────────────────────────────────────────────
+  {
+    name: "healthcare-trust",
+    displayName: "Healthcare Trust",
+    description: "Trustworthy blue for medical applications",
+    category: "healthcare",
+    colors: {
+      primary: generateColorScale2("#0077b6"),
+      secondary: generateColorScale2("#48cae4"),
+      neutral: SLATE_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6"
+    },
+    typography: {
+      fontFamily: "Inter, system-ui, sans-serif"
+    },
+    borderRadius: "md"
+  },
+  {
+    name: "healthcare-calm",
+    displayName: "Healthcare Calm",
+    description: "Soothing green for wellness apps",
+    category: "healthcare",
+    colors: {
+      primary: generateColorScale2("#059669"),
+      secondary: generateColorScale2("#a7f3d0"),
+      neutral: GRAY_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6"
+    },
+    borderRadius: "lg"
+  },
+  {
+    name: "healthcare-clean",
+    displayName: "Healthcare Clean",
+    description: "Clean, minimal healthcare theme",
+    category: "healthcare",
+    colors: {
+      primary: generateColorScale2("#0284c7"),
+      secondary: generateColorScale2("#e0f2fe"),
+      neutral: SLATE_NEUTRAL,
+      success: "#16a34a",
+      warning: "#ca8a04",
+      error: "#dc2626",
+      info: "#0284c7"
+    },
+    borderRadius: "sm",
+    shadows: "sm"
+  },
+  // ─────────────────────────────────────────────────────────────────────────
+  // FINANCE
+  // ─────────────────────────────────────────────────────────────────────────
+  {
+    name: "finance-corporate",
+    displayName: "Finance Corporate",
+    description: "Professional corporate finance theme",
+    category: "finance",
+    colors: {
+      primary: generateColorScale2("#1e40af"),
+      secondary: generateColorScale2("#047857"),
+      neutral: SLATE_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#dc2626",
+      info: "#3b82f6"
+    },
+    typography: {
+      fontFamily: "Inter, system-ui, sans-serif",
+      headingFontFamily: "Inter, system-ui, sans-serif"
+    },
+    borderRadius: "sm"
+  },
+  {
+    name: "finance-modern",
+    displayName: "Finance Modern",
+    description: "Modern fintech startup theme",
+    category: "finance",
+    colors: {
+      primary: generateColorScale2("#4f46e5"),
+      secondary: generateColorScale2("#10b981"),
+      neutral: ZINC_NEUTRAL,
+      success: "#10b981",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#6366f1"
+    },
+    borderRadius: "lg"
+  },
+  {
+    name: "finance-luxury",
+    displayName: "Finance Luxury",
+    description: "Premium private banking theme",
+    category: "finance",
+    colors: {
+      primary: generateColorScale2("#1f2937"),
+      secondary: generateColorScale2("#b8860b"),
+      accent: generateColorScale2("#c4a35a"),
+      neutral: ZINC_NEUTRAL,
+      success: "#16a34a",
+      warning: "#d97706",
+      error: "#b91c1c",
+      info: "#1d4ed8"
+    },
+    borderRadius: "none"
+  },
+  {
+    name: "finance-crypto",
+    displayName: "Finance Crypto",
+    description: "Dark theme for crypto trading",
+    category: "finance",
+    colors: {
+      primary: generateColorScale2("#f7931a"),
+      secondary: generateColorScale2("#627eea"),
+      neutral: {
+        50: "#0a0a0a",
+        100: "#171717",
+        200: "#262626",
+        300: "#404040",
+        400: "#525252",
+        500: "#737373",
+        600: "#a3a3a3",
+        700: "#d4d4d4",
+        800: "#e5e5e5",
+        900: "#f5f5f5",
+        950: "#fafafa"
+      },
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6"
+    },
+    borderRadius: "md"
+  },
+  // ─────────────────────────────────────────────────────────────────────────
+  // EDUCATION
+  // ─────────────────────────────────────────────────────────────────────────
+  {
+    name: "education-academic",
+    displayName: "Education Academic",
+    description: "Traditional academic institution theme",
+    category: "education",
+    colors: {
+      primary: generateColorScale2("#1e3a8a"),
+      secondary: generateColorScale2("#991b1b"),
+      neutral: GRAY_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#dc2626",
+      info: "#3b82f6"
+    },
+    typography: {
+      fontFamily: "Georgia, serif",
+      headingFontFamily: "Georgia, serif"
+    },
+    borderRadius: "sm"
+  },
+  {
+    name: "education-modern",
+    displayName: "Education Modern",
+    description: "Modern e-learning platform theme",
+    category: "education",
+    colors: {
+      primary: generateColorScale2("#4f46e5"),
+      secondary: generateColorScale2("#f97316"),
+      neutral: SLATE_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#6366f1"
+    },
+    borderRadius: "lg"
+  },
+  {
+    name: "education-kids",
+    displayName: "Education Kids",
+    description: "Fun, colorful theme for children",
+    category: "education",
+    colors: {
+      primary: generateColorScale2("#8b5cf6"),
+      secondary: generateColorScale2("#ec4899"),
+      accent: generateColorScale2("#fbbf24"),
+      neutral: GRAY_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6"
+    },
+    borderRadius: "full"
+  },
+  // ─────────────────────────────────────────────────────────────────────────
+  // TECHNOLOGY
+  // ─────────────────────────────────────────────────────────────────────────
+  {
+    name: "tech-startup",
+    displayName: "Tech Startup",
+    description: "Modern tech startup theme",
+    category: "technology",
+    colors: {
+      primary: generateColorScale2("#2563eb"),
+      secondary: generateColorScale2("#7c3aed"),
+      neutral: SLATE_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6"
+    },
+    borderRadius: "lg"
+  },
+  {
+    name: "tech-saas",
+    displayName: "Tech SaaS",
+    description: "Clean SaaS product theme",
+    category: "technology",
+    colors: {
+      primary: generateColorScale2("#0ea5e9"),
+      secondary: generateColorScale2("#8b5cf6"),
+      neutral: GRAY_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#0ea5e9"
+    },
+    borderRadius: "md"
+  },
+  {
+    name: "tech-dark",
+    displayName: "Tech Dark",
+    description: "Developer-focused dark theme",
+    category: "technology",
+    colors: {
+      primary: generateColorScale2("#22d3ee"),
+      secondary: generateColorScale2("#a78bfa"),
+      neutral: {
+        50: "#030712",
+        100: "#0a0f1a",
+        200: "#1f2937",
+        300: "#374151",
+        400: "#6b7280",
+        500: "#9ca3af",
+        600: "#d1d5db",
+        700: "#e5e7eb",
+        800: "#f3f4f6",
+        900: "#f9fafb",
+        950: "#ffffff"
+      },
+      success: "#4ade80",
+      warning: "#fbbf24",
+      error: "#f87171",
+      info: "#38bdf8"
+    }
+  },
+  {
+    name: "tech-github",
+    displayName: "GitHub Style",
+    description: "GitHub-inspired developer theme",
+    category: "technology",
+    colors: {
+      primary: generateColorScale2("#238636"),
+      secondary: generateColorScale2("#1f6feb"),
+      neutral: ZINC_NEUTRAL,
+      success: "#238636",
+      warning: "#d29922",
+      error: "#da3633",
+      info: "#58a6ff"
+    },
+    borderRadius: "md"
+  },
+  // ─────────────────────────────────────────────────────────────────────────
+  // E-COMMERCE
+  // ─────────────────────────────────────────────────────────────────────────
+  {
+    name: "ecommerce-modern",
+    displayName: "E-commerce Modern",
+    description: "Clean modern e-commerce theme",
+    category: "ecommerce",
+    colors: {
+      primary: generateColorScale2("#111827"),
+      secondary: generateColorScale2("#6366f1"),
+      neutral: GRAY_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6"
+    },
+    borderRadius: "md"
+  },
+  {
+    name: "ecommerce-fashion",
+    displayName: "E-commerce Fashion",
+    description: "Stylish fashion e-commerce theme",
+    category: "ecommerce",
+    colors: {
+      primary: generateColorScale2("#000000"),
+      secondary: generateColorScale2("#c4a35a"),
+      neutral: ZINC_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6"
+    },
+    borderRadius: "none"
+  },
+  {
+    name: "ecommerce-organic",
+    displayName: "E-commerce Organic",
+    description: "Natural products theme",
+    category: "ecommerce",
+    colors: {
+      primary: generateColorScale2("#166534"),
+      secondary: generateColorScale2("#92400e"),
+      neutral: WARM_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#dc2626",
+      info: "#0284c7"
+    },
+    borderRadius: "lg"
+  },
+  // ─────────────────────────────────────────────────────────────────────────
+  // ENTERTAINMENT
+  // ─────────────────────────────────────────────────────────────────────────
+  {
+    name: "entertainment-streaming",
+    displayName: "Streaming Service",
+    description: "Dark streaming platform theme",
+    category: "entertainment",
+    colors: {
+      primary: generateColorScale2("#e50914"),
+      secondary: generateColorScale2("#ffffff"),
+      neutral: {
+        50: "#0a0a0a",
+        100: "#141414",
+        200: "#1f1f1f",
+        300: "#2d2d2d",
+        400: "#525252",
+        500: "#737373",
+        600: "#a3a3a3",
+        700: "#d4d4d4",
+        800: "#e5e5e5",
+        900: "#f5f5f5",
+        950: "#fafafa"
+      },
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#e50914",
+      info: "#3b82f6"
+    }
+  },
+  {
+    name: "entertainment-gaming",
+    displayName: "Gaming",
+    description: "Vibrant gaming theme",
+    category: "entertainment",
+    colors: {
+      primary: generateColorScale2("#9333ea"),
+      secondary: generateColorScale2("#22d3ee"),
+      accent: generateColorScale2("#f43f5e"),
+      neutral: {
+        50: "#09090b",
+        100: "#18181b",
+        200: "#27272a",
+        300: "#3f3f46",
+        400: "#52525b",
+        500: "#71717a",
+        600: "#a1a1aa",
+        700: "#d4d4d8",
+        800: "#e4e4e7",
+        900: "#f4f4f5",
+        950: "#fafafa"
+      },
+      success: "#4ade80",
+      warning: "#fbbf24",
+      error: "#f43f5e",
+      info: "#22d3ee"
+    },
+    borderRadius: "md"
+  },
+  {
+    name: "entertainment-music",
+    displayName: "Music",
+    description: "Music streaming theme",
+    category: "entertainment",
+    colors: {
+      primary: generateColorScale2("#1db954"),
+      secondary: generateColorScale2("#ffffff"),
+      neutral: {
+        50: "#121212",
+        100: "#181818",
+        200: "#282828",
+        300: "#3d3d3d",
+        400: "#535353",
+        500: "#7a7a7a",
+        600: "#b3b3b3",
+        700: "#d9d9d9",
+        800: "#ebebeb",
+        900: "#f5f5f5",
+        950: "#ffffff"
+      },
+      success: "#1db954",
+      warning: "#f59e0b",
+      error: "#e91429",
+      info: "#1e90ff"
+    }
+  },
+  // ─────────────────────────────────────────────────────────────────────────
+  // GOVERNMENT
+  // ─────────────────────────────────────────────────────────────────────────
+  {
+    name: "government-official",
+    displayName: "Government Official",
+    description: "Official government portal theme",
+    category: "government",
+    colors: {
+      primary: generateColorScale2("#1e3a8a"),
+      secondary: generateColorScale2("#991b1b"),
+      neutral: SLATE_NEUTRAL,
+      success: "#16a34a",
+      warning: "#ca8a04",
+      error: "#b91c1c",
+      info: "#1e40af"
+    },
+    borderRadius: "sm",
+    shadows: "sm"
+  },
+  {
+    name: "government-accessible",
+    displayName: "Government Accessible",
+    description: "High contrast accessible theme",
+    category: "government",
+    colors: {
+      primary: generateColorScale2("#0f172a"),
+      secondary: generateColorScale2("#1e40af"),
+      neutral: SLATE_NEUTRAL,
+      success: "#15803d",
+      warning: "#a16207",
+      error: "#b91c1c",
+      info: "#1d4ed8"
+    },
+    borderRadius: "none"
+  },
+  // ─────────────────────────────────────────────────────────────────────────
+  // NATURE / ORGANIC
+  // ─────────────────────────────────────────────────────────────────────────
+  {
+    name: "nature-earth",
+    displayName: "Earth Tones",
+    description: "Warm earthy natural tones",
+    category: "nature",
+    colors: {
+      primary: generateColorScale2("#78350f"),
+      secondary: generateColorScale2("#166534"),
+      neutral: WARM_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#dc2626",
+      info: "#0284c7"
+    },
+    borderRadius: "lg"
+  },
+  {
+    name: "nature-ocean",
+    displayName: "Ocean",
+    description: "Ocean-inspired blues and teals",
+    category: "nature",
+    colors: {
+      primary: generateColorScale2("#0369a1"),
+      secondary: generateColorScale2("#0d9488"),
+      neutral: SLATE_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#0ea5e9"
+    },
+    borderRadius: "md"
+  },
+  {
+    name: "nature-forest",
+    displayName: "Forest",
+    description: "Deep forest greens",
+    category: "nature",
+    colors: {
+      primary: generateColorScale2("#14532d"),
+      secondary: generateColorScale2("#365314"),
+      neutral: GRAY_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#dc2626",
+      info: "#3b82f6"
+    },
+    borderRadius: "md"
+  },
+  {
+    name: "nature-sunset",
+    displayName: "Sunset",
+    description: "Warm sunset gradient colors",
+    category: "nature",
+    colors: {
+      primary: generateColorScale2("#ea580c"),
+      secondary: generateColorScale2("#be185d"),
+      neutral: WARM_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#dc2626",
+      info: "#0ea5e9"
+    },
+    borderRadius: "lg"
+  },
+  // ─────────────────────────────────────────────────────────────────────────
+  // MINIMAL
+  // ─────────────────────────────────────────────────────────────────────────
+  {
+    name: "minimal-mono",
+    displayName: "Monochrome",
+    description: "Pure black and white minimal",
+    category: "minimal",
+    colors: {
+      primary: generateColorScale2("#000000"),
+      neutral: ZINC_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6"
+    },
+    borderRadius: "none",
+    shadows: "none"
+  },
+  {
+    name: "minimal-soft",
+    displayName: "Minimal Soft",
+    description: "Soft grays with subtle accents",
+    category: "minimal",
+    colors: {
+      primary: generateColorScale2("#4b5563"),
+      secondary: generateColorScale2("#6366f1"),
+      neutral: GRAY_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6"
+    },
+    borderRadius: "sm",
+    shadows: "sm"
+  },
+  {
+    name: "minimal-paper",
+    displayName: "Paper",
+    description: "Clean paper-like minimal theme",
+    category: "minimal",
+    colors: {
+      primary: generateColorScale2("#525252"),
+      neutral: {
+        50: "#fefefe",
+        100: "#fafafa",
+        200: "#f5f5f5",
+        300: "#e5e5e5",
+        400: "#d4d4d4",
+        500: "#a3a3a3",
+        600: "#737373",
+        700: "#525252",
+        800: "#404040",
+        900: "#262626",
+        950: "#171717"
+      },
+      success: "#16a34a",
+      warning: "#ca8a04",
+      error: "#dc2626",
+      info: "#2563eb"
+    },
+    borderRadius: "sm",
+    shadows: "sm"
+  },
+  // ─────────────────────────────────────────────────────────────────────────
+  // BOLD
+  // ─────────────────────────────────────────────────────────────────────────
+  {
+    name: "bold-neon",
+    displayName: "Neon",
+    description: "Vibrant neon colors on dark",
+    category: "bold",
+    colors: {
+      primary: generateColorScale2("#f0abfc"),
+      secondary: generateColorScale2("#22d3ee"),
+      accent: generateColorScale2("#a3e635"),
+      neutral: {
+        50: "#0a0a0a",
+        100: "#171717",
+        200: "#262626",
+        300: "#404040",
+        400: "#525252",
+        500: "#737373",
+        600: "#a3a3a3",
+        700: "#d4d4d4",
+        800: "#e5e5e5",
+        900: "#f5f5f5",
+        950: "#fafafa"
+      },
+      success: "#a3e635",
+      warning: "#fbbf24",
+      error: "#f87171",
+      info: "#38bdf8"
+    },
+    borderRadius: "full"
+  },
+  {
+    name: "bold-gradient",
+    displayName: "Gradient Bold",
+    description: "Bold gradient-ready colors",
+    category: "bold",
+    colors: {
+      primary: generateColorScale2("#ec4899"),
+      secondary: generateColorScale2("#8b5cf6"),
+      accent: generateColorScale2("#06b6d4"),
+      neutral: ZINC_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6"
+    },
+    borderRadius: "lg"
+  },
+  // ─────────────────────────────────────────────────────────────────────────
+  // PLAYFUL
+  // ─────────────────────────────────────────────────────────────────────────
+  {
+    name: "playful-candy",
+    displayName: "Candy",
+    description: "Sweet candy-inspired colors",
+    category: "playful",
+    colors: {
+      primary: generateColorScale2("#ec4899"),
+      secondary: generateColorScale2("#a855f7"),
+      accent: generateColorScale2("#22d3ee"),
+      neutral: GRAY_NEUTRAL,
+      success: "#22c55e",
+      warning: "#fbbf24",
+      error: "#f43f5e",
+      info: "#3b82f6"
+    },
+    borderRadius: "full"
+  },
+  {
+    name: "playful-retro",
+    displayName: "Retro",
+    description: "Retro 80s inspired colors",
+    category: "playful",
+    colors: {
+      primary: generateColorScale2("#f472b6"),
+      secondary: generateColorScale2("#38bdf8"),
+      accent: generateColorScale2("#facc15"),
+      neutral: ZINC_NEUTRAL,
+      success: "#4ade80",
+      warning: "#fbbf24",
+      error: "#f87171",
+      info: "#38bdf8"
+    },
+    borderRadius: "lg"
+  },
+  {
+    name: "playful-pastel",
+    displayName: "Pastel",
+    description: "Soft pastel colors",
+    category: "playful",
+    colors: {
+      primary: generateColorScale2("#93c5fd"),
+      secondary: generateColorScale2("#fda4af"),
+      accent: generateColorScale2("#fde047"),
+      neutral: GRAY_NEUTRAL,
+      success: "#86efac",
+      warning: "#fde047",
+      error: "#fda4af",
+      info: "#93c5fd"
+    },
+    borderRadius: "full"
+  },
+  // ─────────────────────────────────────────────────────────────────────────
+  // PROFESSIONAL
+  // ─────────────────────────────────────────────────────────────────────────
+  {
+    name: "professional-corporate",
+    displayName: "Corporate",
+    description: "Traditional corporate blue",
+    category: "professional",
+    colors: {
+      primary: generateColorScale2("#1e40af"),
+      secondary: generateColorScale2("#0f766e"),
+      neutral: SLATE_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#dc2626",
+      info: "#3b82f6"
+    },
+    borderRadius: "sm"
+  },
+  {
+    name: "professional-law",
+    displayName: "Legal",
+    description: "Serious legal/consulting theme",
+    category: "professional",
+    colors: {
+      primary: generateColorScale2("#1f2937"),
+      secondary: generateColorScale2("#7c2d12"),
+      neutral: GRAY_NEUTRAL,
+      success: "#16a34a",
+      warning: "#ca8a04",
+      error: "#b91c1c",
+      info: "#1d4ed8"
+    },
+    typography: {
+      fontFamily: "Georgia, serif",
+      headingFontFamily: "Georgia, serif"
+    },
+    borderRadius: "none"
+  },
+  {
+    name: "professional-consulting",
+    displayName: "Consulting",
+    description: "Clean consulting firm theme",
+    category: "professional",
+    colors: {
+      primary: generateColorScale2("#0f172a"),
+      secondary: generateColorScale2("#0369a1"),
+      neutral: SLATE_NEUTRAL,
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#dc2626",
+      info: "#0284c7"
+    },
+    borderRadius: "sm"
+  }
+];
+function getPresetsByCategory(category) {
+  return PRESETS.filter((p) => p.category === category);
+}
+function getPresetByName(name) {
+  return PRESETS.find((p) => p.name === name);
+}
+function getAllCategories() {
+  return Array.from(new Set(PRESETS.map((p) => p.category)));
+}
+function presetToCssVariables(preset, prefix = "nice") {
+  const lines = [];
+  for (const [shade, value] of Object.entries(preset.colors.primary)) {
+    lines.push(`  --${prefix}-color-primary-${shade}: ${value};`);
+  }
+  if (preset.colors.secondary) {
+    for (const [shade, value] of Object.entries(preset.colors.secondary)) {
+      lines.push(`  --${prefix}-color-secondary-${shade}: ${value};`);
+    }
+  }
+  if (preset.colors.accent) {
+    for (const [shade, value] of Object.entries(preset.colors.accent)) {
+      lines.push(`  --${prefix}-color-accent-${shade}: ${value};`);
+    }
+  }
+  for (const [shade, value] of Object.entries(preset.colors.neutral)) {
+    lines.push(`  --${prefix}-color-neutral-${shade}: ${value};`);
+  }
+  lines.push(`  --${prefix}-color-success: ${preset.colors.success};`);
+  lines.push(`  --${prefix}-color-warning: ${preset.colors.warning};`);
+  lines.push(`  --${prefix}-color-error: ${preset.colors.error};`);
+  lines.push(`  --${prefix}-color-info: ${preset.colors.info};`);
+  return `:root {
+${lines.join("\n")}
+}`;
+}
+function presetToTokens(preset) {
+  const colorToToken = (value) => ({ $value: value, $type: "color" });
+  const scaleToTokens = (scale) => {
+    const tokens = {};
+    for (const [shade, value] of Object.entries(scale)) {
+      tokens[shade] = colorToToken(value);
+    }
+    return tokens;
+  };
+  return {
+    $name: preset.displayName,
+    $description: preset.description,
+    color: {
+      primary: scaleToTokens(preset.colors.primary),
+      secondary: preset.colors.secondary ? scaleToTokens(preset.colors.secondary) : void 0,
+      accent: preset.colors.accent ? scaleToTokens(preset.colors.accent) : void 0,
+      neutral: scaleToTokens(preset.colors.neutral),
+      semantic: {
+        success: colorToToken(preset.colors.success),
+        warning: colorToToken(preset.colors.warning),
+        error: colorToToken(preset.colors.error),
+        info: colorToToken(preset.colors.info)
+      }
+    }
+  };
+}
+
+// src/brand-kit.ts
+function analyzeColor(hex) {
+  const rgb = hexToRgb2(hex);
+  const hsl = rgbToHsl(rgb);
+  const luminance = calculateLuminance(rgb);
+  return {
+    hsl,
+    rgb,
+    luminance,
+    isLight: luminance > 0.5,
+    complementary: hslToHex2((hsl[0] + 180) % 360, hsl[1], hsl[2]),
+    analogous: [
+      hslToHex2((hsl[0] + 30) % 360, hsl[1], hsl[2]),
+      hslToHex2((hsl[0] - 30 + 360) % 360, hsl[1], hsl[2])
+    ],
+    triadic: [
+      hslToHex2((hsl[0] + 120) % 360, hsl[1], hsl[2]),
+      hslToHex2((hsl[0] + 240) % 360, hsl[1], hsl[2])
+    ],
+    splitComplementary: [
+      hslToHex2((hsl[0] + 150) % 360, hsl[1], hsl[2]),
+      hslToHex2((hsl[0] + 210) % 360, hsl[1], hsl[2])
+    ]
+  };
+}
+function hexToRgb2(hex) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return [r, g, b];
+}
+function rgbToHsl([r, g, b]) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return [h * 360, s * 100, l * 100];
+}
+function hslToHex2(h, s, l) {
+  s /= 100;
+  l /= 100;
+  h /= 360;
+  const hue2rgb = (p, q, t) => {
+    if (t < 0) {
+      t += 1;
+    }
+    if (t > 1) {
+      t -= 1;
+    }
+    if (t < 1 / 6) {
+      return p + (q - p) * 6 * t;
+    }
+    if (t < 1 / 2) {
+      return q;
+    }
+    if (t < 2 / 3) {
+      return p + (q - p) * (2 / 3 - t) * 6;
+    }
+    return p;
+  };
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  const toHex = (n) => Math.round(n * 255).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function calculateLuminance([r, g, b]) {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    c /= 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+var INDUSTRY_DEFAULTS = {
+  technology: {
+    typography: "modern-sans",
+    borderRadius: "lg",
+    shadows: "md",
+    style: "modern"
+  },
+  healthcare: {
+    typography: "modern-sans",
+    borderRadius: "md",
+    shadows: "sm",
+    style: "professional"
+  },
+  finance: {
+    typography: "classic-serif",
+    borderRadius: "sm",
+    shadows: "sm",
+    style: "professional"
+  },
+  education: {
+    typography: "modern-sans",
+    borderRadius: "md",
+    shadows: "md",
+    style: "modern"
+  },
+  retail: {
+    typography: "modern-sans",
+    borderRadius: "md",
+    shadows: "md",
+    style: "modern"
+  },
+  hospitality: {
+    typography: "classic-serif",
+    borderRadius: "lg",
+    shadows: "md",
+    style: "luxury"
+  },
+  manufacturing: {
+    typography: "modern-sans",
+    borderRadius: "sm",
+    shadows: "sm",
+    style: "professional"
+  },
+  creative: {
+    typography: "geometric",
+    borderRadius: "lg",
+    shadows: "lg",
+    style: "bold"
+  },
+  nonprofit: {
+    typography: "modern-sans",
+    borderRadius: "md",
+    shadows: "sm",
+    style: "organic"
+  },
+  government: {
+    typography: "modern-sans",
+    borderRadius: "none",
+    shadows: "sm",
+    style: "professional"
+  }
+};
+var TYPOGRAPHY_STACKS = {
+  "modern-sans": {
+    body: "Inter, system-ui, -apple-system, sans-serif",
+    heading: "Inter, system-ui, -apple-system, sans-serif"
+  },
+  "classic-serif": {
+    body: 'Georgia, Cambria, "Times New Roman", serif',
+    heading: 'Georgia, Cambria, "Times New Roman", serif'
+  },
+  geometric: {
+    body: 'Poppins, "Segoe UI", Roboto, sans-serif',
+    heading: 'Poppins, "Segoe UI", Roboto, sans-serif'
+  },
+  rounded: {
+    body: 'Nunito, "Segoe UI", Roboto, sans-serif',
+    heading: 'Nunito, "Segoe UI", Roboto, sans-serif'
+  },
+  monospace: {
+    body: '"JetBrains Mono", "Fira Code", Consolas, monospace',
+    heading: '"JetBrains Mono", "Fira Code", Consolas, monospace'
+  }
+};
+function generateNeutralPalette(primaryColor) {
+  const analysis = analyzeColor(primaryColor);
+  const [h] = analysis.hsl;
+  return {
+    50: hslToHex2(h, 5, 98),
+    100: hslToHex2(h, 5, 96),
+    200: hslToHex2(h, 5, 90),
+    300: hslToHex2(h, 5, 83),
+    400: hslToHex2(h, 5, 64),
+    500: hslToHex2(h, 5, 45),
+    600: hslToHex2(h, 5, 32),
+    700: hslToHex2(h, 5, 25),
+    800: hslToHex2(h, 5, 15),
+    900: hslToHex2(h, 5, 9),
+    950: hslToHex2(h, 5, 4)
+  };
+}
+function generateBrandKit(config) {
+  const defaults = config.industry ? INDUSTRY_DEFAULTS[config.industry] : {};
+  const mergedConfig = { ...defaults, ...config };
+  const primaryAnalysis = analyzeColor(config.primaryColor);
+  const secondaryColor = config.secondaryColor || primaryAnalysis.complementary;
+  const accentColor = config.accentColor || primaryAnalysis.analogous[0];
+  const primaryScale = generateColorScale2(config.primaryColor);
+  const secondaryScale = generateColorScale2(secondaryColor);
+  const accentScale = generateColorScale2(accentColor);
+  const neutralScale = generateNeutralPalette(config.primaryColor);
+  const semanticColors = generateSemanticColors(mergedConfig.style || "modern");
+  const preset = {
+    name: `brand-${config.brandName.toLowerCase().replace(/\s+/g, "-")}`,
+    displayName: config.brandName,
+    description: `Custom brand theme for ${config.brandName}`,
+    category: "brand",
+    colors: {
+      primary: primaryScale,
+      secondary: secondaryScale,
+      accent: accentScale,
+      neutral: neutralScale,
+      ...semanticColors
+    },
+    typography: {
+      fontFamily: TYPOGRAPHY_STACKS[mergedConfig.typography || "modern-sans"].body,
+      headingFontFamily: TYPOGRAPHY_STACKS[mergedConfig.typography || "modern-sans"].heading
+    },
+    borderRadius: mergedConfig.borderRadius,
+    shadows: mergedConfig.shadows
+  };
+  const darkMode = generateDarkModePreset(preset);
+  const css = generateCssFromPreset(preset);
+  const tokens = generateTokensFromPreset(preset);
+  const assets = generateBrandAssets(preset, mergedConfig);
+  return {
+    preset,
+    css,
+    tokens,
+    darkMode,
+    assets
+  };
+}
+function generateSemanticColors(style) {
+  const semantics = {
+    professional: { success: "#16a34a", warning: "#ca8a04", error: "#dc2626", info: "#2563eb" },
+    modern: { success: "#22c55e", warning: "#f59e0b", error: "#ef4444", info: "#3b82f6" },
+    playful: { success: "#4ade80", warning: "#fbbf24", error: "#f87171", info: "#60a5fa" },
+    minimal: { success: "#22c55e", warning: "#f59e0b", error: "#ef4444", info: "#3b82f6" },
+    bold: { success: "#22c55e", warning: "#f59e0b", error: "#ef4444", info: "#3b82f6" },
+    luxury: { success: "#15803d", warning: "#a16207", error: "#b91c1c", info: "#1e40af" },
+    organic: { success: "#16a34a", warning: "#d97706", error: "#dc2626", info: "#0284c7" }
+  };
+  return semantics[style];
+}
+function generateDarkModePreset(lightPreset) {
+  const invertedNeutral = {
+    50: lightPreset.colors.neutral[950],
+    100: lightPreset.colors.neutral[900],
+    200: lightPreset.colors.neutral[800],
+    300: lightPreset.colors.neutral[700],
+    400: lightPreset.colors.neutral[600],
+    500: lightPreset.colors.neutral[500],
+    600: lightPreset.colors.neutral[400],
+    700: lightPreset.colors.neutral[300],
+    800: lightPreset.colors.neutral[200],
+    900: lightPreset.colors.neutral[100],
+    950: lightPreset.colors.neutral[50]
+  };
+  return {
+    ...lightPreset,
+    name: `${lightPreset.name}-dark`,
+    displayName: `${lightPreset.displayName} (Dark)`,
+    colors: {
+      ...lightPreset.colors,
+      neutral: invertedNeutral
+    }
+  };
+}
+function generateCssFromPreset(preset) {
+  const lines = [
+    `/* ${preset.displayName} Theme */`,
+    `/* Generated by Nice2Dev Brand Kit */`,
+    "",
+    ":root {"
+  ];
+  for (const [shade, value] of Object.entries(preset.colors.primary)) {
+    lines.push(`  --nice-color-primary-${shade}: ${value};`);
+  }
+  if (preset.colors.secondary) {
+    for (const [shade, value] of Object.entries(preset.colors.secondary)) {
+      lines.push(`  --nice-color-secondary-${shade}: ${value};`);
+    }
+  }
+  if (preset.colors.accent) {
+    for (const [shade, value] of Object.entries(preset.colors.accent)) {
+      lines.push(`  --nice-color-accent-${shade}: ${value};`);
+    }
+  }
+  for (const [shade, value] of Object.entries(preset.colors.neutral)) {
+    lines.push(`  --nice-color-neutral-${shade}: ${value};`);
+  }
+  lines.push(`  --nice-color-success: ${preset.colors.success};`);
+  lines.push(`  --nice-color-warning: ${preset.colors.warning};`);
+  lines.push(`  --nice-color-error: ${preset.colors.error};`);
+  lines.push(`  --nice-color-info: ${preset.colors.info};`);
+  if (preset.typography) {
+    lines.push(`  --nice-font-family-body: ${preset.typography.fontFamily};`);
+    lines.push(
+      `  --nice-font-family-heading: ${preset.typography.headingFontFamily || preset.typography.fontFamily};`
+    );
+  }
+  const radiusMap = { none: "0", sm: "0.25rem", md: "0.5rem", lg: "1rem", full: "9999px" };
+  if (preset.borderRadius) {
+    lines.push(`  --nice-radius-base: ${radiusMap[preset.borderRadius]};`);
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+function generateTokensFromPreset(preset) {
+  const colorToToken = (value) => ({ $value: value, $type: "color" });
+  const scaleToTokens = (scale) => {
+    const tokens = {};
+    for (const [shade, value] of Object.entries(scale)) {
+      tokens[shade] = colorToToken(value);
+    }
+    return tokens;
+  };
+  return {
+    $name: preset.displayName,
+    $description: preset.description,
+    color: {
+      primary: scaleToTokens(preset.colors.primary),
+      secondary: preset.colors.secondary ? scaleToTokens(preset.colors.secondary) : void 0,
+      accent: preset.colors.accent ? scaleToTokens(preset.colors.accent) : void 0,
+      neutral: scaleToTokens(preset.colors.neutral),
+      semantic: {
+        success: colorToToken(preset.colors.success),
+        warning: colorToToken(preset.colors.warning),
+        error: colorToToken(preset.colors.error),
+        info: colorToToken(preset.colors.info)
+      }
+    },
+    typography: preset.typography ? {
+      fontFamily: {
+        body: { $value: [preset.typography.fontFamily], $type: "fontFamily" },
+        heading: {
+          $value: [preset.typography.headingFontFamily || preset.typography.fontFamily],
+          $type: "fontFamily"
+        }
+      }
+    } : void 0
+  };
+}
+function generateBrandAssets(preset, config) {
+  const colorPalette = [
+    {
+      name: "Primary",
+      colors: Object.entries(preset.colors.primary).map(([shade, hex]) => ({
+        shade,
+        hex,
+        usage: shade === "500" ? "Main brand color" : shade === "600" ? "Hover states" : shade === "700" ? "Active states" : "Supporting"
+      }))
+    }
+  ];
+  if (preset.colors.secondary) {
+    colorPalette.push({
+      name: "Secondary",
+      colors: Object.entries(preset.colors.secondary).map(([shade, hex]) => ({
+        shade,
+        hex,
+        usage: shade === "500" ? "Secondary actions" : "Supporting"
+      }))
+    });
+  }
+  const typographyScale = [
+    {
+      name: "Display",
+      size: "3.75rem",
+      weight: 700,
+      lineHeight: 1,
+      usage: "Hero sections, large headings"
+    },
+    { name: "H1", size: "2.25rem", weight: 700, lineHeight: 1.2, usage: "Page titles" },
+    { name: "H2", size: "1.875rem", weight: 600, lineHeight: 1.3, usage: "Section headings" },
+    { name: "H3", size: "1.5rem", weight: 600, lineHeight: 1.4, usage: "Card titles" },
+    { name: "H4", size: "1.25rem", weight: 600, lineHeight: 1.4, usage: "Subsections" },
+    {
+      name: "Body Large",
+      size: "1.125rem",
+      weight: 400,
+      lineHeight: 1.6,
+      usage: "Lead paragraphs"
+    },
+    { name: "Body", size: "1rem", weight: 400, lineHeight: 1.5, usage: "Main content" },
+    { name: "Body Small", size: "0.875rem", weight: 400, lineHeight: 1.5, usage: "Secondary text" },
+    { name: "Caption", size: "0.75rem", weight: 400, lineHeight: 1.4, usage: "Labels, hints" }
+  ];
+  const spacingScale = [
+    { name: "xs", value: "0.25rem", usage: "Tight spacing" },
+    { name: "sm", value: "0.5rem", usage: "Compact elements" },
+    { name: "md", value: "1rem", usage: "Standard spacing" },
+    { name: "lg", value: "1.5rem", usage: "Section spacing" },
+    { name: "xl", value: "2rem", usage: "Large gaps" },
+    { name: "2xl", value: "3rem", usage: "Section dividers" }
+  ];
+  const logoUsageGuidelines = `
+# ${config.brandName || "Brand"} Logo Usage Guidelines
+
+## Minimum Size
+- Digital: 24px height minimum
+- Print: 12mm height minimum
+
+## Clear Space
+- Maintain clear space equal to the height of the logo mark
+
+## Color Variations
+- Primary: Use on light backgrounds (${preset.colors.primary[500]})
+- Reversed: Use on dark backgrounds (white or ${preset.colors.neutral[50]})
+- Monochrome: For limited color applications
+
+## Don'ts
+- Don't stretch or distort
+- Don't rotate
+- Don't apply effects or shadows
+- Don't change colors outside brand palette
+- Don't place on busy backgrounds
+  `.trim();
+  return {
+    colorPalette,
+    typographyScale,
+    spacingScale,
+    logoUsageGuidelines
+  };
+}
+function quickBrandKit(primaryColor, brandName = "My Brand") {
+  return generateBrandKit({
+    primaryColor,
+    brandName,
+    industry: "technology",
+    style: "modern"
+  });
+}
+function industryBrandKit(primaryColor, brandName, industry) {
+  return generateBrandKit({
+    primaryColor,
+    brandName,
+    industry
+  });
+}
+
+// src/accessibility.ts
+var STANDARD_MOTION = {
+  duration: {
+    instant: "0ms",
+    fast: "100ms",
+    normal: "200ms",
+    slow: "300ms",
+    slower: "500ms",
+    slowest: "1000ms"
+  },
+  easing: {
+    linear: "linear",
+    easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+    easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+    easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+    spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+    bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+  },
+  transition: {
+    none: "none",
+    all: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+    colors: "color, background-color, border-color 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+    opacity: "opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+    transform: "transform 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+    shadow: "box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1)"
+  }
+};
+var REDUCED_MOTION = {
+  duration: {
+    instant: "0ms",
+    fast: "0ms",
+    normal: "0ms",
+    slow: "0ms",
+    slower: "0ms",
+    slowest: "0ms"
+  },
+  easing: {
+    linear: "linear",
+    easeIn: "linear",
+    easeOut: "linear",
+    easeInOut: "linear",
+    spring: "linear",
+    bounce: "linear"
+  },
+  transition: {
+    none: "none",
+    all: "none",
+    colors: "none",
+    opacity: "opacity 0ms linear",
+    transform: "none",
+    shadow: "none"
+  }
+};
+var MINIMAL_MOTION = {
+  duration: {
+    instant: "0ms",
+    fast: "50ms",
+    normal: "100ms",
+    slow: "150ms",
+    slower: "200ms",
+    slowest: "300ms"
+  },
+  easing: {
+    linear: "linear",
+    easeIn: "linear",
+    easeOut: "linear",
+    easeInOut: "linear",
+    spring: "linear",
+    bounce: "linear"
+  },
+  transition: {
+    none: "none",
+    all: "opacity 100ms linear",
+    colors: "color, background-color 100ms linear",
+    opacity: "opacity 100ms linear",
+    transform: "none",
+    shadow: "none"
+  }
+};
+var STANDARD_FOCUS = {
+  ring: {
+    width: "2px",
+    offset: "2px",
+    color: "var(--nice-color-primary-500)",
+    style: "solid"
+  },
+  outline: {
+    width: "2px",
+    style: "solid",
+    color: "var(--nice-color-primary-500)",
+    offset: "2px"
+  }
+};
+var ENHANCED_FOCUS = {
+  ring: {
+    width: "3px",
+    offset: "3px",
+    color: "var(--nice-color-primary-600)",
+    style: "solid"
+  },
+  outline: {
+    width: "3px",
+    style: "solid",
+    color: "var(--nice-color-primary-600)",
+    offset: "3px"
+  }
+};
+var HIGH_VISIBILITY_FOCUS = {
+  ring: {
+    width: "4px",
+    offset: "4px",
+    color: "#000000",
+    style: "solid"
+  },
+  outline: {
+    width: "4px",
+    style: "solid",
+    color: "#000000",
+    offset: "4px"
+  }
+};
+var STANDARD_CONTRAST = {
+  text: {
+    primary: "#111827",
+    secondary: "#374151",
+    tertiary: "#6b7280",
+    disabled: "#9ca3af",
+    inverse: "#ffffff"
+  },
+  background: {
+    primary: "#ffffff",
+    secondary: "#f9fafb",
+    tertiary: "#f3f4f6",
+    elevated: "#ffffff",
+    overlay: "rgba(0, 0, 0, 0.5)"
+  },
+  border: {
+    default: "#e5e7eb",
+    strong: "#d1d5db",
+    focus: "#3b82f6"
+  }
+};
+var HIGH_CONTRAST = {
+  text: {
+    primary: "#000000",
+    secondary: "#1a1a1a",
+    tertiary: "#333333",
+    disabled: "#666666",
+    inverse: "#ffffff"
+  },
+  background: {
+    primary: "#ffffff",
+    secondary: "#f5f5f5",
+    tertiary: "#ebebeb",
+    elevated: "#ffffff",
+    overlay: "rgba(0, 0, 0, 0.7)"
+  },
+  border: {
+    default: "#000000",
+    strong: "#000000",
+    focus: "#0000cc"
+  }
+};
+var HIGH_CONTRAST_DARK = {
+  text: {
+    primary: "#ffffff",
+    secondary: "#f0f0f0",
+    tertiary: "#e0e0e0",
+    disabled: "#999999",
+    inverse: "#000000"
+  },
+  background: {
+    primary: "#000000",
+    secondary: "#0a0a0a",
+    tertiary: "#141414",
+    elevated: "#1a1a1a",
+    overlay: "rgba(255, 255, 255, 0.3)"
+  },
+  border: {
+    default: "#ffffff",
+    strong: "#ffffff",
+    focus: "#ffff00"
+  }
+};
+var STANDARD_TYPOGRAPHY = {
+  minSize: "1rem",
+  lineHeight: "1.5",
+  letterSpacing: "normal",
+  wordSpacing: "normal"
+};
+var ENHANCED_TYPOGRAPHY = {
+  minSize: "1.125rem",
+  lineHeight: "1.75",
+  letterSpacing: "0.02em",
+  wordSpacing: "0.05em"
+};
+var MAXIMUM_READABILITY_TYPOGRAPHY = {
+  minSize: "1.25rem",
+  lineHeight: "2",
+  letterSpacing: "0.05em",
+  wordSpacing: "0.1em"
+};
+function generateReducedMotionCss(config = {}) {
+  const motion = config.allowReducedAnimations ? MINIMAL_MOTION : REDUCED_MOTION;
+  return `
+/* Reduced Motion Styles */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: ${motion.duration.instant} !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: ${motion.duration.instant} !important;
+    scroll-behavior: auto !important;
+  }
+  
+  /* Preserve essential state changes */
+  [data-state] {
+    transition: opacity ${config.allowReducedAnimations ? "100ms" : "0ms"} linear !important;
+  }
+}
+
+/* Reduced motion utility classes */
+.reduce-motion {
+  animation: none !important;
+  transition: none !important;
+}
+
+.reduce-motion-safe {
+  animation-duration: ${motion.duration.normal} !important;
+  transition-duration: ${motion.duration.normal} !important;
+}
+
+${config.disableParallax ? `
+/* Disable parallax */
+.parallax,
+[data-parallax] {
+  transform: none !important;
+  position: relative !important;
+}
+` : ""}
+
+${config.disableAutoPlay ? `
+/* Disable autoplay */
+video[autoplay],
+[data-autoplay] {
+  animation-play-state: paused !important;
+}
+` : ""}
+`.trim();
+}
+function generateFocusCss(tokens = ENHANCED_FOCUS) {
+  return `
+/* Enhanced Focus Styles */
+:focus-visible {
+  outline: ${tokens.outline.width} ${tokens.outline.style} ${tokens.outline.color};
+  outline-offset: ${tokens.outline.offset};
+}
+
+/* Focus ring utility */
+.focus-ring:focus-visible {
+  box-shadow: 0 0 0 ${tokens.ring.offset} var(--nice-color-background, #fff),
+              0 0 0 calc(${tokens.ring.offset} + ${tokens.ring.width}) ${tokens.ring.color};
+}
+
+/* Skip links */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  padding: 8px 16px;
+  background: ${tokens.ring.color};
+  color: white;
+  z-index: 100;
+  transition: top 200ms ease;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+`.trim();
+}
+function generateHighContrastCss(tokens = HIGH_CONTRAST) {
+  return `
+/* High Contrast Mode */
+@media (prefers-contrast: more) {
+  :root {
+    --nice-text-primary: ${tokens.text.primary};
+    --nice-text-secondary: ${tokens.text.secondary};
+    --nice-text-tertiary: ${tokens.text.tertiary};
+    --nice-text-disabled: ${tokens.text.disabled};
+    --nice-bg-primary: ${tokens.background.primary};
+    --nice-bg-secondary: ${tokens.background.secondary};
+    --nice-bg-tertiary: ${tokens.background.tertiary};
+    --nice-border-default: ${tokens.border.default};
+    --nice-border-strong: ${tokens.border.strong};
+    --nice-border-focus: ${tokens.border.focus};
+  }
+  
+  /* Ensure minimum contrast */
+  * {
+    border-color: ${tokens.border.default} !important;
+  }
+  
+  /* No transparent backgrounds */
+  button,
+  input,
+  select,
+  textarea {
+    background-color: ${tokens.background.primary} !important;
+    border: 2px solid ${tokens.border.default} !important;
+  }
+}
+
+/* High contrast utility classes */
+.high-contrast {
+  --nice-text-primary: ${tokens.text.primary};
+  --nice-bg-primary: ${tokens.background.primary};
+  --nice-border-default: ${tokens.border.default};
+}
+`.trim();
+}
+function generateAccessibilityCss(options = {}) {
+  const sections = [];
+  sections.push(generateReducedMotionCss(options.reducedMotion));
+  sections.push(generateFocusCss(options.focus));
+  sections.push(generateHighContrastCss(options.contrast));
+  if (options.typography) {
+    sections.push(
+      `
+/* Enhanced Typography */
+.enhanced-readability {
+  font-size: ${options.typography.minSize};
+  line-height: ${options.typography.lineHeight};
+  letter-spacing: ${options.typography.letterSpacing};
+  word-spacing: ${options.typography.wordSpacing};
+}
+    `.trim()
+    );
+  }
+  return sections.join("\n\n");
+}
+var STANDARD_ACCESSIBILITY = {
+  motion: STANDARD_MOTION,
+  focus: STANDARD_FOCUS,
+  contrast: STANDARD_CONTRAST,
+  typography: STANDARD_TYPOGRAPHY
+};
+var ENHANCED_ACCESSIBILITY = {
+  motion: MINIMAL_MOTION,
+  focus: ENHANCED_FOCUS,
+  contrast: STANDARD_CONTRAST,
+  typography: ENHANCED_TYPOGRAPHY
+};
+var MAXIMUM_ACCESSIBILITY = {
+  motion: REDUCED_MOTION,
+  focus: HIGH_VISIBILITY_FOCUS,
+  contrast: HIGH_CONTRAST,
+  typography: MAXIMUM_READABILITY_TYPOGRAPHY
+};
+function getLuminance(hex) {
+  const rgb = hex.slice(1).match(/.{2}/g).map((c) => parseInt(c, 16) / 255).map((c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+  return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
+}
+function getContrastRatio2(color1, color2) {
+  const l1 = getLuminance(color1);
+  const l2 = getLuminance(color2);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function checkContrast(foreground, background, level = "AA", isLargeText = false) {
+  const ratio = getContrastRatio2(foreground, background);
+  let required;
+  if (level === "AAA") {
+    required = isLargeText ? 4.5 : 7;
+  } else {
+    required = isLargeText ? 3 : 4.5;
+  }
+  return {
+    passes: ratio >= required,
+    ratio: Math.round(ratio * 100) / 100,
+    required
+  };
+}
+function suggestAccessibleColor(color, background, targetRatio = 4.5) {
+  const currentRatio = getContrastRatio2(color, background);
+  if (currentRatio >= targetRatio) {
+    return color;
+  }
+  const r = parseInt(color.slice(1, 3), 16);
+  const g = parseInt(color.slice(3, 5), 16);
+  const b = parseInt(color.slice(5, 7), 16);
+  const bgLuminance = getLuminance(background);
+  const shouldDarken = bgLuminance > 0.5;
+  const factor = shouldDarken ? 0.9 : 1.1;
+  let adjustedR = r, adjustedG = g, adjustedB = b;
+  for (let i = 0; i < 50; i++) {
+    if (shouldDarken) {
+      adjustedR = Math.max(0, Math.floor(adjustedR * factor));
+      adjustedG = Math.max(0, Math.floor(adjustedG * factor));
+      adjustedB = Math.max(0, Math.floor(adjustedB * factor));
+    } else {
+      adjustedR = Math.min(255, Math.floor(adjustedR * factor));
+      adjustedG = Math.min(255, Math.floor(adjustedG * factor));
+      adjustedB = Math.min(255, Math.floor(adjustedB * factor));
+    }
+    const adjusted = `#${adjustedR.toString(16).padStart(2, "0")}${adjustedG.toString(16).padStart(2, "0")}${adjustedB.toString(16).padStart(2, "0")}`;
+    if (getContrastRatio2(adjusted, background) >= targetRatio) {
+      return adjusted;
+    }
+  }
+  return shouldDarken ? "#000000" : "#ffffff";
+}
+
+// src/css-only.ts
+function tokensToCssVariables(tokens, config = {}) {
+  const prefix = config.prefix || "nice";
+  const flatTokens = flattenTokensToVariables(tokens.tokens, prefix);
+  const rootLines = [":root {", ...flatTokens.map((t) => `  ${t.variable}: ${t.value};`), "}"];
+  const root = rootLines.join("\n");
+  let dark;
+  if (config.includeDarkMode && tokens.themes?.dark) {
+    const darkTokens = flattenTokensToVariables(tokens.themes.dark, prefix);
+    dark = [
+      "@media (prefers-color-scheme: dark) {",
+      "  :root {",
+      ...darkTokens.map((t) => `    ${t.variable}: ${t.value};`),
+      "  }",
+      "}",
+      "",
+      '[data-theme="dark"] {',
+      ...darkTokens.map((t) => `  ${t.variable}: ${t.value};`),
+      "}"
+    ].join("\n");
+  }
+  let highContrast;
+  if (config.includeHighContrast && tokens.themes?.["high-contrast"]) {
+    const hcTokens = flattenTokensToVariables(tokens.themes["high-contrast"], prefix);
+    highContrast = [
+      "@media (prefers-contrast: more) {",
+      "  :root {",
+      ...hcTokens.map((t) => `    ${t.variable}: ${t.value};`),
+      "  }",
+      "}",
+      "",
+      '[data-theme="high-contrast"] {',
+      ...hcTokens.map((t) => `  ${t.variable}: ${t.value};`),
+      "}"
+    ].join("\n");
+  }
+  let reducedMotion;
+  if (config.includeReducedMotion) {
+    reducedMotion = generateReducedMotionStyles(prefix);
+  }
+  const utilities = generateUtilityClasses(prefix);
+  const reset = generateMinimalReset(prefix);
+  const sections = [root];
+  if (dark) {
+    sections.push(dark);
+  }
+  if (highContrast) {
+    sections.push(highContrast);
+  }
+  if (reducedMotion) {
+    sections.push(reducedMotion);
+  }
+  if (reset) {
+    sections.push(reset);
+  }
+  if (utilities) {
+    sections.push(utilities);
+  }
+  let combined = sections.join("\n\n");
+  if (config.useLayers) {
+    combined = wrapInLayers(combined);
+  }
+  return {
+    root,
+    dark,
+    highContrast,
+    reducedMotion,
+    utilities,
+    reset,
+    combined
+  };
+}
+function flattenTokensToVariables(input, prefix, path3 = []) {
+  const result = [];
+  if (Array.isArray(input)) {
+    for (const token of input) {
+      result.push({
+        variable: token.cssVariable || `--${prefix}-${token.path.join("-")}`,
+        value: token.resolvedValue,
+        path: token.path.join(".")
+      });
+    }
+    return result;
+  }
+  for (const [key, value] of Object.entries(input)) {
+    const currentPath = [...path3, key];
+    if (typeof value === "object" && value !== null && "$value" in value) {
+      const token = value;
+      const variable = `--${prefix}-${currentPath.join("-")}`;
+      result.push({
+        variable,
+        value: formatTokenValue(token.$value, token.$type),
+        path: currentPath.join(".")
+      });
+    } else if (typeof value === "object" && value !== null) {
+      result.push(
+        ...flattenTokensToVariables(value, prefix, currentPath)
+      );
+    }
+  }
+  return result;
+}
+function formatTokenValue(value, type) {
+  if (typeof value === "string") {
+    if (value.startsWith("{") && value.endsWith("}")) {
+      const path3 = value.slice(1, -1).replace(/\./g, "-");
+      return `var(--nice-${path3})`;
+    }
+    return value;
+  }
+  if (typeof value === "number") {
+    if (type === "dimension") {
+      return `${value}px`;
+    }
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    if (type === "fontFamily") {
+      return value.join(", ");
+    }
+    return value.join(" ");
+  }
+  if (typeof value === "object" && value !== null) {
+    const obj = value;
+    if (type === "shadow") {
+      const offsetX = obj.offsetX || "0";
+      const offsetY = obj.offsetY || "0";
+      const blur = obj.blur || "0";
+      const spread = obj.spread || "0";
+      const color = obj.color || "rgba(0,0,0,0.1)";
+      return `${offsetX} ${offsetY} ${blur} ${spread} ${color}`;
+    }
+    if (type === "typography") {
+      const fontSize = obj.fontSize || "1rem";
+      const fontWeight = obj.fontWeight || "400";
+      const lineHeight = obj.lineHeight || "1.5";
+      const fontFamily = Array.isArray(obj.fontFamily) ? obj.fontFamily.join(", ") : obj.fontFamily || "inherit";
+      return `${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`;
+    }
+  }
+  return String(value);
+}
+function presetToCss(preset, config = {}) {
+  const prefix = config.prefix || "nice";
+  const lines = [];
+  lines.push(`/* ${preset.displayName} Theme */`);
+  lines.push(`/* Generated by Nice2Dev Design Tokens */`);
+  lines.push("");
+  lines.push(":root {");
+  for (const [colorName, colorValue] of Object.entries(preset.colors)) {
+    if (typeof colorValue === "string") {
+      lines.push(`  --${prefix}-color-${colorName}: ${colorValue};`);
+    } else if (typeof colorValue === "object" && colorValue !== null) {
+      const scale = colorValue;
+      for (const [shade, hex] of Object.entries(scale)) {
+        lines.push(`  --${prefix}-color-${colorName}-${shade}: ${hex};`);
+      }
+    }
+  }
+  if (preset.typography) {
+    lines.push(`  --${prefix}-font-body: ${preset.typography.fontFamily};`);
+    if (preset.typography.headingFontFamily) {
+      lines.push(`  --${prefix}-font-heading: ${preset.typography.headingFontFamily};`);
+    }
+  }
+  if (preset.borderRadius) {
+    const radii = {
+      none: "0",
+      sm: "0.25rem",
+      md: "0.5rem",
+      lg: "1rem",
+      full: "9999px"
+    };
+    lines.push(`  --${prefix}-radius: ${radii[preset.borderRadius]};`);
+  }
+  if (preset.shadows) {
+    const shadowMap = {
+      none: { sm: "none", md: "none", lg: "none" },
+      sm: {
+        sm: "0 1px 2px rgba(0,0,0,0.05)",
+        md: "0 2px 4px rgba(0,0,0,0.05)",
+        lg: "0 4px 8px rgba(0,0,0,0.05)"
+      },
+      md: {
+        sm: "0 1px 3px rgba(0,0,0,0.1)",
+        md: "0 4px 6px rgba(0,0,0,0.1)",
+        lg: "0 10px 15px rgba(0,0,0,0.1)"
+      },
+      lg: {
+        sm: "0 2px 4px rgba(0,0,0,0.15)",
+        md: "0 8px 16px rgba(0,0,0,0.15)",
+        lg: "0 20px 40px rgba(0,0,0,0.15)"
+      }
+    };
+    const shadows = shadowMap[preset.shadows];
+    lines.push(`  --${prefix}-shadow-sm: ${shadows.sm};`);
+    lines.push(`  --${prefix}-shadow-md: ${shadows.md};`);
+    lines.push(`  --${prefix}-shadow-lg: ${shadows.lg};`);
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+function generateUtilityClasses(prefix) {
+  return `
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   UTILITY CLASSES
+   Generated CSS utilities using CSS variables
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+/* Colors */
+.text-primary { color: var(--${prefix}-color-primary-500); }
+.text-secondary { color: var(--${prefix}-color-secondary-500); }
+.text-accent { color: var(--${prefix}-color-accent-500); }
+.text-success { color: var(--${prefix}-color-success); }
+.text-warning { color: var(--${prefix}-color-warning); }
+.text-error { color: var(--${prefix}-color-error); }
+.text-info { color: var(--${prefix}-color-info); }
+
+.bg-primary { background-color: var(--${prefix}-color-primary-500); }
+.bg-secondary { background-color: var(--${prefix}-color-secondary-500); }
+.bg-accent { background-color: var(--${prefix}-color-accent-500); }
+.bg-success { background-color: var(--${prefix}-color-success); }
+.bg-warning { background-color: var(--${prefix}-color-warning); }
+.bg-error { background-color: var(--${prefix}-color-error); }
+.bg-info { background-color: var(--${prefix}-color-info); }
+
+/* Border */
+.border-primary { border-color: var(--${prefix}-color-primary-500); }
+.rounded { border-radius: var(--${prefix}-radius); }
+.rounded-sm { border-radius: calc(var(--${prefix}-radius) * 0.5); }
+.rounded-lg { border-radius: calc(var(--${prefix}-radius) * 2); }
+.rounded-full { border-radius: 9999px; }
+
+/* Shadows */
+.shadow-sm { box-shadow: var(--${prefix}-shadow-sm); }
+.shadow-md { box-shadow: var(--${prefix}-shadow-md); }
+.shadow-lg { box-shadow: var(--${prefix}-shadow-lg); }
+.shadow-none { box-shadow: none; }
+
+/* Typography */
+.font-body { font-family: var(--${prefix}-font-body); }
+.font-heading { font-family: var(--${prefix}-font-heading, var(--${prefix}-font-body)); }
+
+/* Focus */
+.focus-ring:focus-visible {
+  outline: 2px solid var(--${prefix}-color-primary-500);
+  outline-offset: 2px;
+}
+`.trim();
+}
+function generateMinimalReset(prefix) {
+  return `
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   MINIMAL RESET
+   Component-ready CSS reset using design tokens
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: var(--${prefix}-font-body, system-ui, sans-serif);
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--${prefix}-color-neutral-900);
+  background-color: var(--${prefix}-color-neutral-50);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--${prefix}-font-heading, var(--${prefix}-font-body));
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+a {
+  color: var(--${prefix}-color-primary-500);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--${prefix}-color-primary-600);
+  text-decoration: underline;
+}
+
+button, input, select, textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+}
+
+img, svg, video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+`.trim();
+}
+function generateReducedMotionStyles(prefix) {
+  return `
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   REDUCED MOTION
+   Respect user preferences for reduced motion
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Motion-safe utilities */
+@media (prefers-reduced-motion: no-preference) {
+  .animate-fade-in {
+    animation: ${prefix}-fade-in 200ms ease-out;
+  }
+  
+  .animate-slide-up {
+    animation: ${prefix}-slide-up 200ms ease-out;
+  }
+  
+  .animate-scale-in {
+    animation: ${prefix}-scale-in 200ms ease-out;
+  }
+}
+
+@keyframes ${prefix}-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes ${prefix}-slide-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes ${prefix}-scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+`.trim();
+}
+function wrapInLayers(css) {
+  return `
+/* Define layer order */
+@layer reset, tokens, utilities, components;
+
+@layer tokens {
+${css.split("\n").map((l) => `  ${l}`).join("\n")}
+}
+`.trim();
+}
+function generateComponentStyles(prefix = "nice") {
+  return `
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   CSS-ONLY COMPONENT STYLES
+   No CSS-in-JS required \u2014 pure CSS variables approach
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+/* Button */
+.${prefix}-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-weight: 500;
+  border-radius: var(--${prefix}-radius, 0.5rem);
+  transition: all 150ms ease;
+}
+
+.${prefix}-button--primary {
+  background-color: var(--${prefix}-color-primary-500);
+  color: white;
+}
+
+.${prefix}-button--primary:hover {
+  background-color: var(--${prefix}-color-primary-600);
+}
+
+.${prefix}-button--secondary {
+  background-color: var(--${prefix}-color-neutral-100);
+  color: var(--${prefix}-color-neutral-900);
+}
+
+.${prefix}-button--secondary:hover {
+  background-color: var(--${prefix}-color-neutral-200);
+}
+
+.${prefix}-button--outline {
+  border: 1px solid var(--${prefix}-color-primary-500);
+  color: var(--${prefix}-color-primary-500);
+  background: transparent;
+}
+
+.${prefix}-button--outline:hover {
+  background-color: var(--${prefix}-color-primary-50);
+}
+
+.${prefix}-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Input */
+.${prefix}-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--${prefix}-color-neutral-300);
+  border-radius: var(--${prefix}-radius, 0.5rem);
+  background-color: var(--${prefix}-color-neutral-50);
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.${prefix}-input:focus {
+  outline: none;
+  border-color: var(--${prefix}-color-primary-500);
+  box-shadow: 0 0 0 3px var(--${prefix}-color-primary-100);
+}
+
+.${prefix}-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.${prefix}-input--error {
+  border-color: var(--${prefix}-color-error);
+}
+
+/* Card */
+.${prefix}-card {
+  background-color: var(--${prefix}-color-neutral-50);
+  border: 1px solid var(--${prefix}-color-neutral-200);
+  border-radius: var(--${prefix}-radius, 0.5rem);
+  box-shadow: var(--${prefix}-shadow-sm);
+}
+
+.${prefix}-card__header {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--${prefix}-color-neutral-200);
+}
+
+.${prefix}-card__body {
+  padding: 1.5rem;
+}
+
+.${prefix}-card__footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--${prefix}-color-neutral-200);
+}
+
+/* Badge */
+.${prefix}-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 9999px;
+}
+
+.${prefix}-badge--primary {
+  background-color: var(--${prefix}-color-primary-100);
+  color: var(--${prefix}-color-primary-700);
+}
+
+.${prefix}-badge--success {
+  background-color: #dcfce7;
+  color: #166534;
+}
+
+.${prefix}-badge--warning {
+  background-color: #fef3c7;
+  color: #92400e;
+}
+
+.${prefix}-badge--error {
+  background-color: #fee2e2;
+  color: #991b1b;
+}
+
+/* Alert */
+.${prefix}-alert {
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: var(--${prefix}-radius, 0.5rem);
+}
+
+.${prefix}-alert--info {
+  background-color: #eff6ff;
+  border: 1px solid #bfdbfe;
+  color: #1e40af;
+}
+
+.${prefix}-alert--success {
+  background-color: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  color: #166534;
+}
+
+.${prefix}-alert--warning {
+  background-color: #fffbeb;
+  border: 1px solid #fde68a;
+  color: #92400e;
+}
+
+.${prefix}-alert--error {
+  background-color: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #991b1b;
+}
+`.trim();
+}
+function generateCompleteStylesheet(preset, config = {}) {
+  const prefix = config.prefix || "nice";
+  const sections = [];
+  sections.push(`/**
+ * ${preset.displayName} Theme Stylesheet
+ * Generated by Nice2Dev Design Tokens
+ * CSS-only approach \u2014 no CSS-in-JS runtime
+ */`);
+  if (config.useLayers) {
+    sections.push("@layer reset, tokens, utilities, components;");
+  }
+  sections.push(presetToCss(preset, config));
+  sections.push(generateMinimalReset(prefix));
+  sections.push(generateUtilityClasses(prefix));
+  sections.push(generateComponentStyles(prefix));
+  if (config.includeReducedMotion) {
+    sections.push(generateReducedMotionStyles(prefix));
+  }
+  return sections.join("\n\n");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ENHANCED_ACCESSIBILITY,
+  ENHANCED_FOCUS,
+  ENHANCED_TYPOGRAPHY,
+  HIGH_CONTRAST,
+  HIGH_CONTRAST_DARK,
+  HIGH_VISIBILITY_FOCUS,
+  MAXIMUM_ACCESSIBILITY,
+  MAXIMUM_READABILITY_TYPOGRAPHY,
+  MINIMAL_MOTION,
+  PRESETS,
+  REDUCED_MOTION,
+  STANDARD_ACCESSIBILITY,
+  STANDARD_CONTRAST,
+  STANDARD_FOCUS,
+  STANDARD_MOTION,
+  STANDARD_TYPOGRAPHY,
+  TokenGenerator,
+  analyzeColor,
+  buildTokenObject,
+  checkCircularReferences,
+  checkContrast,
+  createGenerator,
+  createTheme,
+  createTokenCollection,
+  cubicBezierToCss,
+  darkenColor,
+  defaultOptions,
+  defaultThemes,
+  durationToMs,
+  extractReferencePath,
+  filterTokensByPath,
+  filterTokensByType,
+  findReferences,
+  flattenTokens,
+  fontWeightToNumber,
+  generateAccessibilityCss,
+  generateBrandKit,
+  generateColorScale,
+  generateColorScaleAsync,
+  generateCompleteStylesheet,
+  generateComponentStyles,
+  generateDarkModeTokens,
+  generateFocusCss,
+  generateHighContrastCss,
+  generateHighContrastTokens,
+  generateReactThemeContext,
+  generateReducedMotionCss,
+  generateThemeSwitcher,
+  generateThemesCss,
+  generateTokenTypes,
+  generateTokens,
+  getAccessibleTextColor,
+  getAllCategories,
+  getCategories,
+  getContrastRatio,
+  getContrastRatioAsync,
+  getDependencyGraph,
+  getPresetByName,
+  getPresetsByCategory,
+  getTokenByPath,
+  hexToHsl,
+  hexToOklch,
+  hexToRgb,
+  industryBrandKit,
+  isDesignToken,
+  isReference,
+  isTokenGroup,
+  lightenColor,
+  mergeTokenFiles,
+  parseTokenDirectory,
+  parseTokenFile,
+  parseTokenFiles,
+  pathToCssVariable,
+  pathToString,
+  presetToCss,
+  presetToCssVariables,
+  presetToTokens,
+  pxToEm,
+  pxToRem,
+  quickBrandKit,
+  remToPx,
+  resolveToVariable,
+  resolveTokenValue,
+  resolveTokens,
+  sortTokensByDependencies,
+  suggestAccessibleColor,
+  tokensToCssVariables,
+  transformToCss,
+  transformToJs,
+  transformToScss,
+  transformToTailwind,
+  transformToTs
+});