@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/index.js

@@ -14,6 +14,8 @@ import { Tooltip as Tooltip$1 } from '@base-ui-components/react/tooltip';
 import { MediaController, MediaLoadingIndicator, MediaControlBar, MediaPlayButton, MediaMuteButton, MediaVolumeRange, MediaTimeDisplay, MediaTimeRange } from 'media-chrome/react';
 import { Dialog as Dialog$1 } from '@base-ui-components/react/dialog';
 import { Slot } from '@radix-ui/react-slot';
+import { colorThemes, surfaceThemes, flatToNested, flatToCSSVars, nestedToCSSVars, isColorValue, isDimensionValue } from '@nds-design-system/tokens';
+export { defineTheme, srgb } from '@nds-design-system/tokens';
 
 // src/components/atoms/accordion/accordion.tsx
 function cn(...inputs) {
@@ -1259,7 +1261,7 @@ var PagerControl = React14.forwardRef(
     variant,
     count,
     activeIndex: controlledIndex,
-    duration: duration2 = 5e3,
+    duration = 5e3,
     autoPlay = true,
     onChange,
     pauseOnHover = true,
@@ -1320,7 +1322,7 @@ var PagerControl = React14.forwardRef(
       [isControlled, onChange]
     );
     React14.useEffect(() => {
-      if (!autoPlay || duration2 <= 0 || isPaused) {
+      if (!autoPlay || duration <= 0 || isPaused) {
         if (animationFrameRef.current) {
           cancelAnimationFrame(animationFrameRef.current);
           animationFrameRef.current = null;
@@ -1329,10 +1331,10 @@ var PagerControl = React14.forwardRef(
       }
       const animate = (timestamp) => {
         if (startTimeRef.current === null) {
-          startTimeRef.current = timestamp - pausedProgressRef.current / 100 * duration2;
+          startTimeRef.current = timestamp - pausedProgressRef.current / 100 * duration;
         }
         const elapsed = timestamp - startTimeRef.current;
-        const newProgress = Math.min(elapsed / duration2 * 100, 100);
+        const newProgress = Math.min(elapsed / duration * 100, 100);
         setProgress(newProgress);
         if (newProgress >= 100) {
           goToNext();
@@ -1349,7 +1351,7 @@ var PagerControl = React14.forwardRef(
           cancelAnimationFrame(animationFrameRef.current);
         }
       };
-    }, [autoPlay, duration2, isPaused, goToNext]);
+    }, [autoPlay, duration, isPaused, goToNext]);
     const handleMouseEnter = React14.useCallback(() => {
       if (pauseOnHover) {
         pausedProgressRef.current = progress;
@@ -1442,7 +1444,7 @@ var PagerControl = React14.forwardRef(
                       getProgressFillClass()
                     ),
                     style: {
-                      width: autoPlay && duration2 > 0 ? `${progress}%` : "100%"
+                      width: autoPlay && duration > 0 ? `${progress}%` : "100%"
                     }
                   }
                 )
@@ -4242,15 +4244,14 @@ var USGovBanner = React14.forwardRef(
     ...props
   }, ref) => {
     const styles = usGovBannerVariants({ variant });
-    const isInverted = variant === "inverted";
     return /* @__PURE__ */ jsx("div", { ref, className: styles.root({ class: className }), ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.content(), children: [
-      flagIcon ?? (isInverted ? /* @__PURE__ */ jsx(WhiteUSFlag, {}) : /* @__PURE__ */ jsx(DefaultUSFlag, {})),
+      flagIcon ?? /* @__PURE__ */ jsx(MonoUSFlag, {}),
       /* @__PURE__ */ jsx("p", { className: styles.text(), children: text })
     ] }) });
   }
 );
 USGovBanner.displayName = "USGovBanner";
-function DefaultUSFlag() {
+function MonoUSFlag() {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -4261,41 +4262,16 @@ function DefaultUSFlag() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx("path", { d: "M0 0H16V12H0V0Z", fill: "#212121", fillOpacity: "0.1" }),
+        /* @__PURE__ */ jsx("path", { d: "M0 0H16V12H0V0Z", fill: "currentColor", fillOpacity: "0.1" }),
         /* @__PURE__ */ jsx(
           "path",
           {
             d: "M0 0H16V0.923077H0V0ZM0 1.84615H16V2.76923H0V1.84615ZM0 3.69231H16V4.61538H0V3.69231ZM0 5.53846H16V6.46154H0V5.53846ZM0 7.38462H16V8.30769H0V7.38462ZM0 9.23077H16V10.1538H0V9.23077ZM0 11.0769H16V12H0V11.0769Z",
-            fill: "#BF0A30",
+            fill: "currentColor",
             fillOpacity: "0.8"
           }
         ),
-        /* @__PURE__ */ jsx("path", { d: "M0 0H8V6.46154H0V0Z", fill: "#002868", fillOpacity: "0.8" })
-      ]
-    }
-  );
-}
-function WhiteUSFlag() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "12",
-      viewBox: "0 0 16 12",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M0 0H16V12H0V0Z", fill: "white", fillOpacity: "0.1" }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M0 0H16V0.923077H0V0ZM0 1.84615H16V2.76923H0V1.84615ZM0 3.69231H16V4.61538H0V3.69231ZM0 5.53846H16V6.46154H0V5.53846ZM0 7.38462H16V8.30769H0V7.38462ZM0 9.23077H16V10.1538H0V9.23077ZM0 11.0769H16V12H0V11.0769Z",
-            fill: "white",
-            fillOpacity: "0.8"
-          }
-        ),
-        /* @__PURE__ */ jsx("path", { d: "M0 0H8V6.46154H0V0Z", fill: "white", fillOpacity: "0.6" })
+        /* @__PURE__ */ jsx("path", { d: "M0 0H8V6.46154H0V0Z", fill: "currentColor", fillOpacity: "0.6" })
       ]
     }
   );
@@ -5248,4069 +5224,170 @@ function useEventListener(eventName, handler, element, options) {
     };
   }, [eventName, element, options]);
 }
-
-// ../tokens/dist/collections/types.js
-function isColorValue(value) {
-  if (typeof value !== "object" || value === null)
-    return false;
-  const obj = value;
-  return "colorSpace" in obj && "components" in obj && Array.isArray(obj.components) && obj.components.length === 3;
-}
-function isDimensionValue(value) {
-  if (typeof value !== "object" || value === null)
-    return false;
-  const obj = value;
-  return "value" in obj && "unit" in obj && typeof obj.value === "number";
+var ThemeContext = createContext(null);
+function colorToCSS(color) {
+  const [r, g, b] = color.components;
+  if (color.alpha < 1) {
+    return `color(srgb ${r} ${g} ${b} / ${color.alpha})`;
+  }
+  return `color(srgb ${r} ${g} ${b})`;
 }
-
-// ../tokens/dist/merge.js
-function mergeTokenTrees(...trees) {
-  const result = {};
-  for (const tree of trees) {
-    deepMerge(result, tree);
+function tokenValueToCSS(value) {
+  if (isColorValue(value)) {
+    return colorToCSS(value);
   }
-  return result;
+  if (isDimensionValue(value)) {
+    return `${value.value}${value.unit}`;
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number") {
+    return String(value);
+  }
+  return String(value);
 }
-function deepMerge(target, source) {
-  for (const [key, value] of Object.entries(source)) {
-    if (key in target) {
-      const targetValue = target[key];
-      if (isPlainObject(targetValue) && isPlainObject(value)) {
-        deepMerge(targetValue, value);
+function processColorTokens(colorObj, path = []) {
+  const result = {};
+  for (const [key, value] of Object.entries(colorObj)) {
+    if (key.startsWith("$")) continue;
+    const currentPath = [...path, key];
+    if (typeof value === "object" && value !== null) {
+      const record = value;
+      if ("$value" in record) {
+        const varName = `color-${currentPath.join("-")}`;
+        const tokenValue = record.$value;
+        if (typeof tokenValue === "string" && tokenValue.startsWith("{")) {
+          let refPath = tokenValue.slice(1, -1).replace(/\./g, "-");
+          refPath = refPath.replace(/^primitive-/, "");
+          refPath = refPath.replace(/^semantic-color-/, "color-");
+          result[varName] = `var(--${refPath})`;
+        } else {
+          result[varName] = tokenValueToCSS(tokenValue);
+        }
       } else {
-        target[key] = value;
+        Object.assign(result, processColorTokens(record, currentPath));
       }
-    } else {
-      target[key] = value;
     }
   }
+  return result;
 }
-function isPlainObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value) && Object.prototype.toString.call(value) === "[object Object]";
-}
-
-// ../tokens/dist/semantic/color/base.js
-var baseColorTokens = {
-  semantic: {
-    color: {
-      $extensions: {
-        "nds.theme": {
-          category: "color",
-          name: "base"
-        },
-        "nds.figmaSync": {
-          collectionKey: "92aacd2e50c6b60494d54a525fd64c6727d58905",
-          collectionName: "Color",
-          modeMapping: { modeName: "Default" }
-        }
-      },
-      // Background tokens (color-bg-*)
-      bg: {
-        page: { $type: "color", $value: "{primitive.color.gray.50}" },
-        section: { $type: "color", $value: "{primitive.color.gray.100}" },
-        "section-secondary": {
-          $type: "color",
-          $value: "{primitive.color.gray.200}"
-        },
-        "section-tertiary": {
-          $type: "color",
-          $value: "{primitive.color.gray.1000}"
-        },
-        muted: { $type: "color", $value: "{primitive.color.white}" }
-      },
-      // Card token (color-card-*)
-      card: {
-        background: { $type: "color", $value: "{primitive.color.white}" }
-      },
-      // Text tokens (color-text-*)
-      text: {
-        primary: { $type: "color", $value: "{primitive.color.gray.1100}" },
-        secondary: { $type: "color", $value: "{primitive.color.gray.800}" },
-        muted: { $type: "color", $value: "{primitive.color.gray.600}" },
-        inverted: { $type: "color", $value: "{primitive.color.gray.100}" },
-        link: { $type: "color", $value: "{primitive.color.gray.1100}" },
-        "link-hover": { $type: "color", $value: "{primitive.color.gray.700}" }
-      },
-      // Accent tokens (color-accent-*)
-      accent: {
-        brand: { $type: "color", $value: "{primitive.color.indigo.v400}" },
-        "brand-soft": { $type: "color", $value: "{primitive.color.ember.100}" }
-      },
-      // Border tokens (color-border-*)
-      border: {
-        subtle: { $type: "color", $value: "{primitive.color.alpha-black.10}" },
-        strong: { $type: "color", $value: "{primitive.color.alpha-black.20}" },
-        focus: {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.40}"
-        },
-        divider: {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.10}"
-        }
-      },
-      // Button tokens (color-button-*)
-      // Matches Figma Button component variants
-      button: {
-        // Primary button (blue filled) - Figma: #4186de
-        primary: {
-          bg: { $type: "color", $value: "{primitive.color.blue.500}" },
-          "bg-hover": { $type: "color", $value: "{primitive.color.blue.600}" },
-          "bg-active": { $type: "color", $value: "{primitive.color.blue.700}" },
-          text: { $type: "color", $value: "{primitive.color.white}" }
-        },
-        // Default button (dark filled) - Figma: #141414
-        default: {
-          bg: { $type: "color", $value: "{primitive.color.gray.1200}" },
-          "bg-hover": { $type: "color", $value: "{primitive.color.gray.1100}" },
-          "bg-active": {
-            $type: "color",
-            $value: "{primitive.color.gray.1000}"
-          },
-          text: { $type: "color", $value: "{primitive.color.gray.50}" }
-        },
-        // Secondary button (light gray filled) - Figma: #f5f5f5
-        secondary: {
-          bg: { $type: "color", $value: "{primitive.color.gray.100}" },
-          "bg-hover": { $type: "color", $value: "{primitive.color.gray.200}" },
-          "bg-active": { $type: "color", $value: "{primitive.color.gray.300}" },
-          text: { $type: "color", $value: "{primitive.color.gray.1200}" },
-          border: {
-            $type: "color",
-            $value: "{primitive.color.alpha-black.10}"
-          }
-        },
-        // Destructive button (red filled) - Figma: #e53935
-        destructive: {
-          bg: { $type: "color", $value: "{primitive.color.red.500}" },
-          "bg-hover": { $type: "color", $value: "{primitive.color.red.600}" },
-          "bg-active": { $type: "color", $value: "{primitive.color.red.700}" },
-          text: { $type: "color", $value: "{primitive.color.white}" }
-        },
-        // Outline button (bordered, transparent)
-        outline: {
-          bg: { $type: "color", $value: "transparent" },
-          "bg-hover": {
-            $type: "color",
-            $value: "{primitive.color.alpha-black.5}"
-          },
-          "bg-active": {
-            $type: "color",
-            $value: "{primitive.color.alpha-black.10}"
-          },
-          text: { $type: "color", $value: "{primitive.color.gray.1200}" },
-          border: { $type: "color", $value: "{primitive.color.gray.300}" },
-          "border-hover": {
-            $type: "color",
-            $value: "{primitive.color.gray.400}"
-          }
-        },
-        // Ghost button (transparent, subtle hover)
-        ghost: {
-          bg: { $type: "color", $value: "transparent" },
-          "bg-hover": {
-            $type: "color",
-            $value: "{primitive.color.alpha-black.5}"
-          },
-          "bg-active": {
-            $type: "color",
-            $value: "{primitive.color.alpha-black.10}"
-          },
-          text: { $type: "color", $value: "{primitive.color.gray.1200}" }
-        },
-        // Link button (text only, underline on hover)
-        link: {
-          bg: { $type: "color", $value: "transparent" },
-          "bg-hover": { $type: "color", $value: "transparent" },
-          "bg-active": { $type: "color", $value: "transparent" },
-          text: { $type: "color", $value: "{primitive.color.gray.1200}" },
-          "text-hover": {
-            $type: "color",
-            $value: "{primitive.color.gray.700}"
-          }
-        }
-      },
-      // Tooltip tokens (color-tooltip-*)
-      // Inverted color scheme for tooltip overlays
-      tooltip: {
-        bg: { $type: "color", $value: "{primitive.color.gray.1000}" },
-        text: { $type: "color", $value: "{semantic.color.text.inverted}" }
-      },
-      // Overlay tokens (color-overlay-*)
-      // Shared by popover, modal, dropdown, menu (light background, spacious)
-      overlay: {
-        background: {
-          $type: "color",
-          $value: "{semantic.color.card.background}",
-          $description: "Overlay background color (light)"
-        },
-        border: {
-          $type: "color",
-          $value: "{semantic.color.border.subtle}",
-          $description: "Overlay border color"
-        },
-        text: {
-          $type: "color",
-          $value: "{semantic.color.text.primary}",
-          $description: "Overlay primary text color"
-        },
-        "text-muted": {
-          $type: "color",
-          $value: "{semantic.color.text.muted}",
-          $description: "Overlay muted text color"
-        }
-      },
-      // UI tokens (color-ui-*)
-      ui: {
-        "button-primary-bg": {
-          $type: "color",
-          $value: "{primitive.color.indigo.v400}"
-        },
-        "control-background": {
-          $type: "color",
-          $value: "{primitive.color.white}"
-        },
-        "control-background-hover": {
-          $type: "color",
-          $value: "{primitive.color.gray.100}"
-        },
-        "control-background-disabled": {
-          $type: "color",
-          $value: "{primitive.color.gray.200}"
-        },
-        "color-focus": {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.10}"
-        },
-        "color-border": {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.10}"
-        },
-        "color-border-active": {
-          $type: "color",
-          $value: "{primitive.color.brown.1000}"
-        },
-        "error-color": { $type: "color", $value: "{primitive.color.red.300}" },
-        "accent-base": {
-          $type: "color",
-          $value: "{primitive.color.indigo.v300}"
-        },
-        "accent-base-2": {
-          $type: "color",
-          $value: "{primitive.color.blue.v200}"
-        },
-        "accent-base-3": {
-          $type: "color",
-          $value: "{primitive.color.indigo.v300}"
-        },
-        // Menu/dropdown item tokens
-        "menu-item-bg": {
-          $type: "color",
-          $value: "{primitive.color.white}"
-        },
-        "menu-item-bg-hover": {
-          $type: "color",
-          $value: "{primitive.color.indigo.25}"
-        },
-        "menu-item-bg-selected": {
-          $type: "color",
-          $value: "{primitive.color.indigo.35}"
-        },
-        "menu-item-text": {
-          $type: "color",
-          $value: "{primitive.color.gray.1000}"
-        },
-        "menu-item-text-selected": {
-          $type: "color",
-          $value: "{primitive.color.blue.v250}"
+function processSurfaceTokens(surfaceObj, path = []) {
+  const result = {};
+  for (const [key, value] of Object.entries(surfaceObj)) {
+    if (key.startsWith("$")) continue;
+    const currentPath = [...path, key];
+    if (typeof value === "object" && value !== null) {
+      const record = value;
+      if ("$value" in record) {
+        const tokenValue = record.$value;
+        let varName;
+        let cssValue;
+        if (currentPath[currentPath.length - 1] === "radius") {
+          const componentName = currentPath[0];
+          varName = `radius-surface-${componentName}`;
+        } else if (currentPath[currentPath.length - 1] === "stroke") {
+          const componentName = currentPath[0];
+          varName = `surface-${componentName}-stroke`;
+        } else {
+          varName = `surface-${currentPath.join("-")}`;
         }
-      },
-      // Video Player tokens (color-video-player-*)
-      // Used for fullscreen video modal, controls, and captions
-      "video-player": {
-        "controls-bg": {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.40}",
-          $description: "Video controls bar background (glassmorphic)"
-        },
-        "controls-text": {
-          $type: "color",
-          $value: "{primitive.color.white}",
-          $description: "Video controls text and icons"
-        },
-        "controls-hover": {
-          $type: "color",
-          $value: "{primitive.color.alpha-white.20}",
-          $description: "Video controls hover state"
-        },
-        "button-bg": {
-          $type: "color",
-          $value: "{primitive.color.alpha-white.10}",
-          $description: "Control button background (visible on dark video)"
-        },
-        "button-bg-hover": {
-          $type: "color",
-          $value: "{primitive.color.alpha-white.20}",
-          $description: "Control button hover background"
-        },
-        "button-bg-active": {
-          $type: "color",
-          $value: "{primitive.color.alpha-white.30}",
-          $description: "Control button active/pressed background"
-        },
-        "caption-bg": {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.70}",
-          $description: "Caption background overlay"
-        },
-        "caption-text": {
-          $type: "color",
-          $value: "{primitive.color.white}",
-          $description: "Caption text color"
-        },
-        "backdrop-overlay": {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.90}",
-          $description: "Modal backdrop overlay"
-        },
-        "progress-bg": {
-          $type: "color",
-          $value: "{primitive.color.alpha-white.30}",
-          $description: "Progress bar track background"
-        },
-        "progress-fill": {
-          $type: "color",
-          $value: "{primitive.color.white}",
-          $description: "Progress bar fill color"
-        },
-        "tooltip-bg": {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.90}",
-          $description: "Video tooltip background"
+        if (typeof tokenValue === "string" && tokenValue.startsWith("{")) {
+          let refPath = tokenValue.slice(1, -1).replace(/\./g, "-");
+          refPath = refPath.replace(/^primitive-/, "");
+          refPath = refPath.replace(/^radii-/, "radius-");
+          cssValue = `var(--${refPath})`;
+        } else {
+          cssValue = tokenValueToCSS(tokenValue);
         }
+        result[varName] = cssValue;
+      } else {
+        Object.assign(result, processSurfaceTokens(record, currentPath));
       }
     }
   }
-};
-
-// ../design-tokens-format/dist/definitions/tokenTypes.js
-var colorTypeName = "color";
-var dimensionTypeName = "dimension";
-var fontFamilyTypeName = "fontFamily";
-var fontWeightTypeName = "fontWeight";
-var durationTypeName = "duration";
-var cubicBezierTypeName = "cubicBezier";
-var numberTypeName = "number";
-var strokeStyleTypeName = "strokeStyle";
-var borderTypeName = "border";
-var transitionTypeName = "transition";
-var shadowTypeName = "shadow";
-var gradientTypeName = "gradient";
-var typographyTypeName = "typography";
-var tokenTypeNames = [
-  colorTypeName,
-  dimensionTypeName,
-  fontFamilyTypeName,
-  fontWeightTypeName,
-  durationTypeName,
-  cubicBezierTypeName,
-  numberTypeName,
-  strokeStyleTypeName,
-  borderTypeName,
-  transitionTypeName,
-  shadowTypeName,
-  gradientTypeName,
-  typographyTypeName
-];
-tokenTypeNames.reduce((acc, t) => {
-  acc[t] = t;
-  return acc;
-}, {});
-
-// ../design-tokens-format/dist/utils/colorConversions.js
-function hexToRgb(hex) {
-  const cleanHex = hex.replace(/^#/, "");
-  let r;
-  let g;
-  let b;
-  if (cleanHex.length === 3) {
-    const c0 = cleanHex[0] ?? "0";
-    const c1 = cleanHex[1] ?? "0";
-    const c2 = cleanHex[2] ?? "0";
-    r = Number.parseInt(c0 + c0, 16);
-    g = Number.parseInt(c1 + c1, 16);
-    b = Number.parseInt(c2 + c2, 16);
-  } else if (cleanHex.length === 6 || cleanHex.length === 8) {
-    r = Number.parseInt(cleanHex.slice(0, 2), 16);
-    g = Number.parseInt(cleanHex.slice(2, 4), 16);
-    b = Number.parseInt(cleanHex.slice(4, 6), 16);
-  } else {
-    throw new Error(`Invalid hex color format: ${hex}`);
-  }
-  return {
-    r: r / 255,
-    g: g / 255,
-    b: b / 255
-  };
-}
-function hexToComponents(hex) {
-  const { r, g, b } = hexToRgb(hex);
-  return [
-    Math.round(r * 1e4) / 1e4,
-    Math.round(g * 1e4) / 1e4,
-    Math.round(b * 1e4) / 1e4
-  ];
-}
-
-// ../tokens/dist/utils.js
-function dimension(value, unit = "px") {
-  return {
-    $type: "dimension",
-    $value: { value, unit }
-  };
+  return result;
 }
-function fontFamily(value) {
-  return {
-    $type: "fontFamily",
-    $value: Array.isArray(value) ? value : [value]
-  };
+function mergeTokenModules(base, override) {
+  const result = JSON.parse(JSON.stringify(base));
+  deepMerge(result, override);
+  return result;
 }
-function fontWeight(value) {
-  return {
-    $type: "fontWeight",
-    $value: value
-  };
+function deepMerge(target, source) {
+  for (const [key, value] of Object.entries(source)) {
+    if (typeof value === "object" && value !== null && !Array.isArray(value) && typeof target[key] === "object" && target[key] !== null) {
+      deepMerge(
+        target[key],
+        value
+      );
+    } else {
+      target[key] = value;
+    }
+  }
 }
-function srgb(hex, alpha = 1) {
-  return {
-    $type: "color",
-    $value: {
-      colorSpace: "srgb",
-      components: hexToComponents(hex),
-      alpha,
-      hex
+function ThemeProvider({
+  color = "base",
+  surface = "base",
+  customTheme,
+  children,
+  className,
+  applyStyles = true
+}) {
+  const { tokens, cssVars } = useMemo(() => {
+    const flatTokens = {};
+    const baseColorModule = colorThemes.base;
+    const effectiveColor = customTheme ? customTheme.extends : color;
+    const colorModule = colorThemes[effectiveColor] ?? colorThemes.base;
+    const mergedColor = effectiveColor === "base" ? baseColorModule : mergeTokenModules(baseColorModule, colorModule);
+    const colorTokens = mergedColor?.semantic?.color ?? mergedColor;
+    Object.assign(flatTokens, processColorTokens(colorTokens));
+    const baseSurfaceModule = surfaceThemes.base;
+    const surfaceModule = surfaceThemes[surface];
+    const mergedSurface = surface === "base" ? baseSurfaceModule : mergeTokenModules(baseSurfaceModule, surfaceModule);
+    const surfaceTokens = mergedSurface?.semantic?.surface ?? mergedSurface;
+    Object.assign(flatTokens, processSurfaceTokens(surfaceTokens));
+    const nestedTokens = flatToNested(flatTokens);
+    let cssVariables = flatToCSSVars(flatTokens);
+    if (customTheme) {
+      cssVariables = {
+        ...cssVariables,
+        ...Object.fromEntries(
+          Object.entries(customTheme.cssVars).map(([key, value]) => [
+            key.startsWith("--") ? key : `--${key}`,
+            value
+          ])
+        )
+      };
     }
+    return { tokens: nestedTokens, cssVars: cssVariables };
+  }, [color, surface, customTheme]);
+  const contextValue = {
+    cssVars,
+    tokens,
+    colorTheme: customTheme ? customTheme.extends : color,
+    surfaceTheme: surface
   };
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children: applyStyles ? /* @__PURE__ */ jsx("div", { style: cssVars, className, children }) : children });
 }
-function duration(value, unit = "ms") {
-  return {
-    $type: "duration",
-    $value: { value, unit }
-  };
+
+// src/theme/hooks.ts
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
 }
-function cubicBezier(x1, y1, x2, y2) {
-  return {
-    $type: "cubicBezier",
-    $value: [x1, y1, x2, y2]
-  };
+function useThemeTokens() {
+  const { tokens } = useTheme();
+  return tokens;
 }
-function shadow(layers) {
-  return {
-    $type: "shadow",
-    $value: layers.map((l) => ({
-      color: l.color.startsWith("{") ? l.color : {
-        colorSpace: "srgb",
-        components: hexToComponents(l.color),
-        alpha: l.alpha ?? 1
-      },
-      offsetX: { value: l.offsetX, unit: "px" },
-      offsetY: { value: l.offsetY, unit: "px" },
-      blur: { value: l.blur, unit: "px" },
-      spread: { value: l.spread, unit: "px" },
-      ...l.inset ? { inset: true } : {}
-    }))
-  };
+function useCSSVars() {
+  const { cssVars } = useTheme();
+  return cssVars;
 }
-
-// ../tokens/dist/semantic/color/bop.js
-var bopColorTokens = {
-  semantic: {
-    color: {
-      $extensions: {
-        "nds.theme": {
-          category: "color",
-          name: "bop",
-          extends: "base"
-        }
-      },
-      bg: {
-        page: srgb("#FEFDF9"),
-        section: srgb("#F5F4EF"),
-        muted: srgb("#FEFDF9")
-      },
-      card: {
-        background: srgb("#8A6F42")
-      },
-      text: {
-        primary: srgb("#111326"),
-        secondary: srgb("#111326"),
-        muted: srgb("#A68B5E"),
-        inverted: srgb("#FEFDF9")
-      },
-      accent: {
-        brand: srgb("#A68B5E"),
-        "brand-soft": srgb("#C4A870")
-      },
-      border: {
-        subtle: srgb("#26284B", 0.1),
-        strong: srgb("#26284B", 0.2),
-        divider: srgb("#26284B", 0.1)
-      },
-      button: {
-        "primary-bg-hover": srgb("#26284B")
-      },
-      ui: {
-        "button-primary-bg": srgb("#111326")
-      }
-    }
-  }
-};
-
-// ../tokens/dist/semantic/color/civic.js
-var civicColorTokens = {
-  semantic: {
-    color: {
-      $extensions: {
-        "nds.theme": {
-          category: "color",
-          name: "civic",
-          extends: "base"
-        },
-        "nds.figmaSync": {
-          collectionKey: "29f4d62156d027717b2f2a80e95002ed749bdd38",
-          collectionName: "Civic",
-          extendsCollectionKey: "92aacd2e50c6b60494d54a525fd64c6727d58905",
-          modeMapping: { modeName: "Default" }
-        }
-      },
-      bg: {
-        page: { $type: "color", $value: "{primitive.color.white}" }
-      },
-      accent: {
-        brand: { $type: "color", $value: "{primitive.color.red.900}" }
-      },
-      button: {
-        primary: {
-          bg: { $type: "color", $value: "{primitive.color.red.900}" },
-          "bg-hover": { $type: "color", $value: "{primitive.color.red.800}" }
-        },
-        "primary-outline": {
-          text: { $type: "color", $value: "{primitive.color.red.900}" },
-          "text-hover": { $type: "color", $value: "{primitive.color.red.800}" },
-          border: { $type: "color", $value: "{primitive.color.red.900}" },
-          "border-hover": {
-            $type: "color",
-            $value: "{primitive.color.red.800}"
-          }
-        }
-      },
-      ui: {
-        "button-primary-bg": {
-          $type: "color",
-          $value: "{primitive.color.red.900}"
-        }
-      }
-    }
-  }
-};
-
-// ../tokens/dist/semantic/color/dark.js
-var darkColorTokens = {
-  semantic: {
-    color: {
-      $extensions: {
-        "nds.theme": {
-          category: "color",
-          name: "dark",
-          extends: "base"
-        },
-        "nds.figmaSync": {
-          collectionKey: "92aacd2e50c6b60494d54a525fd64c6727d58905",
-          collectionName: "Color",
-          modeMapping: { modeName: "Dark Mode" }
-        }
-      },
-      // Background tokens
-      bg: {
-        page: { $type: "color", $value: "{primitive.color.gray.1100}" },
-        section: { $type: "color", $value: "{primitive.color.gray.1000}" },
-        "section-secondary": {
-          $type: "color",
-          $value: "{primitive.color.gray.900}"
-        },
-        "section-tertiary": {
-          $type: "color",
-          $value: "{primitive.color.gray.100}"
-        },
-        muted: { $type: "color", $value: "{primitive.color.gray.900}" }
-      },
-      // Card token
-      card: {
-        background: { $type: "color", $value: "{primitive.color.gray.800}" }
-      },
-      // Text tokens
-      text: {
-        primary: { $type: "color", $value: "{primitive.color.gray.200}" },
-        secondary: { $type: "color", $value: "{primitive.color.gray.400}" },
-        muted: { $type: "color", $value: "{primitive.color.gray.500}" },
-        inverted: { $type: "color", $value: "{primitive.color.gray.1100}" },
-        link: { $type: "color", $value: "{primitive.color.gray.200}" },
-        "link-hover": { $type: "color", $value: "{primitive.color.gray.400}" }
-      },
-      // Border tokens
-      border: {
-        subtle: { $type: "color", $value: "{primitive.color.alpha-white.20}" },
-        strong: { $type: "color", $value: "{primitive.color.alpha-white.30}" },
-        focus: {
-          $type: "color",
-          $value: "{semantic.color.accent.brand}"
-        },
-        divider: {
-          $type: "color",
-          $value: "{primitive.color.alpha-white.20}"
-        }
-      },
-      button: {
-        primary: {
-          bg: { $type: "color", $value: "{primitive.color.gray.200}" },
-          "bg-hover": { $type: "color", $value: "{primitive.color.gray.400}" },
-          text: { $type: "color", $value: "{primitive.color.gray.1100}" },
-          "text-hover": {
-            $type: "color",
-            $value: "{primitive.color.gray.1100}"
-          }
-        },
-        "primary-outline": {
-          bg: { $type: "color", $value: "{primitive.color.alpha-white.5}" },
-          "bg-hover": {
-            $type: "color",
-            $value: "{primitive.color.alpha-white.10}"
-          },
-          text: { $type: "color", $value: "{primitive.color.gray.200}" },
-          "text-hover": { $type: "color", $value: "{primitive.color.white}" },
-          border: { $type: "color", $value: "{primitive.color.gray.200}" },
-          "border-hover": { $type: "color", $value: "{primitive.color.white}" }
-        },
-        secondary: {
-          bg: { $type: "color", $value: "{primitive.color.gray.800}" },
-          "bg-hover": { $type: "color", $value: "{primitive.color.gray.700}" },
-          text: { $type: "color", $value: "{primitive.color.gray.200}" },
-          "text-hover": { $type: "color", $value: "{primitive.color.white}" }
-        },
-        ghost: {
-          bg: { $type: "color", $value: "{primitive.color.alpha-white.5}" },
-          "bg-hover": {
-            $type: "color",
-            $value: "{primitive.color.alpha-white.10}"
-          },
-          text: { $type: "color", $value: "{primitive.color.gray.300}" },
-          "text-hover": {
-            $type: "color",
-            $value: "{primitive.color.gray.100}"
-          }
-        }
-      },
-      // UI tokens
-      ui: {
-        "button-primary-bg": {
-          $type: "color",
-          $value: "{primitive.color.gray.200}"
-        },
-        "control-background": {
-          $type: "color",
-          $value: "{primitive.color.gray.900}"
-        },
-        "control-background-hover": {
-          $type: "color",
-          $value: "{primitive.color.gray.800}"
-        },
-        "control-background-disabled": {
-          $type: "color",
-          $value: "{primitive.color.gray.1000}"
-        },
-        "color-focus": {
-          $type: "color",
-          $value: "{primitive.color.alpha-white.20}"
-        },
-        "color-border": {
-          $type: "color",
-          $value: "{primitive.color.alpha-white.30}"
-        },
-        "color-border-active": {
-          $type: "color",
-          $value: "{primitive.color.white}"
-        },
-        "error-color": { $type: "color", $value: "{primitive.color.red.200}" },
-        "accent-base": {
-          $type: "color",
-          $value: "{primitive.color.indigo.300}"
-        },
-        "accent-base-2": {
-          $type: "color",
-          $value: "{primitive.color.indigo.300}"
-        },
-        "accent-base-3": {
-          $type: "color",
-          $value: "{primitive.color.indigo.300}"
-        }
-      }
-    }
-  }
-};
-
-// ../tokens/dist/semantic/color/darktech.js
-var darktechColorTokens = {
-  semantic: {
-    color: {
-      $extensions: {
-        "nds.theme": {
-          category: "color",
-          name: "darktech",
-          extends: "base"
-        }
-      },
-      // Dark backgrounds
-      bg: {
-        page: {
-          $type: "color",
-          $value: "{primitive.color.gray.1100}"
-        },
-        section: {
-          $type: "color",
-          $value: "{primitive.color.gray.1000}"
-        },
-        "section-secondary": {
-          $type: "color",
-          $value: "{primitive.color.gray.900}"
-        },
-        "section-tertiary": {
-          $type: "color",
-          $value: "{primitive.color.gray.1200}"
-        },
-        muted: {
-          $type: "color",
-          $value: "{primitive.color.gray.1000}"
-        }
-      },
-      card: {
-        background: {
-          $type: "color",
-          $value: "{primitive.color.gray.1000}"
-        }
-      },
-      // Light text for dark backgrounds
-      text: {
-        primary: {
-          $type: "color",
-          $value: "{primitive.color.gray.200}"
-        },
-        secondary: {
-          $type: "color",
-          $value: "{primitive.color.gray.400}"
-        },
-        muted: {
-          $type: "color",
-          $value: "{primitive.color.gray.500}"
-        },
-        inverted: {
-          $type: "color",
-          $value: "{primitive.color.gray.1100}"
-        },
-        link: {
-          $type: "color",
-          $value: "{primitive.color.cyan.v300}"
-        },
-        "link-hover": {
-          $type: "color",
-          $value: "{primitive.color.cyan.v200}"
-        }
-      },
-      // Cyan/tech accent colors
-      accent: {
-        brand: {
-          $type: "color",
-          $value: "{primitive.color.cyan.v300}"
-        },
-        "brand-soft": {
-          $type: "color",
-          $value: "{primitive.color.teal.900}"
-        }
-      },
-      // Borders for dark mode
-      border: {
-        subtle: {
-          $type: "color",
-          $value: "{primitive.color.alpha-white.10}"
-        },
-        strong: {
-          $type: "color",
-          $value: "{primitive.color.alpha-white.20}"
-        },
-        focus: {
-          $type: "color",
-          $value: "{semantic.color.accent.brand}"
-        },
-        divider: {
-          $type: "color",
-          $value: "{primitive.color.alpha-white.10}"
-        }
-      },
-      // Button colors for dark mode
-      button: {
-        "primary-bg-hover": {
-          $type: "color",
-          $value: "{primitive.color.cyan.600}"
-        },
-        "secondary-bg": {
-          $type: "color",
-          $value: "{primitive.color.gray.900}"
-        },
-        "secondary-bg-hover": {
-          $type: "color",
-          $value: "{primitive.color.gray.800}"
-        }
-      },
-      // UI colors for dark mode
-      ui: {
-        "button-primary-bg": {
-          $type: "color",
-          $value: "{primitive.color.cyan.v300}"
-        },
-        "control-background": {
-          $type: "color",
-          $value: "{primitive.color.gray.900}"
-        },
-        "control-background-hover": {
-          $type: "color",
-          $value: "{primitive.color.gray.800}"
-        },
-        "control-background-disabled": {
-          $type: "color",
-          $value: "{primitive.color.gray.1000}"
-        },
-        "color-focus": {
-          $type: "color",
-          $value: "{primitive.color.alpha-white.10}"
-        },
-        "color-border": {
-          $type: "color",
-          $value: "{primitive.color.alpha-white.20}"
-        },
-        "color-border-active": {
-          $type: "color",
-          $value: "{primitive.color.cyan.v300}"
-        }
-      }
-    }
-  }
-};
-
-// ../tokens/dist/semantic/color/institution.js
-var institutionColorTokens = {
-  semantic: {
-    color: {
-      $extensions: {
-        "nds.theme": {
-          category: "color",
-          name: "institution",
-          extends: "base"
-        },
-        "nds.figmaSync": {
-          collectionKey: "307b920325965d277d6cbfe0c1573b413f86baf4",
-          collectionName: "Institution",
-          extendsCollectionKey: "92aacd2e50c6b60494d54a525fd64c6727d58905",
-          modeMapping: { modeName: "Default" }
-        }
-      },
-      bg: {
-        page: { $type: "color", $value: "{primitive.color.brown.50}" }
-      },
-      card: {
-        background: { $type: "color", $value: "{primitive.color.white}" }
-      },
-      text: {
-        primary: { $type: "color", $value: "{primitive.color.gray.1000}" },
-        secondary: { $type: "color", $value: "{primitive.color.brown.600}" }
-      },
-      accent: {
-        brand: { $type: "color", $value: "{primitive.color.green.v400}" }
-      },
-      button: {
-        primary: {
-          bg: { $type: "color", $value: "{primitive.color.green.v400}" },
-          "bg-hover": {
-            $type: "color",
-            $value: "{primitive.color.green.v300}"
-          }
-        },
-        "primary-outline": {
-          text: { $type: "color", $value: "{primitive.color.green.v400}" },
-          "text-hover": {
-            $type: "color",
-            $value: "{primitive.color.green.v300}"
-          },
-          border: { $type: "color", $value: "{primitive.color.green.v400}" },
-          "border-hover": {
-            $type: "color",
-            $value: "{primitive.color.green.v300}"
-          }
-        },
-        secondary: {
-          bg: { $type: "color", $value: "{primitive.color.brown.50}" },
-          "bg-hover": { $type: "color", $value: "{primitive.color.white}" }
-        }
-      },
-      ui: {
-        "button-primary-bg": {
-          $type: "color",
-          $value: "{primitive.color.brown.600}"
-        }
-      }
-    }
-  }
-};
-
-// ../tokens/dist/semantic/color/oceana.js
-var oceanaColorTokens = {
-  semantic: {
-    color: {
-      $extensions: {
-        "nds.theme": {
-          category: "color",
-          name: "oceana",
-          extends: "base"
-        },
-        "nds.figmaSync": {
-          collectionKey: "79e46a4d616f3e2d07556a58f4253ed909bca3b7",
-          collectionName: "Oceana",
-          extendsCollectionKey: "92aacd2e50c6b60494d54a525fd64c6727d58905",
-          modeMapping: { modeName: "Default" }
-        }
-      },
-      // Cool blue-tinted backgrounds
-      bg: {
-        page: {
-          $type: "color",
-          $value: "{primitive.color.ice.50}"
-        },
-        section: {
-          $type: "color",
-          $value: "{primitive.color.ice.100}"
-        },
-        "section-secondary": {
-          $type: "color",
-          $value: "{primitive.color.ice.200}"
-        },
-        "section-tertiary": {
-          $type: "color",
-          $value: "{primitive.color.blue.900}"
-        },
-        muted: {
-          $type: "color",
-          $value: "{primitive.color.white}"
-        }
-      },
-      card: {
-        background: {
-          $type: "color",
-          $value: "{primitive.color.white}"
-        }
-      },
-      // Text colors with cool tint
-      text: {
-        primary: {
-          $type: "color",
-          $value: "{primitive.color.steel.1100}"
-        },
-        secondary: {
-          $type: "color",
-          $value: "{primitive.color.steel.700}"
-        },
-        muted: {
-          $type: "color",
-          $value: "{primitive.color.steel.500}"
-        },
-        inverted: {
-          $type: "color",
-          $value: "{primitive.color.ice.50}"
-        },
-        link: {
-          $type: "color",
-          $value: "{primitive.color.blue.600}"
-        },
-        "link-hover": {
-          $type: "color",
-          $value: "{primitive.color.blue.800}"
-        }
-      },
-      // Ocean blue accents
-      accent: {
-        brand: {
-          $type: "color",
-          $value: "{primitive.color.blue.600}"
-        },
-        "brand-soft": {
-          $type: "color",
-          $value: "{primitive.color.cyan.50}"
-        }
-      },
-      // Borders
-      border: {
-        subtle: {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.10}"
-        },
-        strong: {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.20}"
-        },
-        focus: {
-          $type: "color",
-          $value: "{semantic.color.accent.brand}"
-        },
-        divider: {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.10}"
-        }
-      },
-      // Button colors
-      button: {
-        "primary-bg-hover": {
-          $type: "color",
-          $value: "{primitive.color.blue.800}"
-        },
-        "secondary-bg": {
-          $type: "color",
-          $value: "{primitive.color.white}"
-        },
-        "secondary-bg-hover": {
-          $type: "color",
-          $value: "{primitive.color.ice.100}"
-        }
-      },
-      // UI colors
-      ui: {
-        "button-primary-bg": {
-          $type: "color",
-          $value: "{primitive.color.blue.600}"
-        },
-        "control-background": {
-          $type: "color",
-          $value: "{primitive.color.white}"
-        },
-        "control-background-hover": {
-          $type: "color",
-          $value: "{primitive.color.ice.100}"
-        },
-        "control-background-disabled": {
-          $type: "color",
-          $value: "{primitive.color.ice.200}"
-        },
-        "color-focus": {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.10}"
-        },
-        "color-border": {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.20}"
-        },
-        "color-border-active": {
-          $type: "color",
-          $value: "{primitive.color.blue.600}"
-        }
-      }
-    }
-  }
-};
-
-// ../tokens/dist/semantic/color/recreation.js
-var recreationColorTokens = {
-  semantic: {
-    color: {
-      $extensions: {
-        "nds.theme": {
-          category: "color",
-          name: "recreation",
-          extends: "base"
-        },
-        "nds.figmaSync": {
-          collectionKey: "cf9e75990b12bf4551bf2b165ec51e5ce594fecf",
-          collectionName: "Recreation",
-          extendsCollectionKey: "92aacd2e50c6b60494d54a525fd64c6727d58905",
-          modeMapping: { modeName: "Default" }
-        }
-      },
-      // Warm beige backgrounds
-      bg: {
-        page: {
-          $type: "color",
-          $value: "{primitive.color.brown.50}"
-        },
-        section: {
-          $type: "color",
-          $value: "{primitive.color.brown.100}"
-        },
-        "section-secondary": {
-          $type: "color",
-          $value: "{primitive.color.brown.200}"
-        },
-        "section-tertiary": {
-          $type: "color",
-          $value: "{primitive.color.brown.900}"
-        },
-        muted: {
-          $type: "color",
-          $value: "{primitive.color.white}"
-        }
-      },
-      card: {
-        background: {
-          $type: "color",
-          $value: "{primitive.color.white}"
-        }
-      },
-      // Text colors with warm tint
-      text: {
-        primary: {
-          $type: "color",
-          $value: "{primitive.color.brown.1100}"
-        },
-        secondary: {
-          $type: "color",
-          $value: "{primitive.color.brown.700}"
-        },
-        muted: {
-          $type: "color",
-          $value: "{primitive.color.brown.500}"
-        },
-        inverted: {
-          $type: "color",
-          $value: "{primitive.color.brown.50}"
-        },
-        link: {
-          $type: "color",
-          $value: "{primitive.color.brown.600}"
-        },
-        "link-hover": {
-          $type: "color",
-          $value: "{primitive.color.brown.800}"
-        }
-      },
-      // Earthy brown accents
-      accent: {
-        brand: {
-          $type: "color",
-          $value: "{primitive.color.brown.600}"
-        },
-        "brand-soft": {
-          $type: "color",
-          $value: "{primitive.color.brown.100}"
-        }
-      },
-      // Borders
-      border: {
-        subtle: {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.10}"
-        },
-        strong: {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.20}"
-        },
-        focus: {
-          $type: "color",
-          $value: "{semantic.color.accent.brand}"
-        },
-        divider: {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.10}"
-        }
-      },
-      // Button colors
-      button: {
-        "primary-bg-hover": {
-          $type: "color",
-          $value: "{primitive.color.brown.700}"
-        },
-        "secondary-bg": {
-          $type: "color",
-          $value: "{primitive.color.white}"
-        },
-        "secondary-bg-hover": {
-          $type: "color",
-          $value: "{primitive.color.brown.100}"
-        }
-      },
-      // UI colors
-      ui: {
-        "button-primary-bg": {
-          $type: "color",
-          $value: "{primitive.color.brown.600}"
-        },
-        "control-background": {
-          $type: "color",
-          $value: "{primitive.color.white}"
-        },
-        "control-background-hover": {
-          $type: "color",
-          $value: "{primitive.color.brown.100}"
-        },
-        "control-background-disabled": {
-          $type: "color",
-          $value: "{primitive.color.brown.200}"
-        },
-        "color-focus": {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.10}"
-        },
-        "color-border": {
-          $type: "color",
-          $value: "{primitive.color.alpha-black.20}"
-        },
-        "color-border-active": {
-          $type: "color",
-          $value: "{primitive.color.brown.600}"
-        }
-      }
-    }
-  }
-};
-
-// ../tokens/dist/semantic/surface/base.js
-var baseSurfaceTokens = {
-  semantic: {
-    surface: {
-      $extensions: {
-        "nds.theme": {
-          category: "surface",
-          name: "base"
-        },
-        "nds.figmaSync": {
-          collectionKey: "4f6dd00a848af32a4163fde4d543eb933824813e",
-          collectionName: "Surface",
-          modeMapping: { modeName: "Mode 1" }
-        }
-      },
-      /**
-       * UI Radius Tokens
-       *
-       * Base radius values for UI components. Individual components (button, card, input)
-       * extend from these values, allowing theme variants to override once and affect all.
-       */
-      ui: {
-        radius: {
-          small: {
-            $type: "dimension",
-            $value: "{primitive.radii.4}",
-            $description: "Small UI radius (4px) - tight corners"
-          },
-          medium: {
-            $type: "dimension",
-            $value: "{primitive.radii.6}",
-            $description: "Medium UI radius (6px) - default corners"
-          },
-          large: {
-            $type: "dimension",
-            $value: "{primitive.radii.8}",
-            $description: "Large UI radius (8px) - rounded corners"
-          }
-        }
-      },
-      card: {
-        radius: {
-          $type: "dimension",
-          $value: "{semantic.surface.ui.radius.medium}",
-          $description: "Card border radius - extends from ui.radius.medium"
-        },
-        stroke: { $type: "dimension", $value: "{primitive.spacing.1}" }
-      },
-      button: {
-        radius: {
-          small: {
-            $type: "dimension",
-            $value: "{semantic.surface.ui.radius.small}",
-            $description: "Button radius for small size"
-          },
-          medium: {
-            $type: "dimension",
-            $value: "{semantic.surface.ui.radius.medium}",
-            $description: "Button radius for medium size"
-          },
-          large: {
-            $type: "dimension",
-            $value: "{semantic.surface.ui.radius.large}",
-            $description: "Button radius for large size"
-          }
-        },
-        stroke: { $type: "dimension", $value: "{primitive.spacing.1}" }
-      },
-      tooltip: {
-        radius: {
-          $type: "dimension",
-          $value: "{semantic.surface.ui.radius.small}",
-          $description: "Tooltip border radius - uses small UI radius for tight corners"
-        }
-      },
-      /**
-       * Overlay Surface Tokens
-       *
-       * Surface properties for floating UI components (popover, modal, dropdown, menu).
-       */
-      overlay: {
-        radius: {
-          $type: "dimension",
-          $value: "{semantic.surface.ui.radius.large}",
-          $description: "Overlay border radius - uses large UI radius (8px)"
-        }
-      }
-    }
-  }
-};
-
-// ../tokens/dist/semantic/surface/framed.js
-var framedSurfaceTokens = {
-  semantic: {
-    surface: {
-      $extensions: {
-        "nds.theme": {
-          category: "surface",
-          name: "framed",
-          extends: "base"
-        },
-        "nds.figmaSync": {
-          collectionKey: "8d2f720d2f15a79f6caf1c9e1332295eae600152",
-          collectionName: "Framed",
-          extendsCollectionKey: "4f6dd00a848af32a4163fde4d543eb933824813e",
-          modeMapping: { modeName: "Mode 1" }
-        }
-      },
-      /**
-       * Framed UI Radius - no radius (0px) for crisp, framed appearance
-       */
-      ui: {
-        radius: {
-          small: { $type: "dimension", $value: "{primitive.radii.0}" },
-          medium: { $type: "dimension", $value: "{primitive.radii.0}" },
-          large: { $type: "dimension", $value: "{primitive.radii.0}" }
-        }
-      },
-      card: {
-        stroke: { $type: "dimension", $value: "{primitive.spacing.2}" }
-      },
-      button: {
-        stroke: { $type: "dimension", $value: "{primitive.spacing.1}" }
-      }
-    }
-  }
-};
-
-// ../tokens/dist/semantic/surface/sharp.js
-var sharpSurfaceTokens = {
-  semantic: {
-    surface: {
-      $extensions: {
-        "nds.theme": {
-          category: "surface",
-          name: "sharp",
-          extends: "base"
-        },
-        "nds.figmaSync": {
-          collectionKey: "89b2727e714b609da1a6da3fb39a02fece2c5c87",
-          collectionName: "Sharp",
-          extendsCollectionKey: "4f6dd00a848af32a4163fde4d543eb933824813e",
-          modeMapping: { modeName: "Mode 1" }
-        }
-      },
-      /**
-       * Sharp UI Radius - minimal corners (2px)
-       */
-      ui: {
-        radius: {
-          small: { $type: "dimension", $value: "{primitive.radii.2}" },
-          medium: { $type: "dimension", $value: "{primitive.radii.2}" },
-          large: { $type: "dimension", $value: "{primitive.radii.2}" }
-        }
-      },
-      card: {
-        stroke: { $type: "dimension", $value: "{primitive.spacing.1}" }
-      },
-      button: {
-        stroke: { $type: "dimension", $value: "{primitive.spacing.1}" }
-      }
-    }
-  }
-};
-
-// ../tokens/dist/semantic/surface/soft.js
-var softSurfaceTokens = {
-  semantic: {
-    surface: {
-      $extensions: {
-        "nds.theme": {
-          category: "surface",
-          name: "soft",
-          extends: "base"
-        },
-        "nds.figmaSync": {
-          collectionKey: "e8c7bcd55a82a80373e500114ab1c648eaee98e0",
-          collectionName: "Soft",
-          extendsCollectionKey: "4f6dd00a848af32a4163fde4d543eb933824813e",
-          modeMapping: { modeName: "Mode 1" }
-        }
-      },
-      /**
-       * Soft UI Radius - all corners are heavily rounded (20px)
-       */
-      ui: {
-        radius: {
-          small: { $type: "dimension", $value: "{primitive.radii.20}" },
-          medium: { $type: "dimension", $value: "{primitive.radii.20}" },
-          large: { $type: "dimension", $value: "{primitive.radii.20}" }
-        }
-      },
-      card: {
-        stroke: { $type: "dimension", $value: "{primitive.spacing.0}" }
-      },
-      button: {
-        stroke: { $type: "dimension", $value: "{primitive.spacing.1}" }
-      }
-    }
-  }
-};
-
-// ../tokens/dist/semantic/typography/base.js
-var baseTypographyTokens = {
-  semantic: {
-    typography: {
-      $extensions: {
-        "nds.theme": {
-          category: "typography",
-          name: "base"
-        },
-        "nds.figmaSync": {
-          collectionKey: "96f5387fdb03cd6bbd3a7de7ead150f46afac330",
-          collectionName: "Typography",
-          modeMapping: { modeName: "Value" }
-        }
-      },
-      // =====================================================================
-      // HEADING GROUP
-      // Shared font properties for all headings
-      // =====================================================================
-      heading: {
-        font: {
-          $type: "fontFamily",
-          $value: "{primitive.font-family.inter-tight}",
-          $description: "Headline font family - shared across all headings"
-        },
-        weight: {
-          $type: "fontWeight",
-          $value: "{primitive.font-weight.semibold}",
-          $description: "Headline weight (600) - shared across all headings"
-        }
-      },
-      // H1 Display (XL) - Large hero typography
-      h1: {
-        display: {
-          $extensions: {
-            "nds.utility": {
-              name: "typography-h1-display",
-              responsive: true,
-              inherit: {
-                fontFamily: "heading.font",
-                fontWeight: "heading.weight"
-              }
-            }
-          },
-          lg: {
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.128}",
-              $description: "H1 display font size (lg breakpoint)"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.128}",
-              $description: "H1 display line height (lg breakpoint)"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.128}",
-              $description: "H1 display letter spacing (lg breakpoint)"
-            }
-          },
-          md: {
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.96}"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.96}"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.96}"
-            }
-          },
-          sm: {
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.64}"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.64}"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.64}"
-            }
-          }
-        },
-        // Regular H1 - flattened breakpoint structure
-        $extensions: {
-          "nds.utility": {
-            name: "typography-h1",
-            responsive: true,
-            inherit: {
-              fontFamily: "heading.font",
-              fontWeight: "heading.weight"
-            }
-          }
-        },
-        lg: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.96}",
-            $description: "H1 font size (lg breakpoint)"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.96}",
-            $description: "H1 line height (lg breakpoint)"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.96}",
-            $description: "H1 letter spacing (lg breakpoint)"
-          }
-        },
-        md: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.72}"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.72}"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.72}"
-          }
-        },
-        sm: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.48}"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.48}"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.48}"
-          }
-        }
-      },
-      // H2
-      h2: {
-        $extensions: {
-          "nds.utility": {
-            name: "typography-h2",
-            responsive: true,
-            inherit: {
-              fontFamily: "heading.font",
-              fontWeight: "heading.weight"
-            }
-          }
-        },
-        lg: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.72}",
-            $description: "H2 font size (lg breakpoint)"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.72}",
-            $description: "H2 line height (lg breakpoint)"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.72}",
-            $description: "H2 letter spacing (lg breakpoint)"
-          }
-        },
-        md: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.64}"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.64}"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.64}"
-          }
-        },
-        sm: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.48}"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.48}"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.48}"
-          }
-        }
-      },
-      // H3
-      h3: {
-        $extensions: {
-          "nds.utility": {
-            name: "typography-h3",
-            responsive: true,
-            inherit: {
-              fontFamily: "heading.font",
-              fontWeight: "heading.weight"
-            }
-          }
-        },
-        lg: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.64}",
-            $description: "H3 font size (lg breakpoint)"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.64}",
-            $description: "H3 line height (lg breakpoint)"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.64}",
-            $description: "H3 letter spacing (lg breakpoint)"
-          }
-        },
-        md: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.48}"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.48}"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.48}"
-          }
-        },
-        sm: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.32}"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.32}"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.32}"
-          }
-        }
-      },
-      // H4
-      h4: {
-        $extensions: {
-          "nds.utility": {
-            name: "typography-h4",
-            responsive: true,
-            inherit: {
-              fontFamily: "heading.font",
-              fontWeight: "heading.weight"
-            }
-          }
-        },
-        lg: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.48}",
-            $description: "H4 font size (lg breakpoint)"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.48}",
-            $description: "H4 line height (lg breakpoint)"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.48}",
-            $description: "H4 letter spacing (lg breakpoint)"
-          }
-        },
-        md: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.32}"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.32}"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.32}"
-          }
-        },
-        sm: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.24}"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.24}"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.24}"
-          }
-        }
-      },
-      // H5
-      h5: {
-        $extensions: {
-          "nds.utility": {
-            name: "typography-h5",
-            responsive: true,
-            inherit: {
-              fontFamily: "heading.font",
-              fontWeight: "heading.weight"
-            }
-          }
-        },
-        lg: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.32}",
-            $description: "H5 font size (lg breakpoint)"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.32}",
-            $description: "H5 line height (lg breakpoint)"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.32}",
-            $description: "H5 letter spacing (lg breakpoint)"
-          }
-        },
-        md: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.24}"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.24}"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.24}"
-          }
-        },
-        sm: {
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.21}"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.21}"
-          },
-          tracking: {
-            $type: "dimension",
-            $value: "{primitive.letter-spacing.21}"
-          }
-        }
-      },
-      // =====================================================================
-      // TEXT GROUP
-      // Body text, overline, and caption
-      // =====================================================================
-      body: {
-        font: {
-          $type: "fontFamily",
-          $value: "{primitive.font-family.inter}",
-          $description: "Body font family"
-        },
-        weight: {
-          $type: "fontWeight",
-          $value: "{primitive.font-weight.regular}",
-          $description: "Body font weight"
-        },
-        // Body Large - responsive typography
-        lg: {
-          $extensions: {
-            "nds.utility": {
-              name: "typography-body-lg",
-              responsive: true,
-              inherit: {
-                fontFamily: "body.font",
-                fontWeight: "body.weight"
-              }
-            }
-          },
-          lg: {
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.21}",
-              $description: "Body lg font size (lg breakpoint)"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.21}",
-              $description: "Body lg line height (lg breakpoint)"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.21}",
-              $description: "Body lg letter spacing (lg breakpoint)"
-            }
-          },
-          md: {
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.18}"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.18}"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.18}"
-            }
-          },
-          sm: {
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.16}"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.16}"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.16}"
-            }
-          }
-        },
-        // Body Medium - responsive typography
-        md: {
-          $extensions: {
-            "nds.utility": {
-              name: "typography-body-md",
-              responsive: true,
-              inherit: {
-                fontFamily: "body.font",
-                fontWeight: "body.weight"
-              }
-            }
-          },
-          lg: {
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.18}",
-              $description: "Body md font size (lg breakpoint)"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.18}",
-              $description: "Body md line height (lg breakpoint)"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.18}",
-              $description: "Body md letter spacing (lg breakpoint)"
-            }
-          },
-          md: {
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.16}"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.16}"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.16}"
-            }
-          },
-          sm: {
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.14}"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.14}"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.14}"
-            }
-          }
-        },
-        // Body Small - responsive typography
-        sm: {
-          $extensions: {
-            "nds.utility": {
-              name: "typography-body-sm",
-              responsive: true,
-              inherit: {
-                fontFamily: "body.font",
-                fontWeight: "body.weight"
-              }
-            }
-          },
-          lg: {
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.14}",
-              $description: "Body sm font size (lg breakpoint)"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.14}",
-              $description: "Body sm line height (lg breakpoint)"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.14}",
-              $description: "Body sm letter spacing (lg breakpoint)"
-            }
-          },
-          md: {
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.14}"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.14}"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.14}"
-            }
-          },
-          sm: {
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.12}"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.12}"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.12}"
-            }
-          }
-        }
-      },
-      // Overline - Small caps/label text
-      overline: {
-        $extensions: {
-          "nds.utility": {
-            name: "typography-overline",
-            inherit: {
-              fontFamily: "body.font"
-            }
-          }
-        },
-        size: {
-          $type: "dimension",
-          $value: "{primitive.font-size.14}",
-          $description: "Overline font size"
-        },
-        "line-height": {
-          $type: "dimension",
-          $value: "{primitive.line-height.24}",
-          $description: "Overline line height"
-        },
-        tracking: {
-          $type: "dimension",
-          $value: "{primitive.letter-spacing.14}",
-          $description: "Overline letter spacing"
-        }
-      },
-      // Caption - Small supplementary text
-      caption: {
-        $extensions: {
-          "nds.utility": {
-            name: "typography-caption",
-            inherit: {
-              fontFamily: "body.font"
-            }
-          }
-        },
-        size: {
-          $type: "dimension",
-          $value: "{primitive.font-size.11}",
-          $description: "Caption font size"
-        },
-        "line-height": {
-          $type: "dimension",
-          $value: "{primitive.line-height.11}",
-          $description: "Caption line height"
-        },
-        tracking: {
-          $type: "dimension",
-          $value: "{primitive.letter-spacing.11}",
-          $description: "Caption letter spacing"
-        }
-      },
-      // =====================================================================
-      // UI GROUP
-      // Button, link, and interactive element typography
-      // =====================================================================
-      ui: {
-        button: {
-          font: {
-            $type: "fontFamily",
-            $value: "{primitive.font-family.inter}",
-            $description: "Button font family"
-          },
-          weight: {
-            $type: "fontWeight",
-            $value: "{primitive.font-weight.medium}",
-            $description: "Button font weight"
-          },
-          lg: {
-            $extensions: {
-              "nds.utility": {
-                name: "typography-ui-button-lg",
-                inherit: {
-                  fontFamily: "ui.button.font",
-                  fontWeight: "ui.button.weight"
-                }
-              }
-            },
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.18}",
-              $description: "lg button font size"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.18}",
-              $description: "lg button line height"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.button}",
-              $description: "lg button letter spacing"
-            }
-          },
-          md: {
-            $extensions: {
-              "nds.utility": {
-                name: "typography-ui-button-md",
-                inherit: {
-                  fontFamily: "ui.button.font",
-                  fontWeight: "ui.button.weight"
-                }
-              }
-            },
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.16}",
-              $description: "md button font size"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.16}",
-              $description: "md button line height"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.button}",
-              $description: "md button letter spacing"
-            }
-          },
-          sm: {
-            $extensions: {
-              "nds.utility": {
-                name: "typography-ui-button-sm",
-                inherit: {
-                  fontFamily: "ui.button.font",
-                  fontWeight: "ui.button.weight"
-                }
-              }
-            },
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.14}",
-              $description: "sm button font size"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.14}",
-              $description: "sm button line height"
-            },
-            tracking: {
-              $type: "dimension",
-              $value: "{primitive.letter-spacing.button}",
-              $description: "sm button letter spacing"
-            }
-          }
-        },
-        link: {
-          weight: {
-            $type: "fontWeight",
-            $value: "{primitive.font-weight.medium}",
-            $description: "Link font weight"
-          }
-        },
-        label: {
-          $extensions: {
-            "nds.utility": {
-              name: "typography-ui-label",
-              inherit: {
-                fontFamily: "ui.label.font",
-                fontWeight: "ui.label.weight"
-              }
-            }
-          },
-          font: {
-            $type: "fontFamily",
-            $value: "{primitive.font-family.inter}",
-            $description: "Label font family"
-          },
-          weight: {
-            $type: "fontWeight",
-            $value: "{primitive.font-weight.medium}",
-            $description: "Label font weight"
-          },
-          size: {
-            $type: "dimension",
-            $value: "{primitive.font-size.14}",
-            $description: "Label font size"
-          },
-          "line-height": {
-            $type: "dimension",
-            $value: "{primitive.line-height.14}",
-            $description: "Label line height"
-          }
-        },
-        // Text - General UI text ramp for buttons, captions, and other UI elements
-        text: {
-          font: {
-            $type: "fontFamily",
-            $value: "{primitive.font-family.inter}",
-            $description: "UI text font family"
-          },
-          weight: {
-            $type: "fontWeight",
-            $value: "{primitive.font-weight.medium}",
-            $description: "UI text font weight"
-          },
-          xs: {
-            $extensions: {
-              "nds.utility": {
-                name: "typography-ui-text-xs",
-                inherit: {
-                  fontFamily: "ui.text.font",
-                  fontWeight: "ui.text.weight"
-                }
-              }
-            },
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.12}",
-              $description: "Extra small UI text font size (12px) - for small buttons, captions"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.12}",
-              $description: "Extra small UI text line height (16px)"
-            }
-          },
-          sm: {
-            $extensions: {
-              "nds.utility": {
-                name: "typography-ui-text-sm",
-                inherit: {
-                  fontFamily: "ui.text.font",
-                  fontWeight: "ui.text.weight"
-                }
-              }
-            },
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.14}",
-              $description: "Small UI text font size (14px) - for default buttons"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.14}",
-              $description: "Small UI text line height (20px)"
-            }
-          },
-          md: {
-            $extensions: {
-              "nds.utility": {
-                name: "typography-ui-text-md",
-                inherit: {
-                  fontFamily: "ui.text.font",
-                  fontWeight: "ui.text.weight"
-                }
-              }
-            },
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.16}",
-              $description: "Medium UI text font size (16px) - for large buttons"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.16}",
-              $description: "Medium UI text line height (24px)"
-            }
-          },
-          lg: {
-            $extensions: {
-              "nds.utility": {
-                name: "typography-ui-text-lg",
-                inherit: {
-                  fontFamily: "ui.text.font",
-                  fontWeight: "ui.text.weight"
-                }
-              }
-            },
-            size: {
-              $type: "dimension",
-              $value: "{primitive.font-size.18}",
-              $description: "Large UI text font size (18px) - optional larger size"
-            },
-            "line-height": {
-              $type: "dimension",
-              $value: "{primitive.line-height.28}",
-              $description: "Large UI text line height (28px)"
-            }
-          }
-        }
-      }
-    }
-  }
-};
-
-// ../tokens/dist/semantic/spatial/base.js
-var baseSpatialTokens = {
-  semantic: {
-    spatial: {
-      $extensions: {
-        "nds.theme": {
-          category: "spatial",
-          name: "base"
-        },
-        "nds.figmaSync": {
-          collectionKey: "145a1dde6a2edbd03b4e1fe9bbc9269e90bfe5f1",
-          collectionName: "Spatial",
-          modeMapping: { modeName: "Default" }
-        }
-      },
-      grid: {
-        $extensions: {
-          "nds.grid": {
-            generateUtilities: true
-          }
-        },
-        large: {
-          $extensions: {
-            "nds.breakpoint": {
-              name: "lg",
-              minWidth: "{primitive.breakpoint.lg}",
-              description: "Desktop (1440px+)"
-            }
-          },
-          margin: {
-            $type: "dimension",
-            $value: "{primitive.spacing.72}",
-            $description: "Outer margin for large breakpoint grid"
-          },
-          gutter: {
-            $type: "dimension",
-            $value: "{primitive.spacing.24}",
-            $description: "Gap between columns for large breakpoint"
-          },
-          columns: {
-            $type: "number",
-            $value: 24,
-            $description: "Number of columns for large breakpoint"
-          }
-        },
-        medium: {
-          $extensions: {
-            "nds.breakpoint": {
-              name: "md",
-              minWidth: "{primitive.breakpoint.md}",
-              description: "Tablet (768px - 1439px)"
-            }
-          },
-          margin: {
-            $type: "dimension",
-            $value: "{primitive.spacing.56}",
-            $description: "Outer margin for medium breakpoint grid"
-          },
-          gutter: {
-            $type: "dimension",
-            $value: "{primitive.spacing.20}",
-            $description: "Gap between columns for medium breakpoint"
-          },
-          columns: {
-            $type: "number",
-            $value: 12,
-            $description: "Number of columns for medium breakpoint"
-          }
-        },
-        small: {
-          $extensions: {
-            "nds.breakpoint": {
-              name: "sm",
-              minWidth: "{primitive.breakpoint.sm}",
-              description: "Mobile (< 768px)"
-            }
-          },
-          margin: {
-            $type: "dimension",
-            $value: "{primitive.spacing.24}",
-            $description: "Outer margin for small breakpoint grid"
-          },
-          gutter: {
-            $type: "dimension",
-            $value: "{primitive.spacing.12}",
-            $description: "Gap between columns for small breakpoint"
-          },
-          columns: {
-            $type: "number",
-            $value: 4,
-            $description: "Number of columns for small breakpoint"
-          }
-        }
-      },
-      section: {
-        large: {
-          gap: {
-            $type: "dimension",
-            $value: "{primitive.spacing.64}",
-            $description: "Gap between elements in large sections"
-          },
-          padding: {
-            $type: "dimension",
-            $value: "{primitive.spacing.128}",
-            $description: "Vertical padding for large sections"
-          }
-        },
-        medium: {
-          gap: {
-            $type: "dimension",
-            $value: "{primitive.spacing.56}",
-            $description: "Gap between elements in medium sections"
-          },
-          padding: {
-            $type: "dimension",
-            $value: "{primitive.spacing.96}",
-            $description: "Vertical padding for medium sections"
-          }
-        },
-        small: {
-          gap: {
-            $type: "dimension",
-            $value: "{primitive.spacing.32}",
-            $description: "Gap between elements in small sections"
-          },
-          padding: {
-            $type: "dimension",
-            $value: "{primitive.spacing.64}",
-            $description: "Vertical padding for small sections"
-          }
-        }
-      },
-      card: {
-        large: {
-          gap: {
-            $type: "dimension",
-            $value: "{primitive.spacing.10}",
-            $description: "Internal gap for large cards"
-          },
-          padding: {
-            $type: "dimension",
-            $value: "{primitive.spacing.24}",
-            $description: "Internal padding for large cards"
-          }
-        },
-        small: {
-          gap: {
-            $type: "dimension",
-            $value: "{primitive.spacing.12}",
-            $description: "Internal gap for small cards"
-          },
-          padding: {
-            $type: "dimension",
-            $value: "{primitive.spacing.16}",
-            $description: "Internal padding for small cards"
-          }
-        }
-      },
-      /**
-       * UI Control Tokens
-       *
-       * Spacing for form controls and UI elements.
-       */
-      ui: {
-        control: {
-          "vertical-padding": {
-            $type: "dimension",
-            $value: "{primitive.spacing.10}",
-            $description: "Vertical padding for form controls"
-          },
-          "horizontal-padding": {
-            $type: "dimension",
-            $value: "{primitive.spacing.16}",
-            $description: "Horizontal padding for form controls"
-          },
-          gap: {
-            $type: "dimension",
-            $value: "{primitive.spacing.8}",
-            $description: "Gap between control elements"
-          },
-          height: {
-            small: {
-              $type: "dimension",
-              $value: "{primitive.spacing.36}",
-              $description: "Height for small form controls"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{primitive.spacing.48}",
-              $description: "Height for medium form controls"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{primitive.spacing.56}",
-              $description: "Height for large form controls"
-            }
-          },
-          "padding-x": {
-            small: {
-              $type: "dimension",
-              $value: "{primitive.spacing.12}",
-              $description: "Horizontal padding for small form controls"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{primitive.spacing.16}",
-              $description: "Horizontal padding for medium form controls"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{primitive.spacing.20}",
-              $description: "Horizontal padding for large form controls"
-            }
-          },
-          "padding-y": {
-            small: {
-              $type: "dimension",
-              $value: "{primitive.spacing.8}",
-              $description: "Vertical padding for small form controls"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{primitive.spacing.10}",
-              $description: "Vertical padding for medium form controls"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{primitive.spacing.12}",
-              $description: "Vertical padding for large form controls"
-            }
-          }
-        },
-        button: {
-          gap: {
-            "icon-text": {
-              $type: "dimension",
-              $value: "{primitive.spacing.6}",
-              $description: "Gap between button icon and text"
-            },
-            "button-group": {
-              $type: "dimension",
-              $value: "{primitive.spacing.12}",
-              $description: "Gap between buttons in a group"
-            }
-          },
-          // Figma Button sizes: sm=32px, default=36px, lg=40px
-          height: {
-            small: {
-              $type: "dimension",
-              $value: "{primitive.spacing.32}",
-              $description: "Height for small buttons (32px)"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{primitive.spacing.36}",
-              $description: "Height for medium/default buttons (36px)"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{primitive.spacing.40}",
-              $description: "Height for large buttons (40px)"
-            }
-          },
-          "padding-x": {
-            small: {
-              $type: "dimension",
-              $value: "{primitive.spacing.12}",
-              $description: "Horizontal padding for small buttons (12px)"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{primitive.spacing.16}",
-              $description: "Horizontal padding for medium buttons (16px)"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{primitive.spacing.24}",
-              $description: "Horizontal padding for large buttons (24px)"
-            }
-          },
-          "padding-y": {
-            small: {
-              $type: "dimension",
-              $value: "{primitive.spacing.8}",
-              $description: "Vertical padding for small buttons (8px)"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{primitive.spacing.8}",
-              $description: "Vertical padding for medium buttons (8px)"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{primitive.spacing.10}",
-              $description: "Vertical padding for large buttons (10px)"
-            }
-          }
-        },
-        input: {
-          height: {
-            small: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.control.height.small}",
-              $description: "Height for small input controls"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.control.height.medium}",
-              $description: "Height for medium input controls"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.control.height.large}",
-              $description: "Height for large input controls"
-            }
-          },
-          "padding-x": {
-            small: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.control.padding-x.small}",
-              $description: "Horizontal padding for small input controls"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.control.padding-x.medium}",
-              $description: "Horizontal padding for medium input controls"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.control.padding-x.large}",
-              $description: "Horizontal padding for large input controls"
-            }
-          },
-          "padding-y": {
-            small: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.control.padding-y.small}",
-              $description: "Vertical padding for small input controls"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.control.padding-y.medium}",
-              $description: "Vertical padding for medium input controls"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.control.padding-y.large}",
-              $description: "Vertical padding for large input controls"
-            }
-          }
-        },
-        "input-group": {
-          height: {
-            small: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.input.height.small}",
-              $description: "Height for small input groups"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.input.height.medium}",
-              $description: "Height for medium input groups"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.input.height.large}",
-              $description: "Height for large input groups"
-            }
-          },
-          "padding-x": {
-            small: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.input.padding-x.small}",
-              $description: "Horizontal padding for small input groups"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.input.padding-x.medium}",
-              $description: "Horizontal padding for medium input groups"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.input.padding-x.large}",
-              $description: "Horizontal padding for large input groups"
-            }
-          },
-          "padding-y": {
-            small: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.input.padding-y.small}",
-              $description: "Vertical padding for small input groups"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.input.padding-y.medium}",
-              $description: "Vertical padding for medium input groups"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.input.padding-y.large}",
-              $description: "Vertical padding for large input groups"
-            }
-          },
-          gap: {
-            block: {
-              $type: "dimension",
-              $value: "{semantic.spatial.ui.control.gap}",
-              $description: "Gap between block addon and input in input group"
-            }
-          }
-        }
-      },
-      /**
-       * Component Spacing Tokens
-       *
-       * Spacing for specific components (padding, gap).
-       */
-      component: {
-        card: {
-          padding: {
-            small: {
-              $type: "dimension",
-              $value: "{primitive.spacing.24}",
-              $description: "Padding for small cards"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{primitive.spacing.32}",
-              $description: "Padding for medium cards"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{primitive.spacing.40}",
-              $description: "Padding for large cards"
-            }
-          },
-          gap: {
-            $type: "dimension",
-            $value: "{primitive.spacing.24}",
-            $description: "Internal gap for cards"
-          }
-        },
-        feature: {
-          padding: {
-            small: {
-              $type: "dimension",
-              $value: "{primitive.spacing.32}",
-              $description: "Padding for small features"
-            },
-            medium: {
-              $type: "dimension",
-              $value: "{primitive.spacing.40}",
-              $description: "Padding for medium features"
-            },
-            large: {
-              $type: "dimension",
-              $value: "{primitive.spacing.48}",
-              $description: "Padding for large features"
-            }
-          },
-          gap: {
-            $type: "dimension",
-            $value: "{primitive.spacing.24}",
-            $description: "Gap between icon and content in features"
-          }
-        },
-        testimonial: {
-          padding: {
-            $type: "dimension",
-            $value: "{primitive.spacing.40}",
-            $description: "Padding for testimonials"
-          },
-          gap: {
-            $type: "dimension",
-            $value: "{primitive.spacing.24}",
-            $description: "Gap between quote and attribution"
-          }
-        },
-        form: {
-          gap: {
-            "field-field": {
-              $type: "dimension",
-              $value: "{primitive.spacing.20}",
-              $description: "Gap between form fields"
-            },
-            "label-field": {
-              $type: "dimension",
-              $value: "{primitive.spacing.8}",
-              $description: "Gap between label and field"
-            },
-            "field-button": {
-              $type: "dimension",
-              $value: "{primitive.spacing.24}",
-              $description: "Gap between field and submit button"
-            }
-          }
-        },
-        accordion: {
-          "padding-y": {
-            $type: "dimension",
-            $value: "{primitive.spacing.28}",
-            $description: "Vertical padding for accordion items"
-          }
-        },
-        tooltip: {
-          "padding-x": {
-            $type: "dimension",
-            $value: "{primitive.spacing.10}",
-            $description: "Horizontal padding for tooltip content"
-          },
-          "padding-y": {
-            $type: "dimension",
-            $value: "{primitive.spacing.6}",
-            $description: "Vertical padding for tooltip content"
-          }
-        },
-        /**
-         * Overlay Spacing Tokens
-         *
-         * Spacing for floating UI components (popover, modal, dropdown, menu).
-         */
-        overlay: {
-          padding: {
-            $type: "dimension",
-            $value: "{primitive.spacing.16}",
-            $description: "Padding for overlay containers (16px)"
-          },
-          gap: {
-            $type: "dimension",
-            $value: "{primitive.spacing.16}",
-            $description: "Gap between overlay content elements (16px)"
-          }
-        },
-        navbar: {
-          "padding-x": {
-            mobile: {
-              $type: "dimension",
-              $value: "{primitive.spacing.20}",
-              $description: "Horizontal padding for mobile navbar"
-            },
-            tablet: {
-              $type: "dimension",
-              $value: "{primitive.spacing.32}",
-              $description: "Horizontal padding for tablet navbar"
-            },
-            desktop: {
-              $type: "dimension",
-              $value: "{primitive.spacing.32}",
-              $description: "Horizontal padding for desktop navbar"
-            }
-          },
-          "padding-y": {
-            mobile: {
-              $type: "dimension",
-              $value: "{primitive.spacing.8}",
-              $description: "Vertical padding for mobile navbar"
-            },
-            tablet: {
-              $type: "dimension",
-              $value: "{primitive.spacing.16}",
-              $description: "Vertical padding for tablet navbar"
-            },
-            desktop: {
-              $type: "dimension",
-              $value: "{primitive.spacing.24}",
-              $description: "Vertical padding for desktop navbar"
-            }
-          },
-          gap: {
-            links: {
-              $type: "dimension",
-              $value: "{primitive.spacing.40}",
-              $description: "Gap between navbar links"
-            },
-            actions: {
-              $type: "dimension",
-              $value: "{primitive.spacing.8}",
-              $description: "Gap between navbar actions"
-            },
-            "mobile-menu": {
-              $type: "dimension",
-              $value: "{primitive.spacing.8}",
-              $description: "Gap in mobile menu items"
-            }
-          }
-        },
-        /**
-         * Video Player Spacing Tokens
-         *
-         * Spacing for video player controls, captions, and overlays.
-         */
-        "video-player": {
-          controls: {
-            height: {
-              $type: "dimension",
-              $value: "{primitive.spacing.48}",
-              $description: "Height of video player controls bar"
-            },
-            padding: {
-              $type: "dimension",
-              $value: "{primitive.spacing.16}",
-              $description: "Padding inside controls bar"
-            },
-            gap: {
-              $type: "dimension",
-              $value: "{primitive.spacing.12}",
-              $description: "Gap between control buttons"
-            }
-          },
-          caption: {
-            "padding-x": {
-              $type: "dimension",
-              $value: "{primitive.spacing.16}",
-              $description: "Horizontal padding for caption text"
-            },
-            "padding-y": {
-              $type: "dimension",
-              $value: "{primitive.spacing.8}",
-              $description: "Vertical padding for caption text"
-            },
-            "offset-bottom": {
-              $type: "dimension",
-              $value: "{primitive.spacing.64}",
-              $description: "Distance from bottom of video to caption"
-            }
-          },
-          "close-button": {
-            size: {
-              $type: "dimension",
-              $value: "{primitive.spacing.40}",
-              $description: "Size of close button"
-            },
-            offset: {
-              $type: "dimension",
-              $value: "{primitive.spacing.16}",
-              $description: "Offset from top-right corner"
-            }
-          }
-        }
-      },
-      /**
-       * Prose Tokens
-       *
-       * Spacing for prose/content blocks.
-       */
-      prose: {
-        "heading-gap": {
-          $type: "dimension",
-          $value: "{primitive.spacing.36}",
-          $description: "Gap before headings in prose"
-        },
-        "block-gap": {
-          $type: "dimension",
-          $value: "{primitive.spacing.96}",
-          $description: "Gap between prose blocks"
-        }
-      },
-      /**
-       * Content Layout Tokens
-       *
-       * Responsive content width patterns for the 12-column grid.
-       * Generates utilities: grid-content-narrow, grid-content-medium, grid-content-wide
-       */
-      layout: {
-        narrow: {
-          $description: "Narrow centered content (reading/mission statements)",
-          large: {
-            span: { $type: "number", $value: 8 },
-            start: { $type: "number", $value: 3 }
-          },
-          medium: {
-            span: { $type: "number", $value: 8 },
-            start: { $type: "number", $value: 3 }
-          }
-        },
-        medium: {
-          $description: "Medium centered content (forms/general)",
-          large: {
-            span: { $type: "number", $value: 8 },
-            start: { $type: "number", $value: 3 }
-          },
-          medium: {
-            span: { $type: "number", $value: 10 },
-            start: { $type: "number", $value: 2 }
-          }
-        },
-        wide: {
-          $description: "Wide content (dashboards/tables)",
-          large: {
-            span: { $type: "number", $value: 10 },
-            start: { $type: "number", $value: 2 }
-          },
-          medium: {
-            span: { $type: "number", $value: 12 },
-            start: { $type: "number", $value: 1 }
-          }
-        }
-      }
-    }
-  }
-};
-
-// ../tokens/dist/theme-registry.js
-var colorThemes = {
-  base: baseColorTokens,
-  bop: bopColorTokens,
-  civic: civicColorTokens,
-  dark: darkColorTokens,
-  darktech: darktechColorTokens,
-  institution: institutionColorTokens,
-  oceana: oceanaColorTokens,
-  recreation: recreationColorTokens
-};
-var surfaceThemes = {
-  base: baseSurfaceTokens,
-  sharp: sharpSurfaceTokens,
-  framed: framedSurfaceTokens,
-  soft: softSurfaceTokens
-};
-
-// ../tokens/dist/themes/resolver.js
-function flatToNested(flatTokens) {
-  const nested = {};
-  for (const [key, value] of Object.entries(flatTokens)) {
-    const parts = key.split("-");
-    let current = nested;
-    for (let i = 0; i < parts.length - 1; i++) {
-      const part = parts[i];
-      if (!part)
-        continue;
-      if (!(part in current)) {
-        current[part] = {};
-      }
-      const next = current[part];
-      if (typeof next === "string") {
-        console.warn(`Token naming conflict at ${parts.slice(0, i + 1).join("-")}`);
-        break;
-      }
-      if (next === void 0) {
-        current[part] = {};
-        current = current[part];
-      } else {
-        current = next;
-      }
-    }
-    const lastPart = parts[parts.length - 1];
-    if (lastPart && typeof current === "object") {
-      current[lastPart] = value;
-    }
-  }
-  return nested;
-}
-function flatToCSSVars(flatTokens) {
-  const result = {};
-  for (const [key, value] of Object.entries(flatTokens)) {
-    result[`--${key}`] = value;
-  }
-  return result;
-}
-function nestedToCSSVars(nested, prefix = "") {
-  const result = {};
-  function traverse(obj, currentPrefix) {
-    for (const [key, value] of Object.entries(obj)) {
-      const newPrefix = currentPrefix ? `${currentPrefix}-${key}` : key;
-      if (typeof value === "string") {
-        result[`--${newPrefix}`] = value;
-      } else {
-        traverse(value, newPrefix);
-      }
-    }
-  }
-  traverse(nested, prefix);
-  return result;
-}
-
-// ../tokens/dist/primitives/animation.js
-var primitiveAnimation = {
-  primitive: {
-    duration: {
-      $extensions: {
-        "nds.figmaSync": {
-          collectionKey: "b8954b6c8ba9f47552aea2920a0ee36c5f000e64",
-          collectionName: "Primitives",
-          modeMapping: { modeName: "Value" }
-        }
-      },
-      $type: "duration",
-      $description: "Animation duration values",
-      /**
-       * Instant - for immediate feedback (e.g., button press)
-       */
-      "0": duration(0),
-      /**
-       * Extra fast - for micro-interactions (e.g., hover states)
-       */
-      "75": duration(75),
-      /**
-       * Fast - for quick transitions (e.g., fade in/out, color changes)
-       */
-      "150": duration(150),
-      /**
-       * Normal - for standard UI transitions (e.g., menu open, modal appear)
-       */
-      "200": duration(200),
-      /**
-       * Medium - for moderate animations (e.g., accordion expand)
-       */
-      "300": duration(300),
-      /**
-       * Slow - for deliberate animations (e.g., page transitions)
-       */
-      "500": duration(500),
-      /**
-       * Extra slow - for dramatic effect (e.g., hero animations)
-       */
-      "700": duration(700),
-      /**
-       * Very slow - for long-running animations (e.g., progress indicators)
-       */
-      "1000": duration(1e3)
-    },
-    easing: {
-      $extensions: {
-        "nds.figmaSync": {
-          collectionKey: "b8954b6c8ba9f47552aea2920a0ee36c5f000e64",
-          collectionName: "Primitives",
-          modeMapping: { modeName: "Value" },
-          skip: true
-        }
-      },
-      $type: "cubicBezier",
-      $description: "Easing curves for animations",
-      /**
-       * Linear - constant speed, no acceleration
-       */
-      linear: cubicBezier(0, 0, 1, 1),
-      /**
-       * Ease - subtle acceleration and deceleration (CSS default)
-       */
-      ease: cubicBezier(0.25, 0.1, 0.25, 1),
-      /**
-       * Ease In - starts slow, accelerates
-       * Use for elements exiting the screen
-       */
-      "ease-in": cubicBezier(0.42, 0, 1, 1),
-      /**
-       * Ease Out - starts fast, decelerates
-       * Use for elements entering the screen
-       */
-      "ease-out": cubicBezier(0, 0, 0.58, 1),
-      /**
-       * Ease In Out - slow start and end
-       * Use for elements that stay on screen
-       */
-      "ease-in-out": cubicBezier(0.42, 0, 0.58, 1),
-      /**
-       * Emphasized - dramatic ease out with overshoot feel
-       * Based on Material Design's emphasized easing
-       */
-      emphasized: cubicBezier(0.2, 0, 0, 1),
-      /**
-       * Smooth - Apple-style smooth easing
-       * Great for accordion, height transitions
-       */
-      smooth: cubicBezier(0.23, 1, 0.32, 1),
-      /**
-       * Bounce - slight overshoot at the end
-       * Use sparingly for playful interactions
-       */
-      bounce: cubicBezier(0.34, 1.56, 0.64, 1),
-      /**
-       * Snappy - quick response, smooth finish
-       * Good for hover states and quick feedback
-       */
-      snappy: cubicBezier(0.4, 0, 0.2, 1)
-    }
-  }
-};
-
-// ../tokens/dist/primitives/breakpoints.js
-var primitiveBreakpoints = {
-  primitive: {
-    breakpoint: {
-      $extensions: {
-        "nds.figmaSync": {
-          collectionKey: "",
-          // Not used - skip is true
-          skip: true
-          // Breakpoints are not synced to Figma
-        }
-      },
-      $type: "dimension",
-      sm: {
-        ...dimension(320),
-        $extensions: { "nds.maxWidthAlias": "mobile" }
-      },
-      md: {
-        ...dimension(768),
-        $extensions: { "nds.maxWidthAlias": "tablet" }
-      },
-      lg: {
-        ...dimension(1440),
-        $extensions: { "nds.maxWidthAlias": "desktop" }
-      }
-    }
-  }
-};
-
-// ../tokens/dist/primitives/colors.js
-var primitiveColors = {
-  primitive: {
-    color: {
-      $extensions: {
-        "nds.figmaSync": {
-          collectionKey: "b8954b6c8ba9f47552aea2920a0ee36c5f000e64",
-          collectionName: "Primitives",
-          modeMapping: { modeName: "Value" }
-        }
-      },
-      $type: "color",
-      gray: {
-        "50": srgb("#FAFAFA"),
-        "100": srgb("#F5F5F5"),
-        "200": srgb("#EEEEEE"),
-        "300": srgb("#E0E0E0"),
-        "400": srgb("#BDBDBD"),
-        "500": srgb("#9E9E9E"),
-        "600": srgb("#757575"),
-        "700": srgb("#616161"),
-        "800": srgb("#424242"),
-        "900": srgb("#212121"),
-        "1000": srgb("#1A1A1A"),
-        "1100": srgb("#141414"),
-        "1200": srgb("#0A0A0A")
-      },
-      brown: {
-        "50": srgb("#EEEBE9"),
-        "100": srgb("#D5CCC9"),
-        "200": srgb("#B9ABA5"),
-        "300": srgb("#9D8980"),
-        "400": srgb("#886F65"),
-        "500": srgb("#74564A"),
-        "600": srgb("#684D43"),
-        "700": srgb("#594139"),
-        "800": srgb("#4A352F"),
-        "900": srgb("#3B2824"),
-        "1000": srgb("#2F201D"),
-        "1100": srgb("#1C1312"),
-        "1200": srgb("#18100E")
-      },
-      steel: {
-        "50": srgb("#EDEFF1"),
-        "100": srgb("#D1D8DC"),
-        "200": srgb("#B3BEC4"),
-        "300": srgb("#94A3AD"),
-        "400": srgb("#7D8F9B"),
-        "500": srgb("#667C89"),
-        "600": srgb("#596D79"),
-        "700": srgb("#495963"),
-        "800": srgb("#3A474E"),
-        "900": srgb("#283237"),
-        "1000": srgb("#222B2F"),
-        "1100": srgb("#181E21"),
-        "1200": srgb("#101416")
-      },
-      red: {
-        "50": srgb("#FFEBEE"),
-        "100": srgb("#FFCDD2"),
-        "200": srgb("#EF9A9A"),
-        "300": srgb("#E57373"),
-        "400": srgb("#EF5350"),
-        "500": srgb("#F44336"),
-        "600": srgb("#E53935"),
-        "700": srgb("#D32F2F"),
-        "800": srgb("#C62828"),
-        "900": srgb("#B71C1C"),
-        v100: srgb("#FF8A80"),
-        v200: srgb("#FF5252"),
-        v300: srgb("#FF1744"),
-        v400: srgb("#D50000")
-      },
-      pink: {
-        "50": srgb("#F8E5EC"),
-        "100": srgb("#EFBECF"),
-        "200": srgb("#E694B0"),
-        "300": srgb("#DF6B92"),
-        "400": srgb("#DA4F7A"),
-        "500": srgb("#D63864"),
-        "600": srgb("#C63361"),
-        "700": srgb("#B22D5B"),
-        "800": srgb("#9F2757"),
-        "900": srgb("#7D1D4E"),
-        v100: srgb("#EF87AA"),
-        v200: srgb("#EB5181"),
-        v300: srgb("#E1305A"),
-        v400: srgb("#B52B62")
-      },
-      purple: {
-        "50": srgb("#F1E5F4"),
-        "100": srgb("#DBBFE4"),
-        "200": srgb("#C596D4"),
-        "300": srgb("#AF6CC3"),
-        "400": srgb("#9F4DB6"),
-        "500": srgb("#9031AA"),
-        "600": srgb("#832DA4"),
-        "700": srgb("#71279C"),
-        "800": srgb("#612294"),
-        "900": srgb("#441886"),
-        v100: srgb("#DC86F5"),
-        v200: srgb("#CF4EF3"),
-        v300: srgb("#C32AF0"),
-        v400: srgb("#9B20F6")
-      },
-      iris: {
-        "50": srgb("#ECE7F5"),
-        "100": srgb("#CFC4E6"),
-        "200": srgb("#AF9ED7"),
-        "300": srgb("#9076C7"),
-        "400": srgb("#7859BC"),
-        "500": srgb("#613DB0"),
-        "600": srgb("#5837AB"),
-        "700": srgb("#4C2FA2"),
-        "800": srgb("#40299A"),
-        "900": srgb("#2D1D8C"),
-        v100: srgb("#DC86F5"),
-        v200: srgb("#CF4EF3"),
-        v300: srgb("#C32AF0"),
-        v400: srgb("#9B20F6")
-      },
-      indigo: {
-        "25": srgb("#F5F7FF"),
-        // very light tint - menu hover
-        "35": srgb("#EDF2FF"),
-        // light tint - menu selected
-        "50": srgb("#E8EAF5"),
-        "100": srgb("#C6CAE6"),
-        "200": srgb("#A0A8D6"),
-        "300": srgb("#7B86C6"),
-        "400": srgb("#5F6BBA"),
-        "500": srgb("#4251AF"),
-        "600": srgb("#3C49A5"),
-        "700": srgb("#333F99"),
-        "800": srgb("#2A358E"),
-        "900": srgb("#1B2379"),
-        v100: srgb("#8F9EF8"),
-        v200: srgb("#586DF5"),
-        v300: srgb("#425AF5"),
-        v400: srgb("#364FF4")
-      },
-      blue: {
-        "50": srgb("#E6F2FC"),
-        "100": srgb("#C2DDF8"),
-        "200": srgb("#9CC8F5"),
-        "300": srgb("#77B3F0"),
-        "400": srgb("#5DA3EF"),
-        "500": srgb("#4894EC"),
-        "600": srgb("#4186DE"),
-        "700": srgb("#3874CB"),
-        "800": srgb("#2F64BA"),
-        "900": srgb("#1F469B"),
-        v100: srgb("#8CB0F9"),
-        v200: srgb("#5589F7"),
-        v250: srgb("#3B85FF"),
-        // menu selected text
-        v300: srgb("#4078F6"),
-        v400: srgb("#3761F6")
-      },
-      ice: {
-        "50": srgb("#E5F4FD"),
-        "100": srgb("#BDE4F9"),
-        "200": srgb("#94D2F6"),
-        "300": srgb("#6FC1F2"),
-        "400": srgb("#59B4F0"),
-        "500": srgb("#4BA7EE"),
-        "600": srgb("#4499DF"),
-        "700": srgb("#3B86CB"),
-        "800": srgb("#3275B8"),
-        "900": srgb("#235696"),
-        v100: srgb("#8CB0F9"),
-        v200: srgb("#5589F7"),
-        v300: srgb("#4078F6"),
-        v400: srgb("#3761F6")
-      },
-      cyan: {
-        "50": srgb("#E4F6F9"),
-        "100": srgb("#BEE9F1"),
-        "200": srgb("#96DCE8"),
-        "300": srgb("#73CDDE"),
-        "400": srgb("#5FC3D7"),
-        "500": srgb("#54B9D1"),
-        "600": srgb("#4CA9BE"),
-        "700": srgb("#4295A5"),
-        "800": srgb("#38818D"),
-        "900": srgb("#275F63"),
-        v100: srgb("#A3FCFE"),
-        v200: srgb("#77FBFD"),
-        v300: srgb("#68E2FB"),
-        v400: srgb("#52B5D0")
-      },
-      teal: {
-        "50": srgb("#E3F1F1"),
-        "100": srgb("#BBDEDB"),
-        "200": srgb("#91C9C4"),
-        "300": srgb("#6AB4AC"),
-        "400": srgb("#51A49A"),
-        "500": srgb("#429488"),
-        "600": srgb("#3B877B"),
-        "700": srgb("#34776B"),
-        "800": srgb("#2C675C"),
-        "900": srgb("#1E4C40"),
-        v100: srgb("#BBFDEC"),
-        v200: srgb("#91FCDC"),
-        v300: srgb("#6DE6B9"),
-        v400: srgb("#55BCA6")
-      },
-      green: {
-        "50": srgb("#EAF5EA"),
-        "100": srgb("#CEE5CB"),
-        "200": srgb("#AFD5AB"),
-        "300": srgb("#91C58A"),
-        "400": srgb("#7BB972"),
-        "500": srgb("#67AD5B"),
-        "600": srgb("#5D9E52"),
-        "700": srgb("#508C46"),
-        "800": srgb("#457B3B"),
-        "900": srgb("#2F5D28"),
-        v100: srgb("#C6F4CD"),
-        v200: srgb("#8EEDB3"),
-        v300: srgb("#69E282"),
-        v400: srgb("#5AC561")
-      },
-      sage: {
-        "50": srgb("#F2F8EA"),
-        "100": srgb("#DFECCB"),
-        "200": srgb("#CAE0AB"),
-        "300": srgb("#B6D48A"),
-        "400": srgb("#A6CB72"),
-        "500": srgb("#97C15C"),
-        "600": srgb("#88B153"),
-        "700": srgb("#749E47"),
-        "800": srgb("#618A3D"),
-        "900": srgb("#416829"),
-        v100: srgb("#D6FD9D"),
-        v200: srgb("#C3FD73"),
-        v300: srgb("#9BFC4E"),
-        v400: srgb("#85DA47")
-      },
-      lime: {
-        "50": srgb("#F9FBE9"),
-        "100": srgb("#F1F4C8"),
-        "200": srgb("#E8EEA5"),
-        "300": srgb("#DEE784"),
-        "400": srgb("#D7E06D"),
-        "500": srgb("#D0DB59"),
-        "600": srgb("#C2CA51"),
-        "700": srgb("#B0B447"),
-        "800": srgb("#9E9D3D"),
-        "900": srgb("#80772C"),
-        v100: srgb("#F6FF92"),
-        v200: srgb("#F1FE67"),
-        v300: srgb("#D2FD51"),
-        v400: srgb("#BBE849")
-      },
-      yellow: {
-        "50": srgb("#FFFDE9"),
-        "100": srgb("#FEF9CA"),
-        "200": srgb("#FDF5A8"),
-        "300": srgb("#FDF188"),
-        "400": srgb("#FCEE72"),
-        "500": srgb("#FCEC60"),
-        "600": srgb("#F7D959"),
-        "700": srgb("#F2C24F"),
-        "800": srgb("#EDAB46"),
-        "900": srgb("#E68537"),
-        v100: srgb("#FFFF9C"),
-        v200: srgb("#FFFF54"),
-        v300: srgb("#FCEB4E"),
-        v400: srgb("#F9D749")
-      },
-      amber: {
-        "50": srgb("#FEF8E3"),
-        "100": srgb("#FCEDBA"),
-        "200": srgb("#FAE18F"),
-        "300": srgb("#F8D667"),
-        "400": srgb("#F7CC50"),
-        "500": srgb("#F6C344"),
-        "600": srgb("#F4B63F"),
-        "700": srgb("#F2A43A"),
-        "800": srgb("#F09436"),
-        "900": srgb("#EE782F"),
-        v100: srgb("#FBE68D"),
-        v200: srgb("#F9D85E"),
-        v300: srgb("#F6C644"),
-        v400: srgb("#F3AF3D")
-      },
-      orange: {
-        "50": srgb("#FDF3E2"),
-        "100": srgb("#FAE1B8"),
-        "200": srgb("#F7CE8B"),
-        "300": srgb("#F4BA61"),
-        "400": srgb("#F3AB47"),
-        "500": srgb("#F19D38"),
-        "600": srgb("#EC9135"),
-        "700": srgb("#E68231"),
-        "800": srgb("#DF742C"),
-        "900": srgb("#D55B26"),
-        v100: srgb("#F8D38B"),
-        v200: srgb("#F3AF56"),
-        v300: srgb("#F09637"),
-        v400: srgb("#EE762F")
-      },
-      ember: {
-        "50": srgb("#F8EAE7"),
-        "100": srgb("#F7CEBF"),
-        "200": srgb("#F3AF96"),
-        "300": srgb("#F0906D"),
-        "400": srgb("#EE7850"),
-        "500": srgb("#EC6337"),
-        "600": srgb("#E25D33"),
-        "700": srgb("#D5562E"),
-        "800": srgb("#C84E29"),
-        "900": srgb("#B04121"),
-        v100: srgb("#F2A286"),
-        v200: srgb("#EE774D"),
-        v300: srgb("#EB4F27"),
-        v400: srgb("#CB3E20")
-      },
-      "alpha-black": {
-        "5": srgb("#000000", 0.05),
-        "10": srgb("#000000", 0.1),
-        "20": srgb("#000000", 0.2),
-        "30": srgb("#000000", 0.3),
-        "40": srgb("#000000", 0.4),
-        "50": srgb("#000000", 0.5),
-        "60": srgb("#000000", 0.6),
-        "70": srgb("#000000", 0.7),
-        "80": srgb("#000000", 0.8),
-        "90": srgb("#000000", 0.9),
-        "95": srgb("#000000", 0.95)
-      },
-      "alpha-white": {
-        "5": srgb("#FFFFFF", 0.05),
-        "10": srgb("#FFFFFF", 0.1),
-        "20": srgb("#FFFFFF", 0.2),
-        "30": srgb("#FFFFFF", 0.3),
-        "40": srgb("#FFFFFF", 0.4),
-        "50": srgb("#FFFFFF", 0.5),
-        "60": srgb("#FFFFFF", 0.6),
-        "70": srgb("#FFFFFF", 0.7),
-        "80": srgb("#FFFFFF", 0.8),
-        "90": srgb("#FFFFFF", 0.9),
-        "95": srgb("#FFFFFF", 0.95)
-      },
-      white: srgb("#FFFFFF"),
-      black: srgb("#000000")
-    }
-  }
-};
-
-// ../tokens/dist/primitives/opacity.js
-var primitiveOpacity = {
-  primitive: {
-    opacity: {
-      $extensions: {
-        "nds.figmaSync": {
-          collectionKey: "b8954b6c8ba9f47552aea2920a0ee36c5f000e64",
-          collectionName: "Primitives",
-          modeMapping: { modeName: "Value" }
-        }
-      },
-      "0": { $type: "number", $value: 0 },
-      "25": { $type: "number", $value: 0.25 },
-      "50": { $type: "number", $value: 0.5 },
-      "75": { $type: "number", $value: 0.75 },
-      "100": { $type: "number", $value: 1 }
-    }
-  }
-};
-
-// ../tokens/dist/primitives/radii.js
-var primitiveRadii = {
-  primitive: {
-    radii: {
-      $extensions: {
-        "nds.figmaSync": {
-          collectionKey: "b8954b6c8ba9f47552aea2920a0ee36c5f000e64",
-          collectionName: "Primitives",
-          modeMapping: { modeName: "Value" }
-        }
-      },
-      $type: "dimension",
-      "0": dimension(0),
-      "2": dimension(2),
-      "4": dimension(4),
-      "6": dimension(6),
-      "8": dimension(8),
-      "10": dimension(10),
-      "12": dimension(12),
-      "14": dimension(14),
-      "16": dimension(16),
-      "18": dimension(18),
-      "20": dimension(20),
-      "22": dimension(22),
-      "24": dimension(24),
-      "26": dimension(26),
-      "28": dimension(28),
-      "30": dimension(30),
-      "32": dimension(32),
-      "34": dimension(34)
-    }
-  }
-};
-
-// ../tokens/dist/primitives/shadow.js
-var primitiveShadow = {
-  primitive: {
-    shadow: {
-      $extensions: {
-        "nds.figmaSync": {
-          collectionKey: "b8954b6c8ba9f47552aea2920a0ee36c5f000e64",
-          // Primitives collection
-          collectionName: "Primitives",
-          skip: true
-          // Shadows are managed as Effect Styles in Figma, not variables
-        }
-      },
-      sm: shadow([
-        {
-          offsetX: 0,
-          offsetY: 1,
-          blur: 2,
-          spread: 0,
-          color: "#000000",
-          alpha: 0.05
-        }
-      ]),
-      md: shadow([
-        {
-          offsetX: 0,
-          offsetY: 4,
-          blur: 6,
-          spread: -1,
-          color: "#000000",
-          alpha: 0.1
-        },
-        {
-          offsetX: 0,
-          offsetY: 2,
-          blur: 4,
-          spread: -2,
-          color: "#000000",
-          alpha: 0.1
-        }
-      ]),
-      lg: shadow([
-        {
-          offsetX: 0,
-          offsetY: 10,
-          blur: 15,
-          spread: -3,
-          color: "#000000",
-          alpha: 0.1
-        },
-        {
-          offsetX: 0,
-          offsetY: 4,
-          blur: 6,
-          spread: -4,
-          color: "#000000",
-          alpha: 0.1
-        }
-      ])
-    }
-  }
-};
-
-// ../tokens/dist/primitives/spacing.js
-var primitiveSpacing = {
-  primitive: {
-    spacing: {
-      $extensions: {
-        "nds.figmaSync": {
-          collectionKey: "b8954b6c8ba9f47552aea2920a0ee36c5f000e64",
-          collectionName: "Primitives",
-          modeMapping: { modeName: "Value" }
-        }
-      },
-      $type: "dimension",
-      "0": dimension(0),
-      "1": dimension(1),
-      "2": dimension(2),
-      "4": dimension(4),
-      "6": dimension(6),
-      "8": dimension(8),
-      "10": dimension(10),
-      "11": dimension(11),
-      "12": dimension(12),
-      "16": dimension(16),
-      "20": dimension(20),
-      "24": dimension(24),
-      "28": dimension(28),
-      "32": dimension(32),
-      "36": dimension(36),
-      "40": dimension(40),
-      "48": dimension(48),
-      "56": dimension(56),
-      "64": dimension(64),
-      "72": dimension(72),
-      "80": dimension(80),
-      "96": dimension(96),
-      "112": dimension(112),
-      "128": dimension(128),
-      "144": dimension(144),
-      "160": dimension(160),
-      "176": dimension(176),
-      "192": dimension(192),
-      "208": dimension(208),
-      "224": dimension(224),
-      "240": dimension(240),
-      "256": dimension(256),
-      "288": dimension(288),
-      "320": dimension(320),
-      "352": dimension(352),
-      "384": dimension(384),
-      "400": dimension(400)
-    }
-  }
-};
-
-// ../tokens/dist/primitives/typography.js
-var primitiveTypography = {
-  primitive: {
-    "font-size": {
-      $extensions: {
-        "nds.figmaSync": {
-          collectionKey: "b8954b6c8ba9f47552aea2920a0ee36c5f000e64",
-          collectionName: "Primitives",
-          modeMapping: { modeName: "Value" }
-        }
-      },
-      $type: "dimension",
-      "9": dimension(9),
-      "11": dimension(11),
-      "12": dimension(12),
-      "14": dimension(14),
-      "16": dimension(16),
-      "18": dimension(18),
-      "21": dimension(21),
-      "24": dimension(24),
-      "28": dimension(28),
-      "32": dimension(32),
-      "36": dimension(36),
-      "42": dimension(42),
-      "48": dimension(48),
-      "56": dimension(56),
-      "64": dimension(64),
-      "72": dimension(72),
-      "84": dimension(84),
-      "88": dimension(88),
-      "96": dimension(96),
-      "112": dimension(112),
-      "128": dimension(128),
-      "148": dimension(148),
-      "168": dimension(168),
-      "192": dimension(192),
-      "224": dimension(224),
-      "256": dimension(256),
-      "280": dimension(280)
-    },
-    "line-height": {
-      $extensions: {
-        "nds.figmaSync": {
-          collectionKey: "b8954b6c8ba9f47552aea2920a0ee36c5f000e64",
-          collectionName: "Primitives",
-          modeMapping: { modeName: "Value" }
-        }
-      },
-      $type: "dimension",
-      "9": dimension(11),
-      "11": dimension(13),
-      "12": dimension(16),
-      "14": dimension(20),
-      "16": dimension(24),
-      "18": dimension(27),
-      "21": dimension(29),
-      "22": dimension(22),
-      "24": dimension(24),
-      "28": dimension(28),
-      "31": dimension(31),
-      "32": dimension(32),
-      "36": dimension(36),
-      "38": dimension(38),
-      "42": dimension(46),
-      "43": dimension(43),
-      "46": dimension(46),
-      "48": dimension(53),
-      "53": dimension(53),
-      "56": dimension(62),
-      "62": dimension(62),
-      "64": dimension(64),
-      "72": dimension(72),
-      "84": dimension(84),
-      "88": dimension(88),
-      "96": dimension(96),
-      "112": dimension(106),
-      "128": dimension(122),
-      "148": dimension(141),
-      "168": dimension(151),
-      "192": dimension(173),
-      "224": dimension(202),
-      "256": dimension(218),
-      "280": dimension(238)
-    },
-    "letter-spacing": {
-      $extensions: {
-        "nds.figmaSync": {
-          collectionKey: "b8954b6c8ba9f47552aea2920a0ee36c5f000e64",
-          collectionName: "Primitives",
-          modeMapping: { modeName: "Value" }
-        }
-      },
-      $type: "dimension",
-      "9": dimension(0.18),
-      "11": dimension(0.17),
-      "12": dimension(0.12),
-      "14": dimension(0.07),
-      "16": dimension(0),
-      "18": dimension(0),
-      "21": dimension(0),
-      "24": dimension(0),
-      "28": dimension(-0.14),
-      "32": dimension(-0.16),
-      "36": dimension(-0.36),
-      "42": dimension(-0.42),
-      "48": dimension(-0.72),
-      "56": dimension(-1.12),
-      "64": dimension(-1.28),
-      "72": dimension(-1.8),
-      "84": dimension(-2.1),
-      "88": dimension(-2.64),
-      "96": dimension(-2.88),
-      "112": dimension(-3.92),
-      "128": dimension(-5.12),
-      "148": dimension(-6.66),
-      "168": dimension(-7.56),
-      "192": dimension(-9.6),
-      "224": dimension(-11.2),
-      "256": dimension(-14.08),
-      "280": dimension(-15.4),
-      button: dimension(0.5)
-    },
-    "font-family": {
-      $extensions: {
-        "nds.figmaSync": {
-          collectionKey: "b8954b6c8ba9f47552aea2920a0ee36c5f000e64",
-          collectionName: "Primitives",
-          modeMapping: { modeName: "Value" }
-        }
-      },
-      $type: "fontFamily",
-      // Primitive font stacks
-      "pp-neue-montreal": fontFamily(["PP Neue Montreal", "sans-serif"]),
-      gloock: fontFamily(["Gloock", "serif"]),
-      cormorant: fontFamily(["Cormorant", "serif"]),
-      inter: fontFamily(["Inter", "sans-serif"]),
-      "inter-tight": fontFamily(["Inter Tight", "sans-serif"]),
-      "instrument-serif": fontFamily(["Instrument Serif", "serif"]),
-      // Semantic aliases
-      sans: fontFamily(["PP Neue Montreal", "sans-serif"]),
-      serif: fontFamily(["Gloock", "serif"]),
-      "serif-alt": fontFamily(["Cormorant", "serif"])
-    },
-    "font-weight": {
-      $extensions: {
-        "nds.figmaSync": {
-          collectionKey: "b8954b6c8ba9f47552aea2920a0ee36c5f000e64",
-          collectionName: "Primitives",
-          modeMapping: { modeName: "Value" }
-        }
-      },
-      $type: "fontWeight",
-      regular: fontWeight(400),
-      medium: fontWeight(500),
-      semibold: fontWeight(600)
-    }
-  }
-};
-
-// ../tokens/dist/types.js
-function toJSONTokenTree(module) {
-  return module;
-}
-
-// ../tokens/dist/tokens.js
-mergeTokenTrees(
-  // Primitives
-  toJSONTokenTree(primitiveColors),
-  toJSONTokenTree(primitiveTypography),
-  toJSONTokenTree(primitiveSpacing),
-  toJSONTokenTree(primitiveRadii),
-  toJSONTokenTree(primitiveBreakpoints),
-  toJSONTokenTree(primitiveAnimation),
-  toJSONTokenTree(primitiveOpacity),
-  toJSONTokenTree(primitiveShadow),
-  // Typography base (property-based tokens)
-  toJSONTokenTree(baseTypographyTokens),
-  // Base semantic tokens (default theme)
-  toJSONTokenTree(baseColorTokens),
-  toJSONTokenTree(baseSurfaceTokens),
-  toJSONTokenTree(baseSpatialTokens)
-);
-var ThemeContext = createContext(null);
-function colorToCSS(color) {
-  const [r, g, b] = color.components;
-  if (color.alpha < 1) {
-    return `color(srgb ${r} ${g} ${b} / ${color.alpha})`;
-  }
-  return `color(srgb ${r} ${g} ${b})`;
-}
-function tokenValueToCSS(value) {
-  if (isColorValue(value)) {
-    return colorToCSS(value);
-  }
-  if (isDimensionValue(value)) {
-    return `${value.value}${value.unit}`;
-  }
-  if (typeof value === "string") {
-    return value;
-  }
-  if (typeof value === "number") {
-    return String(value);
-  }
-  return String(value);
-}
-function processColorTokens(colorObj, path = []) {
-  const result = {};
-  for (const [key, value] of Object.entries(colorObj)) {
-    if (key.startsWith("$")) continue;
-    const currentPath = [...path, key];
-    if (typeof value === "object" && value !== null) {
-      const record = value;
-      if ("$value" in record) {
-        const varName = `color-${currentPath.join("-")}`;
-        const tokenValue = record.$value;
-        if (typeof tokenValue === "string" && tokenValue.startsWith("{")) {
-          let refPath = tokenValue.slice(1, -1).replace(/\./g, "-");
-          refPath = refPath.replace(/^primitive-/, "");
-          refPath = refPath.replace(/^semantic-color-/, "color-");
-          result[varName] = `var(--${refPath})`;
-        } else {
-          result[varName] = tokenValueToCSS(tokenValue);
-        }
-      } else {
-        Object.assign(result, processColorTokens(record, currentPath));
-      }
-    }
-  }
-  return result;
-}
-function processSurfaceTokens(surfaceObj, path = []) {
-  const result = {};
-  for (const [key, value] of Object.entries(surfaceObj)) {
-    if (key.startsWith("$")) continue;
-    const currentPath = [...path, key];
-    if (typeof value === "object" && value !== null) {
-      const record = value;
-      if ("$value" in record) {
-        const tokenValue = record.$value;
-        let varName;
-        let cssValue;
-        if (currentPath[currentPath.length - 1] === "radius") {
-          const componentName = currentPath[0];
-          varName = `radius-surface-${componentName}`;
-        } else if (currentPath[currentPath.length - 1] === "stroke") {
-          const componentName = currentPath[0];
-          varName = `surface-${componentName}-stroke`;
-        } else {
-          varName = `surface-${currentPath.join("-")}`;
-        }
-        if (typeof tokenValue === "string" && tokenValue.startsWith("{")) {
-          let refPath = tokenValue.slice(1, -1).replace(/\./g, "-");
-          refPath = refPath.replace(/^primitive-/, "");
-          refPath = refPath.replace(/^radii-/, "radius-");
-          cssValue = `var(--${refPath})`;
-        } else {
-          cssValue = tokenValueToCSS(tokenValue);
-        }
-        result[varName] = cssValue;
-      } else {
-        Object.assign(result, processSurfaceTokens(record, currentPath));
-      }
-    }
-  }
-  return result;
-}
-function mergeTokenModules(base, override) {
-  const result = JSON.parse(JSON.stringify(base));
-  deepMerge2(result, override);
-  return result;
-}
-function deepMerge2(target, source) {
-  for (const [key, value] of Object.entries(source)) {
-    if (typeof value === "object" && value !== null && !Array.isArray(value) && typeof target[key] === "object" && target[key] !== null) {
-      deepMerge2(
-        target[key],
-        value
-      );
-    } else {
-      target[key] = value;
-    }
-  }
-}
-function ThemeProvider({
-  color = "base",
-  surface = "base",
-  customTheme,
-  children,
-  className,
-  applyStyles = true
-}) {
-  const { tokens: tokens2, cssVars } = useMemo(() => {
-    const flatTokens = {};
-    const baseColorModule = colorThemes.base;
-    const effectiveColor = customTheme ? customTheme.extends : color;
-    const colorModule = colorThemes[effectiveColor] ?? colorThemes.base;
-    const mergedColor = effectiveColor === "base" ? baseColorModule : mergeTokenModules(baseColorModule, colorModule);
-    const colorTokens = mergedColor?.semantic?.color ?? mergedColor;
-    Object.assign(flatTokens, processColorTokens(colorTokens));
-    const baseSurfaceModule = surfaceThemes.base;
-    const surfaceModule = surfaceThemes[surface];
-    const mergedSurface = surface === "base" ? baseSurfaceModule : mergeTokenModules(baseSurfaceModule, surfaceModule);
-    const surfaceTokens = mergedSurface?.semantic?.surface ?? mergedSurface;
-    Object.assign(flatTokens, processSurfaceTokens(surfaceTokens));
-    const nestedTokens = flatToNested(flatTokens);
-    let cssVariables = flatToCSSVars(flatTokens);
-    if (customTheme) {
-      cssVariables = {
-        ...cssVariables,
-        ...Object.fromEntries(
-          Object.entries(customTheme.cssVars).map(([key, value]) => [
-            key.startsWith("--") ? key : `--${key}`,
-            value
-          ])
-        )
-      };
-    }
-    return { tokens: nestedTokens, cssVars: cssVariables };
-  }, [color, surface, customTheme]);
-  const contextValue = {
-    cssVars,
-    tokens: tokens2,
-    colorTheme: customTheme ? customTheme.extends : color,
-    surfaceTheme: surface
-  };
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children: applyStyles ? /* @__PURE__ */ jsx("div", { style: cssVars, className, children }) : children });
-}
-
-// src/theme/hooks.ts
-function useTheme() {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
-}
-function useThemeTokens() {
-  const { tokens: tokens2 } = useTheme();
-  return tokens2;
-}
-function useCSSVars() {
-  const { cssVars } = useTheme();
-  return cssVars;
-}
-
-// src/theme/utils.ts
-function toCSSVars(tokens2) {
-  return nestedToCSSVars(tokens2);
+function toCSSVars(tokens) {
+  return nestedToCSSVars(tokens);
 }
 function applyTheme(element, cssVars) {
   for (const [name, value] of Object.entries(cssVars)) {
@@ -9322,9 +5399,9 @@ function removeTheme(element, cssVars) {
     element.style.removeProperty(name);
   }
 }
-function getToken(tokens2, path) {
+function getToken(tokens, path) {
   const parts = path.split(".");
-  let current = tokens2;
+  let current = tokens;
   for (const part of parts) {
     if (typeof current === "string") return void 0;
     current = current[part];