@tenerife.music/ui 1.0.2 → 1.0.4

package/dist/tokens/index.mjs

@@ -1,852 +1,3671 @@
 "use client";
-import { m as x, i as h } from "../motion-CuHacXY1.js";
-import { a as U, n as E, b as L, h as N, e as A, g as B, l as D, p as $, r as G, s as q, d as J, f as K, c as P, o as Q, j as X, t as Y, k as Z } from "../motion-CuHacXY1.js";
-import { r as d } from "../radius-CAu4qr9R.js";
-import { b as ee, c as te, t as le } from "../radius-CAu4qr9R.js";
-const i = {
-  none: "none",
-  xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-  sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
-  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
-}, g = {
-  xs: "0 1px 2px 0 hsl(var(--primary-500) / 0.15)",
-  sm: "0 2px 4px 0 hsl(var(--primary-500) / 0.2)",
-  md: "0 4px 8px 0 hsl(var(--primary-500) / 0.3)",
-  lg: "0 8px 16px 0 hsl(var(--primary-500) / 0.4)",
-  xl: "0 12px 24px 0 hsl(var(--primary-500) / 0.5)",
-  "2xl": "0 16px 32px 0 hsl(var(--primary-500) / 0.6)"
-}, c = {
-  xs: "0 1px 2px 0 hsl(var(--accent-500) / 0.15)",
-  sm: "0 2px 4px 0 hsl(var(--accent-500) / 0.2)",
-  md: "0 4px 8px 0 hsl(var(--accent-500) / 0.3)",
-  lg: "0 8px 16px 0 hsl(var(--accent-500) / 0.4)",
-  xl: "0 12px 24px 0 hsl(var(--accent-500) / 0.5)",
-  "2xl": "0 16px 32px 0 hsl(var(--accent-500) / 0.6)"
-}, m = {
-  // Primary glow effects
-  "glow-primary": "0 0 20px 0 hsl(var(--primary-500) / 0.5), 0 0 40px 0 hsl(var(--primary-500) / 0.3)",
-  "glow-primary-subtle": "0 0 8px 0 hsl(var(--primary-500) / 0.3)",
-  "glow-primary-medium": "0 0 16px 0 hsl(var(--primary-500) / 0.5)",
-  "glow-primary-strong": "0 0 24px 0 hsl(var(--primary-500) / 0.6)",
-  // Accent glow effects
-  "glow-accent": "0 0 20px 0 hsl(var(--accent-500) / 0.5), 0 0 40px 0 hsl(var(--accent-500) / 0.3)",
-  "glow-accent-subtle": "0 0 8px 0 hsl(var(--accent-500) / 0.3)",
-  "glow-accent-medium": "0 0 16px 0 hsl(var(--accent-500) / 0.5)",
-  "glow-accent-strong": "0 0 24px 0 hsl(var(--accent-500) / 0.6)"
-}, p = {
-  default: "0 0 0 3px hsl(var(--ring) / 0.5)",
-  primary: "0 0 0 3px hsl(var(--primary-500) / 0.3)",
-  accent: "0 0 0 3px hsl(var(--accent-500) / 0.3)",
-  "focus-primary": "0 0 0 3px hsl(var(--primary-500) / 0.3)",
-  "focus-accent": "0 0 0 3px hsl(var(--accent-500) / 0.3)"
+import { m as r, i as t, a as g } from "../motion-CzQhSEqk.js";
+import { b as U, o as B, c as F, g as G, h as q, j as X, k as Y, n as $, p as J, r as Q, s as Z, e as ee, q as de, d as re, t as te, f as oe, l as ae } from "../motion-CzQhSEqk.js";
+import { A as e, r as o, x as a, C as s, I as i } from "../typography-DHym9KAP.js";
+import { u as ie, l as ne, n as le, y as me, p as ue, w as ge, D as ce, E as he, K as pe, F as be, v as fe, B as xe, H as ve, G as we, m as ye, k as ke, e as Se, f as ze, h as Oe, i as Te, j as Ce, a as Ne, g as Ee, q as Ie, s as Re, o as Ve, z as Ke, t as _e, b as We, c as Le, d as Me, J as Ae } from "../typography-DHym9KAP.js";
+const v = {
+  /**
+   * Padding for alert content
+   */
+  padding: "p-md",
+  // 16px (1rem) - maps to semanticSpacing.md
+  /**
+   * Border radius for alerts
+   */
+  radius: "rounded-lg",
+  // 8px (0.5rem) - maps to borderRadius.lg
+  /**
+   * Icon size within alerts
+   */
+  iconSize: "size-4",
+  // 16px (1rem) - standard icon size
+  /**
+   * Variant-based token structure
+   * Organized by variant for future extensibility
+   */
+  variant: {
+    default: {
+      padding: "p-md",
+      radius: "rounded-lg"
+    },
+    primary: {
+      padding: "p-md",
+      radius: "rounded-lg"
+    },
+    secondary: {
+      padding: "p-md",
+      radius: "rounded-lg"
+    },
+    accent: {
+      padding: "p-md",
+      radius: "rounded-lg"
+    },
+    destructive: {
+      padding: "p-md",
+      radius: "rounded-lg"
+    },
+    // Legacy semantic variants (mapped to canonical)
+    success: {
+      padding: "p-md",
+      radius: "rounded-lg"
+    },
+    warning: {
+      padding: "p-md",
+      radius: "rounded-lg"
+    },
+    danger: {
+      padding: "p-md",
+      radius: "rounded-lg"
+    },
+    info: {
+      padding: "p-md",
+      radius: "rounded-lg"
+    }
+  }
+}, w = {
+  /**
+   * Button heights by size
+   * Maps to Tailwind height utilities: h-8, h-9, h-10
+   */
+  height: {
+    sm: "h-8",
+    // 32px (2rem)
+    md: "h-9",
+    // 36px (2.25rem)
+    lg: "h-10",
+    // 40px (2.5rem)
+    icon: "h-9"
+    // 36px (2.25rem) - same as md
+  },
+  /**
+   * Button padding by size
+   * Horizontal and vertical padding values
+   */
+  padding: {
+    horizontal: {
+      sm: "px-sm",
+      // 8px (0.5rem) - maps to semanticSpacing.sm
+      md: "px-md",
+      // 16px (1rem) - maps to semanticSpacing.md
+      lg: "px-lg"
+      // 24px (1.5rem) - maps to semanticSpacing.lg
+    },
+    vertical: {
+      sm: "py-xs",
+      // 4px (0.25rem) - maps to semanticSpacing.xs
+      md: "py-sm"
+      // 8px (0.5rem) - maps to semanticSpacing.sm
+    }
+  },
+  /**
+   * Gap between icon and text
+   */
+  gap: "gap-sm",
+  // 8px (0.5rem) - maps to semanticSpacing.sm
+  /**
+   * Border radius for all button sizes
+   */
+  radius: "rounded-md",
+  // 6px (0.375rem) - maps to borderRadius.md
+  /**
+   * Icon size within buttons
+   */
+  iconSize: "size-4",
+  // 16px (1rem) - maps to spacing[4]
+  /**
+   * Width tokens
+   */
+  width: {
+    icon: "w-9"
+    // 36px width for icon buttons
+  },
+  /**
+   * Font sizes by button size
+   * Maps to foundation typography fontSize tokens
+   */
+  fontSize: {
+    sm: "text-xs",
+    // Maps to fontSize.xs[0]
+    md: "text-sm",
+    // Maps to fontSize.sm[0]
+    lg: "text-sm"
+    // Maps to fontSize.sm[0]
+  },
+  /**
+   * Shadow tokens by variant
+   * Maps to foundation elevation shadow tokens
+   */
+  shadow: {
+    default: "shadow-sm",
+    // Maps to elevationShadows.sm
+    primary: "shadow"
+    // Maps to elevationShadows.xs (primary variant uses shadow)
+  },
+  /**
+   * Color tokens for button variants
+   * Uses semantic color tokens that map to CSS variables
+   */
+  variant: {
+    primary: {
+      background: "bg-primary",
+      // Primary background using CSS var
+      text: "text-primary-foreground",
+      // Primary text using CSS var
+      hover: "hover:bg-primary/90"
+      // Primary hover using CSS var
+    },
+    secondary: {
+      background: "bg-secondary",
+      // Secondary background using CSS var
+      text: "text-secondary-foreground",
+      // Secondary text using CSS var
+      hover: "hover:bg-secondary/80"
+      // Secondary hover using CSS var
+    },
+    accent: {
+      background: "bg-accent",
+      // Accent background using CSS var
+      text: "text-accent-foreground",
+      // Accent text using CSS var
+      hover: "hover:bg-accent/90"
+      // Accent hover using CSS var
+    },
+    outline: {
+      border: "border border-input",
+      // Input border using CSS var
+      background: "bg-background",
+      // Background using CSS var
+      hover: {
+        background: "hover:bg-accent",
+        // Accent hover using CSS var
+        text: "hover:text-accent-foreground"
+        // Accent text using CSS var
+      }
+    },
+    ghost: {
+      hover: {
+        background: "hover:bg-accent",
+        // Accent hover using CSS var
+        text: "hover:text-accent-foreground"
+        // Accent text using CSS var
+      }
+    },
+    destructive: {
+      background: "bg-destructive",
+      // Destructive background using CSS var
+      text: "text-destructive-foreground",
+      // Destructive text using CSS var
+      hover: "hover:bg-destructive/90"
+      // Destructive hover using CSS var
+    }
+  },
+  /**
+   * Transition tokens
+   */
+  transition: {
+    colors: "transition-colors"
+    // Color transition using motion tokens
+  }
 }, y = {
-  // Elevation shadows
-  "--shadow-none": i.none,
-  "--shadow-xs": i.xs,
-  "--shadow-sm": i.sm,
-  "--shadow-md": i.md,
-  "--shadow-lg": i.lg,
-  "--shadow-xl": i.xl,
-  "--shadow-2xl": i["2xl"],
-  // Primary colored shadows
-  "--shadow-primary-xs": g.xs,
-  "--shadow-primary-sm": g.sm,
-  "--shadow-primary-md": g.md,
-  "--shadow-primary-lg": g.lg,
-  "--shadow-primary-xl": g.xl,
-  "--shadow-primary-2xl": g["2xl"],
-  // Accent colored shadows
-  "--shadow-accent-xs": c.xs,
-  "--shadow-accent-sm": c.sm,
-  "--shadow-accent-md": c.md,
-  "--shadow-accent-lg": c.lg,
-  "--shadow-accent-xl": c.xl,
-  "--shadow-accent-2xl": c["2xl"],
-  // Glow effects
-  "--glow-primary": m["glow-primary"],
-  "--glow-primary-subtle": m["glow-primary-subtle"],
-  "--glow-primary-medium": m["glow-primary-medium"],
-  "--glow-primary-strong": m["glow-primary-strong"],
-  "--glow-accent": m["glow-accent"],
-  "--glow-accent-subtle": m["glow-accent-subtle"],
-  "--glow-accent-medium": m["glow-accent-medium"],
-  "--glow-accent-strong": m["glow-accent-strong"],
-  // Focus rings
-  "--focus-ring-default": p.default,
-  "--focus-ring-primary": p.primary,
-  "--focus-ring-accent": p.accent,
-  "--focus-primary": p["focus-primary"],
-  "--focus-accent": p["focus-accent"]
-}, z = {
-  card: {
-    default: i.sm,
-    hover: i.md,
-    active: i.xs,
-    selected: g.sm
-  },
-  button: {
-    default: i.xs,
-    hover: i.sm,
-    active: i.none,
-    focus: p.primary
-  },
-  "button-accent": {
-    default: c.xs,
-    hover: c.sm,
-    active: i.none,
-    focus: p.accent
+  /**
+   * Padding for card sections (CardHeader, CardContent, CardFooter)
+   */
+  padding: {
+    sm: "p-sm",
+    // 8px (0.5rem) - maps to semanticSpacing.sm
+    md: "p-lg",
+    // 24px (1.5rem) - current default - maps to semanticSpacing.lg
+    lg: "p-xl"
+    // 32px (2rem) - for future lg variant - maps to semanticSpacing.xl
   },
-  modal: {
-    default: i.xl,
-    backdrop: "rgba(0, 0, 0, 0.5)"
+  /**
+   * Border radius for cards
+   */
+  radius: {
+    sm: "rounded-md",
+    // 6px (0.375rem) - maps to borderRadius.md
+    md: "rounded-xl",
+    // 12px (0.75rem) - current default - maps to borderRadius.xl
+    lg: "rounded-2xl"
+    // 16px (1rem) - for future lg variant - maps to borderRadius["2xl"]
   },
-  dropdown: {
-    default: i.md,
-    hover: i.lg
+  /**
+   * Vertical spacing within card sections
+   * Used for CardHeader spacing
+   */
+  spacing: {
+    vertical: {
+      xs: "space-y-xs",
+      // 4px (0.25rem) - maps to semanticSpacing.xs
+      sm: "space-y-sm",
+      // 8px (0.5rem) - maps to semanticSpacing.sm
+      md: "space-y-md"
+      // 16px (1rem) - maps to semanticSpacing.md
+    }
   },
-  tooltip: {
-    default: i.sm
+  /**
+   * Shadow (elevation) for cards
+   * Maps to foundation elevation shadow tokens
+   */
+  shadow: {
+    default: "shadow",
+    // Maps to elevationShadows.xs (default elevation)
+    sm: "shadow-sm",
+    // Maps to elevationShadows.sm
+    md: "shadow-md",
+    // Maps to elevationShadows.md
+    lg: "shadow-lg"
+    // Maps to elevationShadows.lg
   },
-  toast: {
-    default: i.lg,
-    success: "0 10px 15px -3px hsl(var(--success) / 0.3)",
-    error: "0 10px 15px -3px hsl(var(--error) / 0.3)"
+  /**
+   * Size-based token structure
+   * Organized by size for easy access
+   */
+  size: {
+    sm: {
+      padding: "p-sm",
+      radius: "rounded-md",
+      shadow: "shadow-sm",
+      spacing: {
+        vertical: "space-y-xs"
+      }
+    },
+    md: {
+      padding: "p-lg",
+      radius: "rounded-xl",
+      shadow: "shadow",
+      spacing: {
+        vertical: "space-y-xs"
+      }
+    },
+    lg: {
+      padding: "p-xl",
+      radius: "rounded-2xl",
+      shadow: "shadow-md",
+      spacing: {
+        vertical: "space-y-sm"
+      }
+    }
   }
-}, F = {
-  boxShadow: {
-    // Elevation shadows
-    none: i.none,
-    xs: i.xs,
-    sm: i.sm,
-    md: i.md,
-    lg: i.lg,
-    xl: i.xl,
-    "2xl": i["2xl"],
-    // Primary colored shadows
-    "primary-xs": g.xs,
-    "primary-sm": g.sm,
-    "primary-md": g.md,
-    "primary-lg": g.lg,
-    "primary-xl": g.xl,
-    "primary-2xl": g["2xl"],
-    // Accent colored shadows
-    "accent-xs": c.xs,
-    "accent-sm": c.sm,
-    "accent-md": c.md,
-    "accent-lg": c.lg,
-    "accent-xl": c.xl,
-    "accent-2xl": c["2xl"],
-    // Glow effects
-    "glow-primary": m["glow-primary"],
-    "glow-primary-subtle": m["glow-primary-subtle"],
-    "glow-primary-medium": m["glow-primary-medium"],
-    "glow-primary-strong": m["glow-primary-strong"],
-    "glow-accent": m["glow-accent"],
-    "glow-accent-subtle": m["glow-accent-subtle"],
-    "glow-accent-medium": m["glow-accent-medium"],
-    "glow-accent-strong": m["glow-accent-strong"],
-    // Focus rings (using box-shadow for focus states)
-    "focus-ring": p.default,
-    "focus-primary": p["focus-primary"],
-    "focus-accent": p["focus-accent"]
-  },
-  // Ring width (for focus rings using ring utilities)
-  ringWidth: {
-    DEFAULT: "3px",
-    sm: "2px",
-    md: "3px",
-    lg: "4px"
-  },
-  // Ring color (for focus rings)
-  ringColor: {
-    DEFAULT: "hsl(var(--ring) / 0.5)",
-    primary: "hsl(var(--primary-500) / 0.3)",
-    accent: "hsl(var(--accent-500) / 0.3)",
-    "focus-primary": "hsl(var(--primary-500) / 0.3)",
-    "focus-accent": "hsl(var(--accent-500) / 0.3)"
+}, d = {
+  /**
+   * Table Component Tokens
+   */
+  table: {
+    /**
+     * Table row heights by size
+     * Maps to Tailwind height utilities
+     */
+    rowHeight: {
+      sm: "h-8",
+      // 32px (2rem) - compact rows
+      md: "h-10",
+      // 40px (2.5rem) - default rows
+      lg: "h-12"
+      // 48px (3rem) - spacious rows
+    },
+    /**
+     * Table cell and header padding by size
+     * Maps to semantic spacing tokens
+     */
+    padding: {
+      cell: {
+        sm: "p-xs",
+        // 4px (0.25rem) - maps to semanticSpacing.xs
+        md: "p-sm",
+        // 8px (0.5rem) - maps to semanticSpacing.sm
+        lg: "p-md"
+        // 16px (1rem) - maps to semanticSpacing.md
+      },
+      header: {
+        sm: "px-xs py-sm",
+        // 4px horizontal, 8px vertical
+        md: "px-sm py-md",
+        // 8px horizontal, 16px vertical
+        lg: "px-md py-lg"
+        // 16px horizontal, 24px vertical
+      }
+    },
+    /**
+     * Gap between table cells (horizontal spacing)
+     */
+    gap: {
+      sm: "gap-xs",
+      // 4px (0.25rem) - maps to semanticSpacing.xs
+      md: "gap-sm"
+      // 8px (0.5rem) - maps to semanticSpacing.sm
+    },
+    /**
+     * Border radius for table
+     */
+    radius: {
+      default: "rounded-md"
+      // 6px (0.375rem) - maps to borderRadius.md
+    },
+    /**
+     * Shadow tokens for table
+     * Maps to foundation elevation shadow tokens
+     */
+    shadow: {
+      none: "shadow-none",
+      // No shadow
+      subtle: "shadow-sm"
+      // Maps to elevationShadows.sm
+    },
+    /**
+     * Typography tokens for table headers and cells
+     * Maps to foundation typography fontSize tokens
+     */
+    typography: {
+      header: {
+        fontSize: "text-sm",
+        // Maps to fontSize.sm[0]
+        fontWeight: "font-semibold"
+        // Maps to fontWeight.semibold
+      },
+      cell: {
+        fontSize: "text-sm",
+        // Maps to fontSize.sm[0]
+        fontWeight: "font-normal"
+        // Maps to fontWeight.normal
+      }
+    },
+    /**
+     * Color tokens for table states
+     * Uses semantic color tokens
+     */
+    colors: {
+      border: "border-border",
+      // Border color
+      rowHover: "hover:bg-muted/50",
+      // Row hover background
+      rowSelected: "bg-muted"
+      // Selected row background
+    }
+  },
+  /**
+   * Skeleton Component Tokens
+   */
+  skeleton: {
+    /**
+     * Skeleton heights by variant
+     * Maps to Tailwind height utilities
+     */
+    height: {
+      text: "h-4",
+      // 16px (1rem) - text line height
+      circle: "h-10 w-10",
+      // 40px × 40px (2.5rem) - circular skeleton
+      block: "h-20",
+      // 80px (5rem) - block skeleton
+      card: "h-32",
+      // 128px (8rem) - card skeleton
+      inline: "h-4"
+      // 16px (1rem) - inline text
+    },
+    /**
+     * Border radius by variant
+     * Maps to foundation borderRadius tokens
+     */
+    radius: {
+      text: "rounded-sm",
+      // 4px (0.25rem) - maps to borderRadius.sm
+      circle: "rounded-full",
+      // Full circle - maps to borderRadius.full
+      block: "rounded-md",
+      // 6px (0.375rem) - maps to borderRadius.md
+      card: "rounded-xl",
+      // 12px (0.75rem) - maps to borderRadius.xl
+      inline: "rounded-sm"
+      // 4px (0.25rem) - maps to borderRadius.sm
+    },
+    /**
+     * Animation tokens
+     * Uses motion tokens for animations
+     */
+    animation: {
+      pulse: "animate-pulse",
+      // Pulse animation from motion tokens
+      fade: "animate-pulse"
+      // Fade animation (using pulse as fallback)
+    },
+    /**
+     * Background color tokens
+     * Uses semantic color tokens
+     */
+    background: {
+      default: "bg-muted",
+      // Default skeleton background
+      subtle: "bg-muted/50"
+      // Subtle skeleton background
+    },
+    /**
+     * Width tokens for skeleton variants
+     */
+    width: {
+      full: "w-full",
+      // Full width (100%)
+      inline: "inline-block"
+      // Inline block display
+    }
+  },
+  /**
+   * EmptyState Component Tokens
+   */
+  emptyState: {
+    /**
+     * Spacing tokens for EmptyState
+     * Maps to semantic spacing tokens
+     */
+    spacing: {
+      gap: "gap-md",
+      // 16px (1rem) - gap between elements - maps to semanticSpacing.md
+      padding: "p-lg"
+      // 24px (1.5rem) - container padding - maps to semanticSpacing.lg
+    },
+    /**
+     * Border radius for EmptyState container
+     */
+    radius: {
+      default: "rounded-xl"
+      // 12px (0.75rem) - maps to borderRadius.xl
+    },
+    /**
+     * Icon sizes by variant
+     * Maps to Tailwind size utilities
+     */
+    iconSize: {
+      sm: "size-8",
+      // 32px (2rem)
+      md: "size-12",
+      // 48px (3rem)
+      lg: "size-16"
+      // 64px (4rem)
+    },
+    /**
+     * Typography tokens for EmptyState
+     * Maps to foundation typography tokens
+     */
+    typography: {
+      title: {
+        fontSize: "text-lg",
+        // Maps to fontSize.lg[0]
+        fontWeight: "font-semibold"
+        // Maps to fontWeight.semibold
+      },
+      description: {
+        fontSize: "text-sm",
+        // Maps to fontSize.sm[0]
+        fontWeight: "font-normal"
+        // Maps to fontWeight.normal
+      }
+    }
+  },
+  /**
+   * DataList Component Tokens
+   */
+  dataList: {
+    /**
+     * Spacing tokens for DataList
+     * Maps to semantic spacing tokens
+     */
+    spacing: {
+      gap: "gap-md",
+      // 16px (1rem) - gap between items - maps to semanticSpacing.md
+      padding: "p-md"
+      // 16px (1rem) - container padding - maps to semanticSpacing.md
+    },
+    /**
+     * Label width tokens (for desktop horizontal layout)
+     * Maps to Tailwind width utilities
+     */
+    labelWidth: {
+      sm: "w-24",
+      // 96px (6rem) - small label width
+      md: "w-32",
+      // 128px (8rem) - default label width
+      lg: "w-40"
+      // 160px (10rem) - large label width
+    },
+    /**
+     * Row padding tokens
+     * Maps to semantic spacing tokens
+     */
+    rowPadding: {
+      sm: "py-xs",
+      // 4px (0.25rem) - maps to semanticSpacing.xs
+      md: "py-sm",
+      // 8px (0.5rem) - maps to semanticSpacing.sm
+      lg: "py-md"
+      // 16px (1rem) - maps to semanticSpacing.md
+    }
   }
-}, t = {
-  // Zero spacing
-  0: "0",
-  px: "1px",
-  // Half unit (4px)
-  0.5: "0.125rem",
-  // 4px
-  // Base unit multiples (8px increments)
-  1: "0.25rem",
-  // 4px (half unit, common)
-  1.5: "0.375rem",
-  // 6px (rare, for fine adjustments)
-  2: "0.5rem",
-  // 8px (base unit)
-  2.5: "0.625rem",
-  // 10px (rare)
-  3: "0.75rem",
-  // 12px (1.5 × base)
-  3.5: "0.875rem",
-  // 14px (rare)
-  4: "1rem",
-  // 16px (2 × base)
-  5: "1.25rem",
-  // 20px (2.5 × base)
-  6: "1.5rem",
-  // 24px (3 × base)
-  7: "1.75rem",
-  // 28px (3.5 × base)
-  8: "2rem",
-  // 32px (4 × base)
-  9: "2.25rem",
-  // 36px (4.5 × base)
-  10: "2.5rem",
-  // 40px (5 × base)
-  11: "2.75rem",
-  // 44px (5.5 × base)
-  12: "3rem",
-  // 48px (6 × base)
-  14: "3.5rem",
-  // 56px (7 × base)
-  16: "4rem",
-  // 64px (8 × base)
-  20: "5rem",
-  // 80px (10 × base)
-  24: "6rem",
-  // 96px (12 × base)
-  // Extended scale for larger spacing
-  28: "7rem",
-  // 112px (14 × base)
-  32: "8rem",
-  // 128px (16 × base)
-  36: "9rem",
-  // 144px (18 × base)
-  40: "10rem",
-  // 160px (20 × base)
-  44: "11rem",
-  // 176px (22 × base)
-  48: "12rem",
-  // 192px (24 × base)
-  52: "13rem",
-  // 208px (26 × base)
-  56: "14rem",
-  // 224px (28 × base)
-  60: "15rem",
-  // 240px (30 × base)
-  64: "16rem",
-  // 256px (32 × base)
-  72: "18rem",
-  // 288px (36 × base)
-  80: "20rem",
-  // 320px (40 × base)
-  96: "24rem"
-  // 384px (48 × base)
-}, r = {
-  // Extra small spacing (tight, minimal)
-  xs: t[1],
-  // 4px (0.25rem)
-  // Small spacing (compact)
-  sm: t[2],
-  // 8px (0.5rem)
-  // Medium spacing (default)
-  md: t[4],
-  // 16px (1rem)
-  // Large spacing (spacious)
-  lg: t[6],
-  // 24px (1.5rem)
-  // Extra large spacing (very spacious)
-  xl: t[8],
-  // 32px (2rem)
-  // 2XL spacing (section-level)
-  "2xl": t[12],
-  // 48px (3rem)
-  // 3XL spacing (major sections)
-  "3xl": t[16],
-  // 64px (4rem)
-  // 4XL spacing (page sections)
-  "4xl": t[20],
-  // 80px (5rem)
-  // 5XL spacing (hero sections)
-  "5xl": t[24],
-  // 96px (6rem)
-  // None (no spacing)
-  none: t[0]
-  // 0
-}, l = {
-  // Section spacing (vertical spacing between major sections)
-  section: {
-    xs: t[6],
-    // 24px (compact sections)
-    sm: t[8],
-    // 32px (small sections)
-    md: t[12],
-    // 48px (default sections)
-    lg: t[16],
-    // 64px (large sections)
-    xl: t[20],
-    // 80px (extra large sections)
-    "2xl": t[24]
-    // 96px (hero sections)
-  },
-  // Container spacing (padding inside containers)
-  container: {
-    xs: t[2],
-    // 8px (tight containers)
-    sm: t[4],
-    // 16px (compact containers)
-    md: t[6],
-    // 24px (default containers)
-    lg: t[8],
-    // 32px (spacious containers)
-    xl: t[12]
-    // 48px (very spacious containers)
-  },
-  // Grid spacing (gap between grid items)
-  grid: {
-    xs: t[2],
-    // 8px (tight grids)
-    sm: t[4],
-    // 16px (compact grids)
-    md: t[6],
-    // 24px (default grids)
-    lg: t[8],
-    // 32px (spacious grids)
-    xl: t[12]
-    // 48px (very spacious grids)
-  },
-  // Stack spacing (gap between stacked items)
-  stack: {
-    xs: t[1],
-    // 4px (tight stacks)
-    sm: t[2],
-    // 8px (compact stacks)
-    md: t[4],
-    // 16px (default stacks)
-    lg: t[6],
-    // 24px (spacious stacks)
-    xl: t[8]
-    // 32px (very spacious stacks)
-  },
-  // Component internal spacing (padding inside components)
-  component: {
-    xs: t[1],
-    // 4px (tight components)
-    sm: t[2],
-    // 8px (compact components)
-    md: t[4],
-    // 16px (default components)
-    lg: t[6],
-    // 24px (spacious components)
-    xl: t[8]
-    // 32px (extra spacious components)
+}, c = {
+  /**
+   * Icon sizes
+   * Maps to Tailwind size utilities for consistent icon sizing
+   */
+  sizes: {
+    xs: "h-2.5 w-2.5",
+    // 10px (0.625rem) - extra small icons
+    sm: "h-3 w-3",
+    // 12px (0.75rem) - maps to spacing[3]
+    md: "h-4 w-4",
+    // 16px (1rem) - maps to spacing[4] (default)
+    lg: "h-5 w-5",
+    // 20px (1.25rem) - maps to spacing[5]
+    xl: "h-6 w-6",
+    // 24px (1.5rem) - maps to spacing[6]
+    "2xl": "h-8 w-8",
+    // 32px (2rem) - maps to spacing[8]
+    "3xl": "h-10 w-10",
+    // 40px (2.5rem) - maps to spacing[10]
+    "4xl": "h-12 w-12"
+    // 48px (3rem) - maps to spacing[12]
+  },
+  /**
+   * Stroke width variants
+   * Maps to Tailwind stroke-width utilities
+   */
+  stroke: {
+    thin: "stroke-[1px]",
+    // 1px stroke width
+    normal: "stroke-[1.5px]",
+    // 1.5px stroke width
+    bold: "stroke-2"
+    // 2px stroke width
+  },
+  /**
+   * Color variants
+   * Maps to semantic text color tokens
+   */
+  colors: {
+    default: "text-foreground",
+    // Default foreground color
+    muted: "text-muted-foreground",
+    // Muted foreground color
+    success: "text-success",
+    // Semantic success color
+    warning: "text-warning",
+    // Semantic warning color
+    danger: "text-destructive",
+    // Semantic destructive/danger color
+    info: "text-info"
+    // Semantic info color
   }
-}, f = {
-  // Base spacing scale
-  "--spacing-0": t[0],
-  "--spacing-px": t.px,
-  "--spacing-0-5": t[0.5],
-  "--spacing-1": t[1],
-  "--spacing-1-5": t[1.5],
-  "--spacing-2": t[2],
-  "--spacing-2-5": t[2.5],
-  "--spacing-3": t[3],
-  "--spacing-3-5": t[3.5],
-  "--spacing-4": t[4],
-  "--spacing-5": t[5],
-  "--spacing-6": t[6],
-  "--spacing-7": t[7],
-  "--spacing-8": t[8],
-  "--spacing-9": t[9],
-  "--spacing-10": t[10],
-  "--spacing-11": t[11],
-  "--spacing-12": t[12],
-  "--spacing-14": t[14],
-  "--spacing-16": t[16],
-  "--spacing-20": t[20],
-  "--spacing-24": t[24],
-  // Semantic spacing
-  "--spacing-xs": r.xs,
-  "--spacing-sm": r.sm,
-  "--spacing-md": r.md,
-  "--spacing-lg": r.lg,
-  "--spacing-xl": r.xl,
-  "--spacing-2xl": r["2xl"],
-  "--spacing-3xl": r["3xl"],
-  "--spacing-4xl": r["4xl"],
-  "--spacing-5xl": r["5xl"],
-  "--spacing-none": r.none,
-  // Layout spacing - sections
-  "--layout-section-xs": l.section.xs,
-  "--layout-section-sm": l.section.sm,
-  "--layout-section-md": l.section.md,
-  "--layout-section-lg": l.section.lg,
-  "--layout-section-xl": l.section.xl,
-  "--layout-section-2xl": l.section["2xl"],
-  // Layout spacing - containers
-  "--layout-container-xs": l.container.xs,
-  "--layout-container-sm": l.container.sm,
-  "--layout-container-md": l.container.md,
-  "--layout-container-lg": l.container.lg,
-  "--layout-container-xl": l.container.xl,
-  // Layout spacing - grids
-  "--layout-grid-xs": l.grid.xs,
-  "--layout-grid-sm": l.grid.sm,
-  "--layout-grid-md": l.grid.md,
-  "--layout-grid-lg": l.grid.lg,
-  "--layout-grid-xl": l.grid.xl,
-  // Layout spacing - stacks
-  "--layout-stack-xs": l.stack.xs,
-  "--layout-stack-sm": l.stack.sm,
-  "--layout-stack-md": l.stack.md,
-  "--layout-stack-lg": l.stack.lg,
-  "--layout-stack-xl": l.stack.xl,
-  // Layout spacing - components
-  "--layout-component-xs": l.component.xs,
-  "--layout-component-sm": l.component.sm,
-  "--layout-component-md": l.component.md,
-  "--layout-component-lg": l.component.lg,
-  "--layout-component-xl": l.component.xl
-}, W = {
+}, h = {
+  /**
+   * Transition property tokens
+   * Maps to Tailwind transition utilities
+   */
+  transition: {
+    all: "transition-all",
+    // All properties
+    colors: "transition-colors",
+    // Color properties only
+    opacity: "transition-opacity",
+    // Opacity only
+    transform: "transition-transform",
+    // Transform only
+    shadow: "transition-shadow",
+    // Box shadow only
+    none: "transition-none"
+    // No transition
+  },
+  /**
+   * Duration tokens
+   * Maps to foundation motion duration tokens via Tailwind
+   */
+  duration: {
+    instant: "duration-0",
+    // 0ms
+    fast: "duration-fast",
+    // 150ms - maps to motion.durations.fast
+    normal: "duration-normal",
+    // 300ms - maps to motion.durations.normal
+    slow: "duration-slow",
+    // 500ms - maps to motion.durations.slow
+    slower: "duration-slower",
+    // 700ms - maps to motion.durations.slower
+    slowest: "duration-slowest",
+    // 1000ms - maps to motion.durations.slowest
+    // Granular durations
+    75: "duration-75",
+    // 75ms
+    100: "duration-100",
+    // 100ms
+    200: "duration-200",
+    // 200ms
+    250: "duration-250",
+    // 250ms
+    300: "duration-300",
+    // 300ms
+    400: "duration-400",
+    // 400ms
+    500: "duration-500",
+    // 500ms
+    600: "duration-600",
+    // 600ms
+    700: "duration-700",
+    // 700ms
+    800: "duration-800",
+    // 800ms
+    1e3: "duration-1000"
+    // 1000ms
+  },
+  /**
+   * Easing tokens
+   * Maps to foundation motion easing tokens via Tailwind
+   */
+  easing: {
+    linear: "ease-linear",
+    // Linear easing
+    in: "ease-in",
+    // Ease in
+    out: "ease-out",
+    // Ease out (recommended for most UI)
+    "in-out": "ease-in-out",
+    // Ease in-out
+    bounce: "ease-bounce",
+    // Bounce easing
+    elastic: "ease-elastic"
+    // Elastic easing
+  },
+  /**
+   * Pre-configured transition tokens
+   * Combines duration and easing for common use cases
+   */
+  transitionPreset: {
+    fast: "transition-all duration-fast ease-out",
+    // Fast transition
+    normal: "transition-all duration-normal ease-in-out",
+    // Normal transition (default)
+    slow: "transition-all duration-slow ease-in-out",
+    // Slow transition
+    colors: "transition-colors duration-normal ease-out",
+    // Color transitions (common)
+    transform: "transition-transform duration-normal ease-out",
+    // Transform transitions
+    opacity: "transition-opacity duration-fast ease-out"
+    // Opacity transitions
+  },
+  /**
+   * Animation tokens
+   * Maps to foundation motion animation tokens via Tailwind
+   */
+  animation: {
+    none: "animate-none",
+    // No animation
+    spin: "animate-spin",
+    // Spin animation
+    pulse: "animate-pulse",
+    // Pulse animation
+    bounce: "animate-bounce",
+    // Bounce animation
+    ping: "animate-ping",
+    // Ping animation
+    shake: "animate-shake",
+    // Shake animation
+    fadeIn: "animate-fadeIn",
+    // Fade in
+    fadeOut: "animate-fadeOut",
+    // Fade out
+    slideInUp: "animate-slideInUp",
+    // Slide in from bottom
+    slideInDown: "animate-slideInDown",
+    // Slide in from top
+    slideInLeft: "animate-slideInLeft",
+    // Slide in from right
+    slideInRight: "animate-slideInRight",
+    // Slide in from left
+    scaleIn: "animate-scaleIn",
+    // Scale in
+    scaleOut: "animate-scaleOut"
+    // Scale out
+  }
+}, k = {
+  /**
+   * Surface tokens for card containers
+   * Defines background, border, radius, and shadow for card surfaces
+   */
+  surface: {
+    /**
+     * Background colors
+     * Maps to semantic color tokens
+     */
+    bg: {
+      default: "bg-card",
+      // Default card background - maps to semantic color tokens
+      hover: "hover:bg-card/95"
+      // Hover state background with 95% opacity
+    },
+    /**
+     * Border styles
+     * Maps to semantic border tokens
+     */
+    border: {
+      default: "border border-border",
+      // Default border - maps to semantic border tokens
+      hover: "hover:border-primary/20"
+      // Hover state border with primary color at 20% opacity
+    },
+    /**
+     * Border radius
+     * References borderRadius.xl (0.75rem / 12px)
+     * Using Tailwind class "rounded-xl" which maps to borderRadius.xl
+     */
+    radius: {
+      default: "rounded-xl"
+      // References borderRadius.xl (0.75rem / 12px) via Tailwind
+    },
+    /**
+     * Shadow (elevation) tokens
+     * References elevationShadows.md
+     * Using Tailwind class "shadow-md" which maps to elevationShadows.md
+     */
+    shadow: {
+      default: "shadow-md"
+      // References elevationShadows.md via Tailwind
+    },
+    /**
+     * Elevation change on hover
+     * References elevationShadows.xl
+     * Using Tailwind class "hover:shadow-xl" which maps to elevationShadows.xl
+     */
+    elevation: {
+      hover: "hover:shadow-xl"
+      // References elevationShadows.xl via Tailwind
+    }
+  },
+  /**
+   * Spacing tokens for card component spacing
+   * References semanticSpacing tokens
+   * Note: Tailwind classes are used for component className application
+   */
   spacing: {
-    ...t,
-    // Add semantic tokens as aliases
-    xs: r.xs,
-    sm: r.sm,
-    md: r.md,
-    lg: r.lg,
-    xl: r.xl,
-    "2xl": r["2xl"],
-    "3xl": r["3xl"],
-    "4xl": r["4xl"],
-    "5xl": r["5xl"],
-    none: r.none
+    /**
+     * Section spacing - vertical spacing between card sections
+     */
+    section: {
+      titleToSubtitle: "mb-xs",
+      // Spacing between title and subtitle/description - references semanticSpacing.xs (4px) via Tailwind
+      subtitleToMetadata: "mb-sm"
+      // Spacing between description and metadata - references semanticSpacing.sm (8px) via Tailwind
+    },
+    /**
+     * Badge spacing offsets
+     */
+    badges: {
+      offsetX: e.md,
+      // Horizontal offset for badges (16px)
+      offsetY: e.md
+      // Vertical offset for badges (16px)
+    },
+    /**
+     * Image spacing
+     */
+    image: {
+      bottomMargin: e.none
+      // Margin below image (0px)
+    },
+    /**
+     * Card vertical gap
+     */
+    card: {
+      verticalGap: e.md
+      // Vertical gap in card content (16px)
+    },
+    /**
+     * Metadata item gap
+     */
+    metadata: {
+      itemGap: e.xs
+      // Gap between metadata items (4px)
+    },
+    /**
+     * Footer spacing
+     */
+    footer: {
+      paddingTopDefault: "pt-sm",
+      // Footer padding top default - references semanticSpacing.sm (8px) via Tailwind
+      paddingTopCompact: "pt-xs"
+      // Footer padding top compact - references semanticSpacing.xs (4px) via Tailwind
+    },
+    /**
+     * Button spacing
+     */
+    button: {
+      paddingDefault: "px-md py-xs",
+      // Button padding default - references semanticSpacing.md (16px) horizontal, xs (4px) vertical via Tailwind
+      paddingCompact: "px-sm py-xs",
+      // Button padding compact - references semanticSpacing.sm (8px) horizontal, xs (4px) vertical via Tailwind
+      iconMarginLeft: "ml-xs"
+      // Icon margin left - references semanticSpacing.xs (4px) via Tailwind
+    }
+  },
+  /**
+   * Layout tokens for card spacing and gaps
+   * References semanticSpacing tokens
+   * Note: Tailwind utilities are used for component className application
+   */
+  layout: {
+    /**
+     * Padding tokens
+     * References semanticSpacing (md = 16px, sm = 8px)
+     * Note: "p-md" and "p-sm" are Tailwind utilities that apply semanticSpacing values
+     */
+    padding: {
+      default: "p-md",
+      // Default padding - references semanticSpacing.md (16px)
+      compact: "p-sm"
+      // Compact variant padding - references semanticSpacing.sm (8px)
+    },
+    /**
+     * Gap tokens for spacing between card elements
+     * References semanticSpacing (md = 16px, xs = 4px)
+     * Note: "gap-md" and "gap-xs" are Tailwind utilities that apply semanticSpacing values
+     */
+    gap: {
+      default: "gap-md",
+      // Default gap - references semanticSpacing.md (16px)
+      compact: "gap-xs"
+      // Compact variant gap - references semanticSpacing.xs (4px)
+    }
+  },
+  /**
+   * Image tokens for card media
+   * Defines aspect ratio, radius, and overlay styles
+   */
+  image: {
+    /**
+     * Aspect ratio for card images
+     * Standard 16:9 aspect ratio for card images
+     */
+    aspectRatio: "aspect-video",
+    // 16:9 aspect ratio - standard for card images
+    /**
+     * Border radius for images
+     * References borderRadius.xl (0.75rem / 12px) for top corners only
+     * Using Tailwind class "rounded-t-xl" which maps to borderRadius.xl
+     */
+    radius: "rounded-t-xl",
+    // References borderRadius.xl (0.75rem / 12px) via Tailwind
+    /**
+     * Overlay gradient tokens for image overlays
+     * Used for hover states and text readability
+     */
+    overlay: {
+      gradient: "bg-gradient-to-t from-black/60 via-transparent to-transparent"
+      // Gradient overlay for image hover states
+    }
+  },
+  /**
+   * Metadata tokens for card information displays
+   * Used for date/time, location, and other metadata patterns
+   * Maps to TEXT_TOKENS, ICON_TOKENS, and semanticSpacing
+   */
+  metadata: {
+    /**
+     * Text color tokens
+     * Maps to semantic text color tokens
+     */
+    text: {
+      primary: "text-foreground",
+      // Primary metadata text - maps to semantic text color
+      secondary: "text-muted-foreground"
+      // Secondary metadata text - maps to semantic muted text color
+    },
+    /**
+     * Icon tokens
+     * Maps to ICON_TOKENS for sizes and colors
+     */
+    icon: {
+      default: "text-muted-foreground",
+      // Default icon color - maps to ICON_TOKENS.colors.muted
+      sizeSm: c.sizes.md
+      // Small icon size - references ICON_TOKENS.sizes.md (16px)
+    },
+    /**
+     * Spacing tokens for metadata layouts
+     * References semanticSpacing (xs = 4px, sm = 8px)
+     * Using Tailwind classes which map to semanticSpacing values
+     */
+    spacing: {
+      vertical: "gap-xs",
+      // References semanticSpacing.xs (4px) via Tailwind
+      horizontal: "gap-sm"
+      // References semanticSpacing.sm (8px) via Tailwind
+    }
+  },
+  /**
+   * Badge tokens for featured/popular badges
+   * References semanticSpacing, borderRadius, and elevationShadows
+   */
+  badges: {
+    /**
+     * Badge size tokens (padding)
+     * References semanticSpacing for padding values
+     * Using Tailwind classes which map to semanticSpacing values
+     */
+    size: {
+      sm: "px-xs py-xs",
+      // References semanticSpacing.xs (4px) for both horizontal and vertical via Tailwind
+      md: "px-sm py-xs"
+      // References semanticSpacing.sm (8px) horizontal, semanticSpacing.xs (4px) vertical via Tailwind
+    },
+    /**
+     * Badge positioning tokens
+     * References semanticSpacing for absolute positioning
+     * Using Tailwind classes which map to semanticSpacing values
+     */
+    position: {
+      default: "right-md top-md",
+      // References semanticSpacing.md (16px) for both right and top via Tailwind
+      compact: "right-sm top-sm"
+      // References semanticSpacing.sm (8px) for both right and top via Tailwind
+    },
+    /**
+     * Additional vertical positioning tokens for multi-badge scenarios
+     * References semanticSpacing for top positioning
+     * Using Tailwind classes which map to semanticSpacing values
+     */
+    positionY: {
+      xl: "top-xl",
+      // References semanticSpacing.xl (32px) via Tailwind
+      "2xl": "top-2xl",
+      // References semanticSpacing["2xl"] (48px) via Tailwind
+      "3xl": "top-3xl"
+      // References semanticSpacing["3xl"] (64px) via Tailwind
+    },
+    /**
+     * Badge surface (background) tokens
+     * Maps to semantic color tokens
+     */
+    surface: {
+      default: "bg-primary",
+      // Default badge background - maps to semantic primary color
+      featured: "bg-gradient-to-r from-accent-500 to-primary-600"
+      // Featured badge gradient
+    },
+    /**
+     * Badge text color
+     * White for contrast on colored backgrounds
+     */
+    text: {
+      color: "text-white"
+      // Badge text color - white for contrast on colored backgrounds
+    },
+    /**
+     * Badge border radius
+     * References borderRadius.full (pill shape)
+     * Using Tailwind class "rounded-full" which maps to borderRadius.full
+     */
+    radius: "rounded-full",
+    // References borderRadius.full via Tailwind
+    /**
+     * Badge shadow
+     * References elevationShadows.lg
+     * Using Tailwind class "shadow-lg" which maps to elevationShadows.lg
+     */
+    shadow: "shadow-lg"
+    // References elevationShadows.lg via Tailwind
+  },
+  /**
+   * Price/Capacity tokens for displaying price and capacity information
+   * Maps to semantic text color tokens and semanticSpacing
+   */
+  priceCapacity: {
+    /**
+     * Text color tokens
+     * Maps to semantic text color tokens
+     */
+    text: {
+      primary: "text-foreground",
+      // Primary price/capacity text - maps to semantic text color
+      secondary: "text-muted-foreground"
+      // Secondary price/capacity text - maps to semantic muted text color
+    },
+    /**
+     * Spacing between price and capacity elements
+     * References semanticSpacing.sm (8px)
+     * Using Tailwind class "gap-sm" which maps to semanticSpacing.sm
+     */
+    spacing: "gap-sm"
+    // References semanticSpacing.sm (8px) via Tailwind
+  },
+  /**
+   * Motion tokens for hover and interaction states
+   * References MOTION_TOKENS for transitions and animations
+   */
+  motion: {
+    /**
+     * Hover state tokens
+     * References MOTION_TOKENS and elevationShadows
+     */
+    hover: {
+      transition: h.transitionPreset.normal,
+      // References MOTION_TOKENS.transitionPreset.normal
+      scale: "hover:scale-110",
+      // Hover scale transform (110% scale) - domain-specific value
+      elevation: "hover:shadow-xl"
+      // References elevationShadows.xl via Tailwind
+    }
+  },
+  /**
+   * Skeleton tokens for loading states
+   * References DATA_TOKENS.skeleton for skeleton patterns and semanticSpacing for dimensions
+   */
+  skeleton: {
+    /**
+     * Base skeleton wrapper tokens
+     * Default styling for skeleton wrapper components
+     */
+    base: {
+      /**
+       * Default border radius for skeleton wrapper
+       * References DATA_TOKENS.skeleton.radius.text
+       */
+      radius: d.skeleton.radius.text,
+      /**
+       * Default animation for skeleton wrapper
+       * References DATA_TOKENS.skeleton.animation.pulse
+       */
+      animation: d.skeleton.animation.pulse,
+      /**
+       * Default background for skeleton wrapper
+       * References DATA_TOKENS.skeleton.background.default
+       */
+      background: d.skeleton.background.default
+    },
+    /**
+     * Image skeleton height
+     * Domain-specific: card images need 192px (spacing[48] = 12rem)
+     * Note: DATA_TOKENS.skeleton.height.card is 128px, but card images need 192px
+     * Using Tailwind class "h-48" which maps to spacing[48] (12rem / 192px)
+     */
+    image: {
+      height: "h-48"
+      // References spacing[48] (12rem / 192px) via Tailwind
+    },
+    /**
+     * Content gap for skeleton elements
+     * References semanticSpacing.md (16px)
+     * Using Tailwind class "gap-md" which maps to semanticSpacing.md
+     */
+    content: {
+      gap: "gap-md",
+      // References semanticSpacing.md (16px) via Tailwind
+      /**
+       * Content width tokens for skeleton elements
+       * References DATA_TOKENS where available, uses Tailwind fraction classes for domain-specific values
+       */
+      width: {
+        full: d.skeleton.width.full,
+        // References DATA_TOKENS.skeleton.width.full
+        threeQuarters: "w-3/4",
+        // Three quarters width (75%) - domain-specific, using Tailwind fraction
+        half: "w-1/2"
+        // Half width (50%) - domain-specific, using Tailwind fraction
+      }
+    },
+    /**
+     * Badge skeleton dimensions
+     * Domain-specific values for badge skeleton sizing
+     * References spacing values via Tailwind classes
+     */
+    badge: {
+      width: "w-20",
+      // References spacing[20] (5rem / 80px) via Tailwind
+      height: "h-6"
+      // References spacing[6] (1.5rem / 24px) via Tailwind
+    }
   }
-}, n = {
-  // Primary font - Inter (default sans)
-  sans: [
-    "Inter",
-    "ui-sans-serif",
-    "system-ui",
-    "-apple-system",
-    "BlinkMacSystemFont",
-    "Segoe UI",
-    "Roboto",
-    "Helvetica Neue",
-    "Arial",
-    "Noto Sans",
-    "sans-serif",
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji"
-  ],
-  // Optional font - Satoshi
-  satoshi: [
-    "Satoshi",
-    "Inter",
-    "ui-sans-serif",
-    "system-ui",
-    "-apple-system",
-    "BlinkMacSystemFont",
-    "Segoe UI",
-    "Roboto",
-    "sans-serif"
-  ],
-  // Display font - Clash Display (for headings and hero sections)
-  display: [
-    "Clash Display",
-    "Inter",
-    "ui-sans-serif",
-    "system-ui",
-    "-apple-system",
-    "BlinkMacSystemFont",
-    "Segoe UI",
-    "Roboto",
-    "sans-serif"
-  ],
-  // Serif font family
-  serif: ["ui-serif", "Georgia", "Cambria", "Times New Roman", "Times", "serif"],
-  // Monospace font family
-  mono: [
-    "ui-monospace",
-    "SFMono-Regular",
-    "Menlo",
-    "Monaco",
-    "Consolas",
-    "Liberation Mono",
-    "Courier New",
-    "monospace"
-  ]
-}, e = {
-  // text-xs: 12px base, scales from 0.75rem to 0.875rem
-  xs: [
-    "clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem)",
-    { lineHeight: "1rem", letterSpacing: "0.05em" }
-  ],
-  // text-sm: 14px base, scales from 0.875rem to 1rem
-  sm: [
-    "clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
-    { lineHeight: "1.25rem", letterSpacing: "0.025em" }
-  ],
-  // text-base: 16px base, scales from 1rem to 1.125rem
-  base: ["clamp(1rem, 0.95rem + 0.25vw, 1.125rem)", { lineHeight: "1.5rem", letterSpacing: "0em" }],
-  // text-lg: 18px base, scales from 1.125rem to 1.25rem
-  lg: [
-    "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
-    { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
-  ],
-  // text-xl: 20px base, scales from 1.25rem to 1.5rem
-  xl: [
-    "clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
-    { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
-  ],
-  // text-2xl: 24px base, scales from 1.5rem to 2rem
-  "2xl": [
-    "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
-    { lineHeight: "2rem", letterSpacing: "-0.05em" }
-  ],
-  // text-3xl: 30px base, scales from 1.875rem to 2.5rem
-  "3xl": [
-    "clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem)",
-    { lineHeight: "2.25rem", letterSpacing: "-0.05em" }
-  ],
-  // text-4xl: 36px base, scales from 2.25rem to 3rem
-  "4xl": [
-    "clamp(2.25rem, 1.75rem + 2.5vw, 3rem)",
-    { lineHeight: "2.5rem", letterSpacing: "-0.025em" }
-  ],
-  // text-5xl: 48px base, scales from 3rem to 4rem
-  "5xl": ["clamp(3rem, 2rem + 5vw, 4rem)", { lineHeight: "1", letterSpacing: "-0.025em" }],
-  // text-6xl: 60px base, scales from 3.75rem to 5rem
-  "6xl": ["clamp(3.75rem, 2.5rem + 6.25vw, 5rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
-  // text-7xl: 72px base (optional, for hero sections)
-  "7xl": ["clamp(4.5rem, 3rem + 7.5vw, 6rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
-  // text-8xl: 96px base (optional, for hero sections)
-  "8xl": ["clamp(6rem, 4rem + 10vw, 8rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
-  // text-9xl: 128px base (optional, for hero sections)
-  "9xl": ["clamp(8rem, 5rem + 15vw, 12rem)", { lineHeight: "1", letterSpacing: "-0.05em" }]
-}, a = {
-  thin: "100",
-  extralight: "200",
-  light: "300",
-  normal: "400",
-  medium: "500",
-  semibold: "600",
-  bold: "700",
-  extrabold: "800",
-  black: "900"
-}, s = {
-  none: "1",
-  tight: "1.25",
-  snug: "1.375",
-  normal: "1.5",
-  relaxed: "1.625",
-  loose: "2"
-}, o = {
-  tighter: "-0.05em",
-  tight: "-0.025em",
-  normal: "0em",
-  wide: "0.025em",
-  wider: "0.05em",
-  widest: "0.1em"
-}, u = {
-  // Font families
-  "--font-sans": n.sans.join(", "),
-  "--font-satoshi": n.satoshi.join(", "),
-  "--font-display": n.display.join(", "),
-  "--font-serif": n.serif.join(", "),
-  "--font-mono": n.mono.join(", "),
-  // Font sizes (using clamp values)
-  "--font-size-xs": e.xs[0],
-  "--font-size-sm": e.sm[0],
-  "--font-size-base": e.base[0],
-  "--font-size-lg": e.lg[0],
-  "--font-size-xl": e.xl[0],
-  "--font-size-2xl": e["2xl"][0],
-  "--font-size-3xl": e["3xl"][0],
-  "--font-size-4xl": e["4xl"][0],
-  "--font-size-5xl": e["5xl"][0],
-  "--font-size-6xl": e["6xl"][0],
-  // Font weights
-  "--font-weight-thin": a.thin,
-  "--font-weight-extralight": a.extralight,
-  "--font-weight-light": a.light,
-  "--font-weight-normal": a.normal,
-  "--font-weight-medium": a.medium,
-  "--font-weight-semibold": a.semibold,
-  "--font-weight-bold": a.bold,
-  "--font-weight-extrabold": a.extrabold,
-  "--font-weight-black": a.black,
-  // Line heights
-  "--line-height-none": s.none,
-  "--line-height-tight": s.tight,
-  "--line-height-snug": s.snug,
-  "--line-height-normal": s.normal,
-  "--line-height-relaxed": s.relaxed,
-  "--line-height-loose": s.loose,
-  // Letter spacing
-  "--letter-spacing-tighter": o.tighter,
-  "--letter-spacing-tight": o.tight,
-  "--letter-spacing-normal": o.normal,
-  "--letter-spacing-wide": o.wide,
-  "--letter-spacing-wider": o.wider,
-  "--letter-spacing-widest": o.widest
-}, M = {
-  // Display styles (for hero sections)
-  display: {
-    fontFamily: n.display.join(", "),
-    fontSize: e["6xl"][0],
-    fontWeight: a.bold,
-    lineHeight: s.none,
-    letterSpacing: o.tight
-  },
-  // Heading styles
-  h1: {
-    fontFamily: n.display.join(", "),
-    fontSize: e["5xl"][0],
-    fontWeight: a.bold,
-    lineHeight: s.tight,
-    letterSpacing: o.tight
-  },
-  h2: {
-    fontFamily: n.display.join(", "),
-    fontSize: e["4xl"][0],
-    fontWeight: a.bold,
-    lineHeight: s.tight,
-    letterSpacing: o.tight
-  },
-  h3: {
-    fontFamily: n.sans.join(", "),
-    fontSize: e["3xl"][0],
-    fontWeight: a.semibold,
-    lineHeight: s.snug,
-    letterSpacing: o.normal
-  },
-  h4: {
-    fontFamily: n.sans.join(", "),
-    fontSize: e["2xl"][0],
-    fontWeight: a.semibold,
-    lineHeight: s.snug,
-    letterSpacing: o.normal
-  },
-  h5: {
-    fontFamily: n.sans.join(", "),
-    fontSize: e.xl[0],
-    fontWeight: a.medium,
-    lineHeight: s.normal,
-    letterSpacing: o.normal
-  },
-  h6: {
-    fontFamily: n.sans.join(", "),
-    fontSize: e.lg[0],
-    fontWeight: a.medium,
-    lineHeight: s.normal,
-    letterSpacing: o.normal
-  },
-  // Body text styles
-  body: {
-    fontFamily: n.sans.join(", "),
-    fontSize: e.base[0],
-    fontWeight: a.normal,
-    lineHeight: s.relaxed,
-    letterSpacing: o.normal
-  },
-  "body-sm": {
-    fontFamily: n.sans.join(", "),
-    fontSize: e.sm[0],
-    fontWeight: a.normal,
-    lineHeight: s.normal,
-    letterSpacing: o.normal
-  },
-  "body-xs": {
-    fontFamily: n.sans.join(", "),
-    fontSize: e.xs[0],
-    fontWeight: a.normal,
-    lineHeight: s.normal,
-    letterSpacing: o.wide
-  },
-  // Label styles
+}, S = {
+  /**
+   * Input heights by size
+   * Supports xs, sm, md, lg, xl sizes
+   */
+  height: {
+    xs: "h-7",
+    // 28px (1.75rem)
+    sm: "h-8",
+    // 32px (2rem)
+    md: "h-9",
+    // 36px (2.25rem) - default
+    lg: "h-10",
+    // 40px (2.5rem)
+    xl: "h-11"
+    // 44px (2.75rem)
+  },
+  /**
+   * Input padding by size
+   * Horizontal and vertical padding values
+   */
+  padding: {
+    horizontal: {
+      xs: "px-xs",
+      // 4px (0.25rem)
+      sm: "px-sm",
+      // 8px (0.5rem)
+      md: "px-sm",
+      // 8px (0.5rem) - default
+      lg: "px-md",
+      // 16px (1rem)
+      xl: "px-lg"
+      // 24px (1.5rem)
+    },
+    vertical: {
+      xs: "py-xs",
+      // 4px (0.25rem)
+      sm: "py-xs",
+      // 4px (0.25rem)
+      md: "py-xs",
+      // 4px (0.25rem) - default
+      lg: "py-sm",
+      // 8px (0.5rem)
+      xl: "py-md"
+      // 16px (1rem)
+    }
+  },
+  /**
+   * Border radius by size
+   */
+  radius: {
+    xs: "rounded-sm",
+    // 4px (0.25rem)
+    sm: "rounded-md",
+    // 6px (0.375rem)
+    md: "rounded-md",
+    // 6px (0.375rem) - default
+    lg: "rounded-md",
+    // 6px (0.375rem)
+    xl: "rounded-lg"
+    // 8px (0.5rem)
+  },
+  /**
+   * Font sizes by size variant
+   * Maps to foundation typography fontSize tokens
+   */
+  fontSize: {
+    xs: "text-xs",
+    // Maps to fontSize.xs[0]
+    sm: "text-sm",
+    // Maps to fontSize.sm[0]
+    md: "text-base",
+    // Maps to fontSize.base[0] - default
+    lg: "text-base",
+    // Maps to fontSize.base[0]
+    xl: "text-lg"
+    // Maps to fontSize.lg[0]
+  },
+  /**
+   * Responsive font size (md breakpoint)
+   */
+  fontSizeResponsive: {
+    md: "md:text-sm"
+    // Maps to fontSize.sm[0] at md breakpoint
+  },
+  /**
+   * Shadow token
+   * Maps to foundation elevation shadow tokens
+   */
+  shadow: "shadow-sm",
+  // Maps to elevationShadows.sm
+  /**
+   * File input tokens
+   * Styling for file input elements
+   */
+  file: {
+    text: "text-[hsl(var(--foreground))]"
+    // File input text color using CSS var
+  },
+  /**
+   * Select listbox tokens
+   * Styling for select dropdown container
+   */
+  selectListbox: {
+    border: "border border-[hsl(var(--border))]",
+    // Border color using CSS var
+    background: "bg-[hsl(var(--popover))]",
+    // Background using CSS var
+    text: "text-[hsl(var(--popover-foreground))]",
+    // Text color using CSS var
+    radius: "rounded-md",
+    // Radius token (6px)
+    shadow: "shadow-md"
+    // Shadow token
+  },
+  /**
+   * Select option tokens
+   * Styling for select option items
+   */
+  selectOption: {
+    focus: {
+      background: "focus:bg-[hsl(var(--accent))]",
+      // Focus background using CSS var
+      text: "focus:text-[hsl(var(--accent-foreground))]"
+      // Focus text using CSS var
+    },
+    selected: {
+      background: "bg-[hsl(var(--accent))]",
+      // Selected background using CSS var
+      text: "text-[hsl(var(--accent-foreground))]"
+      // Selected text using CSS var
+    }
+  },
+  /**
+   * Variant-based tokens
+   * Border, background, and text colors for different variants
+   * All use CSS variable references for theme support
+   */
+  variant: {
+    primary: {
+      border: "border-[hsl(var(--tm-primary))]",
+      // Primary border color
+      background: "bg-[hsl(var(--tm-primary))]",
+      // Primary background
+      text: "text-[hsl(var(--tm-primary-foreground))]",
+      // Primary text color
+      focus: "focus-visible:shadow-[var(--focus-ring-primary)]"
+      // Primary focus ring
+    },
+    secondary: {
+      border: "border-[hsl(var(--tm-secondary))]",
+      // Secondary border color
+      background: "bg-[hsl(var(--tm-secondary))]",
+      // Secondary background
+      text: "text-[hsl(var(--tm-secondary-foreground))]",
+      // Secondary text color
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    outline: {
+      border: "border-[hsl(var(--input))]",
+      // Input border color
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-[hsl(var(--foreground))]",
+      // Foreground text color
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    ghost: {
+      border: "border-transparent",
+      // Transparent border
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-[hsl(var(--foreground))]",
+      // Foreground text color
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    destructive: {
+      border: "border-[hsl(var(--destructive))]",
+      // Destructive border color
+      background: "bg-[hsl(var(--destructive))]",
+      // Destructive background
+      text: "text-[hsl(var(--destructive-foreground))]",
+      // Destructive text color
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    }
+  },
+  /**
+   * State-based tokens
+   * Border, background, and text colors for different states
+   * All use CSS variable references for theme support
+   */
+  state: {
+    border: {
+      default: "border-[hsl(var(--input))]",
+      // Default border color using CSS var
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]",
+      // Focus ring using CSS var
+      error: "border-[hsl(var(--destructive))]",
+      // Error state border using CSS var
+      success: "border-[hsl(var(--semantic-success))]",
+      // Success state border using CSS var
+      disabled: "border-[hsl(var(--input))]"
+      // Disabled state border (same as default)
+    },
+    background: {
+      default: "bg-transparent",
+      // Default background
+      disabled: "bg-transparent"
+      // Disabled background (same as default)
+    },
+    text: {
+      default: "text-[hsl(var(--foreground))]",
+      // Default text color using CSS var
+      placeholder: "placeholder:text-[hsl(var(--muted-foreground))]",
+      // Placeholder text color using CSS var
+      disabled: "disabled:opacity-50"
+      // Disabled text opacity
+    }
+  },
+  /**
+   * Icon tokens
+   * Size, spacing, and color for icons within inputs
+   */
+  icon: {
+    size: "size-4",
+    // 16px (1rem) - maps to spacing[4]
+    gap: "gap-sm",
+    // 8px (0.5rem) - maps to semanticSpacing.sm
+    paddingLeft: "pl-lg",
+    // 24px (1.5rem) - padding when icon on left
+    paddingRight: "pr-lg",
+    // 24px (1.5rem) - padding when icon on right
+    color: "text-[hsl(var(--muted-foreground))]",
+    // Icon color using CSS variable
+    position: {
+      left: "left-0",
+      // Position left
+      right: "right-0",
+      // Position right
+      top: "top-0"
+      // Position top
+    }
+  },
+  /**
+   * Label tokens
+   * Spacing and styling for labels
+   */
   label: {
-    fontFamily: n.sans.join(", "),
-    fontSize: e.sm[0],
-    fontWeight: a.medium,
-    lineHeight: s.normal,
-    letterSpacing: o.wide
-  },
-  "label-sm": {
-    fontFamily: n.sans.join(", "),
-    fontSize: e.xs[0],
-    fontWeight: a.medium,
-    lineHeight: s.normal,
-    letterSpacing: o.wider
-  },
-  // Caption styles
-  caption: {
-    fontFamily: n.sans.join(", "),
-    fontSize: e.xs[0],
-    fontWeight: a.normal,
-    lineHeight: s.normal,
-    letterSpacing: o.wide
+    spacing: "space-y-sm",
+    // 8px (0.5rem) - spacing between label and control
+    requiredMark: "text-destructive"
+    // Color for required asterisk
+  },
+  /**
+   * Width tokens
+   * Common width utilities
+   */
+  width: {
+    full: "w-full"
+    // Full width (100%)
+  },
+  /**
+   * Message tokens
+   * Spacing, positioning, and styling for helper text and error messages
+   */
+  message: {
+    spacing: "space-y-sm",
+    // 8px (0.5rem) - spacing between control and message
+    position: {
+      bottom: "bottom-sm",
+      // 8px (0.5rem) - bottom position for character counter
+      right: "right-sm"
+      // 8px (0.5rem) - right position for character counter
+    },
+    color: {
+      default: "text-[hsl(var(--muted-foreground))]",
+      // Default message color
+      error: "text-[hsl(var(--destructive))]",
+      // Error message color
+      success: "text-[hsl(var(--semantic-success))]"
+      // Success message color
+    }
+  },
+  /**
+   * Size-based token structure
+   * Organized by size for easy access
+   */
+  size: {
+    xs: {
+      height: "h-7",
+      padding: {
+        horizontal: "px-xs",
+        vertical: "py-xs"
+      },
+      radius: "rounded-sm",
+      fontSize: "text-xs",
+      shadow: "shadow-sm"
+    },
+    sm: {
+      height: "h-8",
+      padding: {
+        horizontal: "px-sm",
+        vertical: "py-xs"
+      },
+      radius: "rounded-md",
+      fontSize: "text-sm",
+      shadow: "shadow-sm"
+    },
+    md: {
+      height: "h-9",
+      padding: {
+        horizontal: "px-sm",
+        vertical: "py-xs"
+      },
+      radius: "rounded-md",
+      fontSize: "text-base",
+      fontSizeResponsive: "md:text-sm",
+      shadow: "shadow-sm"
+    },
+    lg: {
+      height: "h-10",
+      padding: {
+        horizontal: "px-md",
+        vertical: "py-sm"
+      },
+      radius: "rounded-md",
+      fontSize: "text-base",
+      shadow: "shadow-sm"
+    },
+    xl: {
+      height: "h-11",
+      padding: {
+        horizontal: "px-lg",
+        vertical: "py-md"
+      },
+      radius: "rounded-lg",
+      fontSize: "text-lg",
+      shadow: "shadow-sm"
+    }
   }
-}, V = {
-  fontFamily: {
-    sans: [...n.sans],
-    satoshi: [...n.satoshi],
-    display: [...n.display],
-    serif: [...n.serif],
-    mono: [...n.mono]
+}, z = {
+  /**
+   * Checkbox sizes by size variant
+   * Supports xs, sm, md, lg, xl sizes
+   * Checkboxes are typically square and smaller than input fields
+   */
+  size: {
+    xs: {
+      width: "w-3.5",
+      // 14px (0.875rem)
+      height: "h-3.5",
+      // 14px (0.875rem)
+      radius: "rounded-sm",
+      // 4px (0.25rem)
+      iconSize: "size-2.5"
+      // 10px (0.625rem)
+    },
+    sm: {
+      width: "w-4",
+      // 16px (1rem)
+      height: "h-4",
+      // 16px (1rem)
+      radius: "rounded-sm",
+      // 4px (0.25rem)
+      iconSize: "size-3"
+      // 12px (0.75rem)
+    },
+    md: {
+      width: "w-4.5",
+      // 18px (1.125rem) - default
+      height: "h-4.5",
+      // 18px (1.125rem) - default
+      radius: "rounded-md",
+      // 6px (0.375rem)
+      iconSize: "size-3.5"
+      // 14px (0.875rem)
+    },
+    lg: {
+      width: "w-5",
+      // 20px (1.25rem)
+      height: "h-5",
+      // 20px (1.25rem)
+      radius: "rounded-md",
+      // 6px (0.375rem)
+      iconSize: "size-4"
+      // 16px (1rem)
+    },
+    xl: {
+      width: "w-6",
+      // 24px (1.5rem)
+      height: "h-6",
+      // 24px (1.5rem)
+      radius: "rounded-md",
+      // 6px (0.375rem)
+      iconSize: "size-5"
+      // 20px (1.25rem)
+    }
+  },
+  /**
+   * Variant-based tokens
+   * Border, background, and text colors for different variants
+   * All use CSS variable references for theme support
+   */
+  variant: {
+    primary: {
+      border: "border-[hsl(var(--tm-primary))]",
+      // Primary border color
+      background: "bg-[hsl(var(--tm-primary))]",
+      // Primary background
+      text: "text-[hsl(var(--tm-primary-foreground))]",
+      // Primary text color (for checkmark)
+      focus: "focus-visible:shadow-[var(--focus-ring-primary)]"
+      // Primary focus ring
+    },
+    secondary: {
+      border: "border-[hsl(var(--tm-secondary))]",
+      // Secondary border color
+      background: "bg-[hsl(var(--tm-secondary))]",
+      // Secondary background
+      text: "text-[hsl(var(--tm-secondary-foreground))]",
+      // Secondary text color (for checkmark)
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    outline: {
+      border: "border-[hsl(var(--input))]",
+      // Input border color
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-[hsl(var(--foreground))]",
+      // Foreground text color (for checkmark)
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    ghost: {
+      border: "border-transparent",
+      // Transparent border
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-[hsl(var(--foreground))]",
+      // Foreground text color (for checkmark)
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    destructive: {
+      border: "border-[hsl(var(--destructive))]",
+      // Destructive border color
+      background: "bg-[hsl(var(--destructive))]",
+      // Destructive background
+      text: "text-[hsl(var(--destructive-foreground))]",
+      // Destructive text color (for checkmark)
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    }
+  },
+  /**
+   * State-based tokens
+   * Border, background, and text colors for different states
+   * All use CSS variable references for theme support
+   */
+  state: {
+    border: {
+      default: "border-[hsl(var(--input))]",
+      // Default border color using CSS var
+      checked: "border-[hsl(var(--tm-primary))]",
+      // Checked state border
+      indeterminate: "border-[hsl(var(--tm-primary))]",
+      // Indeterminate state border
+      error: "border-[hsl(var(--destructive))]",
+      // Error state border using CSS var
+      disabled: "border-[hsl(var(--input))]",
+      // Disabled state border (same as default)
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Focus ring using CSS var
+    },
+    background: {
+      default: "bg-transparent",
+      // Default background
+      checked: "bg-[hsl(var(--tm-primary))]",
+      // Checked state background
+      indeterminate: "bg-[hsl(var(--tm-primary))]",
+      // Indeterminate state background
+      disabled: "bg-transparent",
+      // Disabled background (same as default)
+      disabledChecked: "bg-[hsl(var(--muted))]"
+      // Disabled checked background
+    },
+    text: {
+      default: "text-[hsl(var(--foreground))]",
+      // Default text color using CSS var
+      checked: "text-[hsl(var(--tm-primary-foreground))]",
+      // Checked state text (for checkmark)
+      indeterminate: "text-[hsl(var(--tm-primary-foreground))]",
+      // Indeterminate state text
+      disabled: "disabled:opacity-50"
+      // Disabled text opacity
+    }
+  },
+  /**
+   * Icon tokens
+   * Size and styling for checkmark icon within checkbox
+   */
+  icon: {
+    size: {
+      xs: "size-2.5",
+      // 10px (0.625rem)
+      sm: "size-3",
+      // 12px (0.75rem)
+      md: "size-3.5",
+      // 14px (0.875rem) - default
+      lg: "size-4",
+      // 16px (1rem)
+      xl: "size-5"
+      // 20px (1.25rem)
+    },
+    stroke: "stroke-2",
+    // 2px stroke width for checkmark
+    color: {
+      default: "text-[hsl(var(--tm-primary-foreground))]",
+      // Default checkmark color
+      disabled: "text-[hsl(var(--muted-foreground))]"
+      // Disabled checkmark color
+    }
+  },
+  /**
+   * Indeterminate indicator tokens
+   * Styling for indeterminate state (horizontal line)
+   */
+  indeterminate: {
+    width: "w-2",
+    // Width of indeterminate indicator
+    height: "h-0.5",
+    // Height of indeterminate indicator (horizontal line)
+    color: "bg-[hsl(var(--tm-primary-foreground))]"
+    // Color of indeterminate indicator
+  },
+  /**
+   * Shadow token
+   * Maps to foundation elevation shadow tokens
+   */
+  shadow: "shadow-sm",
+  // Maps to elevationShadows.sm
+  /**
+   * Transition tokens
+   * Smooth transitions for state changes
+   */
+  transition: "transition-all duration-200 ease-in-out"
+  // Smooth transitions
+}, O = {
+  /**
+   * Track sizes by size variant
+   * Supports xs, sm, md, lg, xl sizes
+   * Track is wider than tall (typical switch proportions)
+   */
+  track: {
+    xs: {
+      width: "w-8",
+      // 32px (2rem)
+      height: "h-4",
+      // 16px (1rem)
+      radius: "rounded-full"
+      // Fully rounded
+    },
+    sm: {
+      width: "w-9",
+      // 36px (2.25rem)
+      height: "h-5",
+      // 20px (1.25rem)
+      radius: "rounded-full"
+      // Fully rounded
+    },
+    md: {
+      width: "w-11",
+      // 44px (2.75rem) - default
+      height: "h-6",
+      // 24px (1.5rem) - default
+      radius: "rounded-full"
+      // Fully rounded
+    },
+    lg: {
+      width: "w-14",
+      // 56px (3.5rem)
+      height: "h-7",
+      // 28px (1.75rem)
+      radius: "rounded-full"
+      // Fully rounded
+    },
+    xl: {
+      width: "w-16",
+      // 64px (4rem)
+      height: "h-8",
+      // 32px (2rem)
+      radius: "rounded-full"
+      // Fully rounded
+    }
+  },
+  /**
+   * Handle sizes by size variant
+   * Circular thumb that slides within the track
+   * Slightly smaller than track height to allow for padding
+   */
+  handle: {
+    xs: {
+      width: "w-3",
+      // 12px (0.75rem)
+      height: "h-3",
+      // 12px (0.75rem)
+      radius: "rounded-full",
+      // Fully rounded
+      translate: "translate-x-4"
+      // Distance to move when checked (32px - 12px - 4px padding = 16px)
+    },
+    sm: {
+      width: "w-4",
+      // 16px (1rem)
+      height: "h-4",
+      // 16px (1rem)
+      radius: "rounded-full",
+      // Fully rounded
+      translate: "translate-x-4"
+      // Distance to move when checked (36px - 16px - 4px padding = 16px)
+    },
+    md: {
+      width: "w-5",
+      // 20px (1.25rem) - default
+      height: "h-5",
+      // 20px (1.25rem) - default
+      radius: "rounded-full",
+      // Fully rounded
+      translate: "translate-x-5"
+      // Distance to move when checked (44px - 20px - 4px padding = 20px)
+    },
+    lg: {
+      width: "w-6",
+      // 24px (1.5rem)
+      height: "h-6",
+      // 24px (1.5rem)
+      radius: "rounded-full",
+      // Fully rounded
+      translate: "translate-x-7"
+      // Distance to move when checked (56px - 24px - 4px padding = 28px)
+    },
+    xl: {
+      width: "w-7",
+      // 28px (1.75rem)
+      height: "h-7",
+      // 28px (1.75rem)
+      radius: "rounded-full",
+      // Fully rounded
+      translate: "translate-x-8"
+      // Distance to move when checked (64px - 28px - 4px padding = 32px)
+    },
+    /**
+     * Handle positioning tokens
+     * For absolute positioning within the track
+     */
+    position: {
+      left: "left-xs",
+      // 4px (0.125rem) - small offset from track edge
+      top: "top-1/2",
+      // Center vertically (50%)
+      center: "-translate-y-1/2"
+      // Center vertically using transform
+    }
+  },
+  /**
+   * Variant-based tokens
+   * Track and handle colors for different variants
+   * All use CSS variable references for theme support
+   */
+  variant: {
+    primary: {
+      track: {
+        unchecked: "bg-[hsl(var(--input))]",
+        // Input border color when unchecked
+        checked: "bg-[hsl(var(--tm-primary))]"
+        // Primary color when checked
+      },
+      handle: {
+        unchecked: "bg-[hsl(var(--muted))]",
+        // Muted color when unchecked
+        checked: "bg-[hsl(var(--tm-primary-foreground))]"
+        // Primary foreground when checked
+      },
+      focus: "focus-visible:shadow-[var(--focus-ring-primary)]"
+      // Primary focus ring
+    },
+    secondary: {
+      track: {
+        unchecked: "bg-[hsl(var(--input))]",
+        // Input border color when unchecked
+        checked: "bg-[hsl(var(--tm-secondary))]"
+        // Secondary color when checked
+      },
+      handle: {
+        unchecked: "bg-[hsl(var(--muted))]",
+        // Muted color when unchecked
+        checked: "bg-[hsl(var(--tm-secondary-foreground))]"
+        // Secondary foreground when checked
+      },
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    outline: {
+      track: {
+        unchecked: "bg-[hsl(var(--input))]",
+        // Input border color when unchecked
+        checked: "bg-[hsl(var(--tm-primary))]"
+        // Primary color when checked
+      },
+      handle: {
+        unchecked: "bg-[hsl(var(--muted))]",
+        // Muted color when unchecked
+        checked: "bg-[hsl(var(--tm-primary-foreground))]"
+        // Primary foreground when checked
+      },
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    ghost: {
+      track: {
+        unchecked: "bg-[hsl(var(--muted))]",
+        // Muted background when unchecked
+        checked: "bg-[hsl(var(--tm-primary))]"
+        // Primary color when checked
+      },
+      handle: {
+        unchecked: "bg-[hsl(var(--muted-foreground))]",
+        // Muted foreground when unchecked
+        checked: "bg-[hsl(var(--tm-primary-foreground))]"
+        // Primary foreground when checked
+      },
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    destructive: {
+      track: {
+        unchecked: "bg-[hsl(var(--input))]",
+        // Input border color when unchecked
+        checked: "bg-[hsl(var(--destructive))]"
+        // Destructive color when checked
+      },
+      handle: {
+        unchecked: "bg-[hsl(var(--muted))]",
+        // Muted color when unchecked
+        checked: "bg-[hsl(var(--destructive-foreground))]"
+        // Destructive foreground when checked
+      },
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    }
+  },
+  /**
+   * State-based tokens
+   * Track and handle colors for different states
+   * All use CSS variable references for theme support
+   */
+  state: {
+    track: {
+      default: "bg-[hsl(var(--input))]",
+      // Default track color using CSS var
+      checked: "bg-[hsl(var(--tm-primary))]",
+      // Checked state track
+      disabled: "bg-[hsl(var(--muted))]",
+      // Disabled state track
+      disabledChecked: "bg-[hsl(var(--muted))]",
+      // Disabled checked track
+      error: "bg-[hsl(var(--destructive))]"
+      // Error state track using CSS var
+    },
+    handle: {
+      default: "bg-[hsl(var(--muted-foreground))]",
+      // Default handle color using CSS var
+      checked: "bg-[hsl(var(--tm-primary-foreground))]",
+      // Checked state handle
+      disabled: "bg-[hsl(var(--muted-foreground))]",
+      // Disabled state handle
+      disabledChecked: "bg-[hsl(var(--muted-foreground))]",
+      // Disabled checked handle
+      error: "bg-[hsl(var(--destructive-foreground))]"
+      // Error state handle
+    },
+    opacity: {
+      disabled: "opacity-50"
+      // Disabled opacity
+    }
+  },
+  /**
+   * Transition tokens
+   * Smooth transitions for handle animation and state changes
+   * Uses motion tokens for duration and easing
+   */
+  transition: {
+    handle: "transition-transform duration-300 ease-in-out",
+    // Handle slide animation
+    track: "transition-colors duration-300 ease-in-out",
+    // Track color transition
+    combined: "transition-all duration-300 ease-in-out"
+    // Combined transitions
+  },
+  /**
+   * Shadow token
+   * Maps to foundation elevation shadow tokens
+   */
+  shadow: "shadow-sm",
+  // Maps to elevationShadows.sm
+  /**
+   * Padding token
+   * Space between track edge and handle
+   */
+  padding: "p-0.5"
+  // 2px padding around handle
+}, T = {
+  /**
+   * Radio sizes by size variant
+   * Supports xs, sm, md, lg, xl sizes
+   * Radios are typically circular and smaller than input fields
+   */
+  size: {
+    xs: {
+      width: "w-3.5",
+      // 14px (0.875rem)
+      height: "h-3.5",
+      // 14px (0.875rem)
+      radius: "rounded-full",
+      // Fully circular
+      dotSize: "size-1.5"
+      // 6px (0.375rem) - inner dot
+    },
+    sm: {
+      width: "w-4",
+      // 16px (1rem)
+      height: "h-4",
+      // 16px (1rem)
+      radius: "rounded-full",
+      // Fully circular
+      dotSize: "size-2"
+      // 8px (0.5rem) - inner dot
+    },
+    md: {
+      width: "w-4.5",
+      // 18px (1.125rem) - default
+      height: "h-4.5",
+      // 18px (1.125rem) - default
+      radius: "rounded-full",
+      // Fully circular
+      dotSize: "size-2.5"
+      // 10px (0.625rem) - inner dot
+    },
+    lg: {
+      width: "w-5",
+      // 20px (1.25rem)
+      height: "h-5",
+      // 20px (1.25rem)
+      radius: "rounded-full",
+      // Fully circular
+      dotSize: "size-3"
+      // 12px (0.75rem) - inner dot
+    },
+    xl: {
+      width: "w-6",
+      // 24px (1.5rem)
+      height: "h-6",
+      // 24px (1.5rem)
+      radius: "rounded-full",
+      // Fully circular
+      dotSize: "size-3.5"
+      // 14px (0.875rem) - inner dot
+    }
+  },
+  /**
+   * Variant-based tokens
+   * Border, background, and text colors for different variants
+   * All use CSS variable references for theme support
+   */
+  variant: {
+    primary: {
+      border: "border-[hsl(var(--tm-primary))]",
+      // Primary border color
+      background: "bg-[hsl(var(--tm-primary))]",
+      // Primary background
+      text: "text-[hsl(var(--tm-primary-foreground))]",
+      // Primary text color (for dot)
+      focus: "focus-visible:shadow-[var(--focus-ring-primary)]"
+      // Primary focus ring
+    },
+    secondary: {
+      border: "border-[hsl(var(--tm-secondary))]",
+      // Secondary border color
+      background: "bg-[hsl(var(--tm-secondary))]",
+      // Secondary background
+      text: "text-[hsl(var(--tm-secondary-foreground))]",
+      // Secondary text color (for dot)
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    outline: {
+      border: "border-[hsl(var(--input))]",
+      // Input border color
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-[hsl(var(--foreground))]",
+      // Foreground text color (for dot)
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    ghost: {
+      border: "border-transparent",
+      // Transparent border
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-[hsl(var(--foreground))]",
+      // Foreground text color (for dot)
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    destructive: {
+      border: "border-[hsl(var(--destructive))]",
+      // Destructive border color
+      background: "bg-[hsl(var(--destructive))]",
+      // Destructive background
+      text: "text-[hsl(var(--destructive-foreground))]",
+      // Destructive text color (for dot)
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    }
   },
+  /**
+   * State-based tokens
+   * Border, background, and text colors for different states
+   * All use CSS variable references for theme support
+   */
+  state: {
+    border: {
+      default: "border-[hsl(var(--input))]",
+      // Default border color using CSS var
+      checked: "border-[hsl(var(--tm-primary))]",
+      // Checked state border
+      error: "border-[hsl(var(--destructive))]",
+      // Error state border using CSS var
+      disabled: "border-[hsl(var(--input))]",
+      // Disabled state border (same as default)
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Focus ring using CSS var
+    },
+    background: {
+      default: "bg-transparent",
+      // Default background
+      checked: "bg-[hsl(var(--tm-primary))]",
+      // Checked state background
+      disabled: "bg-transparent",
+      // Disabled background (same as default)
+      disabledChecked: "bg-[hsl(var(--muted))]"
+      // Disabled checked background
+    },
+    text: {
+      default: "text-[hsl(var(--foreground))]",
+      // Default text color using CSS var
+      checked: "text-[hsl(var(--tm-primary-foreground))]",
+      // Checked state text (for dot)
+      disabled: "disabled:opacity-50"
+      // Disabled text opacity
+    }
+  },
+  /**
+   * Dot tokens (inner filled circle indicator)
+   * Size and styling for radio dot within radio button
+   */
+  dot: {
+    size: {
+      xs: "size-1.5",
+      // 6px (0.375rem)
+      sm: "size-2",
+      // 8px (0.5rem)
+      md: "size-2.5",
+      // 10px (0.625rem) - default
+      lg: "size-3",
+      // 12px (0.75rem)
+      xl: "size-3.5"
+      // 14px (0.875rem)
+    },
+    color: {
+      default: "bg-[hsl(var(--tm-primary-foreground))]",
+      // Default dot color
+      disabled: "bg-[hsl(var(--muted-foreground))]"
+      // Disabled dot color
+    },
+    radius: "rounded-full"
+    // Fully circular dot
+  },
+  /**
+   * Shadow token
+   * Maps to foundation elevation shadow tokens
+   */
+  shadow: "shadow-sm",
+  // Maps to elevationShadows.sm
+  /**
+   * Transition tokens
+   * Smooth transitions for state changes
+   */
+  transition: "transition-all duration-200 ease-in-out"
+  // Smooth transitions
+}, C = {
+  /**
+   * Padding values for surface variants
+   * Can be customized per variant if needed
+   */
+  padding: {
+    default: "p-md",
+    // 16px (1rem) - maps to semanticSpacing.md
+    sm: "p-sm",
+    // 8px (0.5rem) - maps to semanticSpacing.sm
+    md: "p-md",
+    // 16px (1rem) - maps to semanticSpacing.md
+    lg: "p-lg"
+    // 24px (1.5rem) - maps to semanticSpacing.lg
+  },
+  /**
+   * Border radius for surfaces
+   */
+  radius: {
+    default: "rounded-md",
+    // 6px (0.375rem) - maps to borderRadius.md
+    sm: "rounded-sm",
+    // 4px (0.25rem) - maps to borderRadius.sm
+    md: "rounded-md",
+    // 6px (0.375rem) - maps to borderRadius.md
+    lg: "rounded-lg"
+    // 8px (0.5rem) - maps to borderRadius.lg
+  },
+  /**
+   * Shadow tokens by surface variant
+   * Maps to foundation elevation shadow tokens
+   */
+  shadow: {
+    flat: "shadow-none",
+    // No shadow - maps to elevationShadows.none
+    raised: "shadow-sm",
+    // Small shadow - maps to elevationShadows.sm
+    sunken: "shadow-none",
+    // No shadow - maps to elevationShadows.none
+    outline: "shadow-none",
+    // No shadow - border-focused variant
+    subtle: "shadow-none"
+    // No shadow - minimal background difference
+  },
+  /**
+   * Variant-based token structure
+   * Organized by variant for easy access
+   */
+  variant: {
+    flat: {
+      padding: "p-md",
+      radius: "rounded-md",
+      shadow: "shadow-none",
+      bg: "bg-background",
+      border: "border border-border"
+    },
+    raised: {
+      padding: "p-md",
+      radius: "rounded-md",
+      shadow: "shadow-sm",
+      bg: "bg-card",
+      border: "border border-border"
+    },
+    sunken: {
+      padding: "p-md",
+      radius: "rounded-md",
+      shadow: "shadow-none",
+      bg: "bg-muted",
+      border: "border border-border"
+    },
+    outline: {
+      padding: "p-md",
+      radius: "rounded-md",
+      shadow: "shadow-none",
+      bg: "bg-transparent",
+      border: "border-2 border-border"
+    },
+    subtle: {
+      padding: "p-md",
+      radius: "rounded-md",
+      shadow: "shadow-none",
+      bg: "bg-muted/50",
+      border: "border border-border/50"
+    }
+  }
+}, N = {
+  /**
+   * Font sizes by text size variant
+   * Maps to foundation fontSize tokens
+   */
   fontSize: {
-    xs: [
-      e.xs[0],
-      { lineHeight: e.xs[1].lineHeight, letterSpacing: e.xs[1].letterSpacing }
-    ],
-    sm: [
-      e.sm[0],
-      { lineHeight: e.sm[1].lineHeight, letterSpacing: e.sm[1].letterSpacing }
-    ],
-    base: [
-      e.base[0],
-      { lineHeight: e.base[1].lineHeight, letterSpacing: e.base[1].letterSpacing }
-    ],
-    lg: [
-      e.lg[0],
-      { lineHeight: e.lg[1].lineHeight, letterSpacing: e.lg[1].letterSpacing }
-    ],
-    xl: [
-      e.xl[0],
-      { lineHeight: e.xl[1].lineHeight, letterSpacing: e.xl[1].letterSpacing }
-    ],
-    "2xl": [
-      e["2xl"][0],
-      {
-        lineHeight: e["2xl"][1].lineHeight,
-        letterSpacing: e["2xl"][1].letterSpacing
-      }
-    ],
-    "3xl": [
-      e["3xl"][0],
-      {
-        lineHeight: e["3xl"][1].lineHeight,
-        letterSpacing: e["3xl"][1].letterSpacing
+    xs: "text-xs",
+    // Maps to fontSize.xs[0]
+    sm: "text-sm",
+    // Maps to fontSize.sm[0]
+    md: "text-base",
+    // Maps to fontSize.base[0]
+    lg: "text-lg",
+    // Maps to fontSize.lg[0]
+    xl: "text-xl"
+    // Maps to fontSize.xl[0]
+  },
+  /**
+   * Font weights by weight variant
+   * Maps to foundation fontWeight tokens
+   */
+  fontWeight: {
+    normal: "font-normal",
+    // Maps to fontWeight.normal (400)
+    medium: "font-medium",
+    // Maps to fontWeight.medium (500)
+    semibold: "font-semibold",
+    // Maps to fontWeight.semibold (600)
+    bold: "font-bold"
+    // Maps to fontWeight.bold (700)
+  },
+  /**
+   * Line heights (if component-specific)
+   * Maps to foundation lineHeight tokens
+   */
+  lineHeight: {
+    none: "leading-none",
+    // Maps to lineHeight.none
+    tight: "leading-tight",
+    // Maps to lineHeight.tight
+    normal: "leading-normal",
+    // Maps to lineHeight.normal
+    relaxed: "leading-relaxed",
+    // Maps to lineHeight.relaxed
+    loose: "leading-loose"
+    // Maps to lineHeight.loose
+  },
+  /**
+   * Letter spacing (tracking) values
+   * Maps to foundation letterSpacing tokens
+   */
+  letterSpacing: {
+    tighter: "tracking-tighter",
+    // Maps to letterSpacing.tighter
+    tight: "tracking-tight",
+    // Maps to letterSpacing.tight
+    normal: "tracking-normal",
+    // Maps to letterSpacing.normal
+    wide: "tracking-wide",
+    // Maps to letterSpacing.wide
+    wider: "tracking-wider",
+    // Maps to letterSpacing.wider
+    widest: "tracking-widest"
+    // Maps to letterSpacing.widest
+  }
+}, E = {
+  /**
+   * Vertical padding for sections
+   * Used for spacing between major page sections
+   */
+  padding: {
+    sm: "py-md",
+    // 16px (1rem) - maps to semanticSpacing.md
+    md: "py-xl",
+    // 32px (2rem) - maps to semanticSpacing.xl
+    lg: "py-2xl",
+    // 48px (3rem) - maps to semanticSpacing.2xl
+    xl: "py-3xl"
+    // 64px (4rem) - maps to semanticSpacing.3xl
+  },
+  /**
+   * Gap spacing for content blocks within sections
+   * Used for spacing between content elements in a section
+   */
+  spacing: {
+    sm: "gap-sm",
+    // 8px (0.5rem) - maps to semanticSpacing.sm
+    md: "gap-md",
+    // 16px (1rem) - maps to semanticSpacing.md
+    lg: "gap-lg",
+    // 24px (1.5rem) - maps to semanticSpacing.lg
+    xl: "gap-xl"
+    // 32px (2rem) - maps to semanticSpacing.xl
+  }
+}, I = {
+  /**
+   * Backdrop tokens by variant
+   * Maps to SURFACE_TOKENS for background colors
+   */
+  backdrop: {
+    default: {
+      bg: "bg-black/50",
+      // Maps to surface overlay opacity
+      opacity: "opacity-100"
+    },
+    blurred: {
+      bg: "bg-black/50",
+      // Maps to surface overlay opacity
+      opacity: "opacity-100",
+      backdropFilter: "backdrop-blur-sm"
+      // Maps to backdrop blur utilities
+    },
+    transparent: {
+      bg: "bg-transparent",
+      opacity: "opacity-0"
+    }
+  },
+  /**
+   * Modal tokens by size variant
+   * Maps to foundation tokens for spacing, radius, and shadows
+   */
+  modal: {
+    radius: {
+      sm: "rounded-md",
+      // 6px - maps to borderRadius.md / componentRadius.modal.sm
+      md: "rounded-lg",
+      // 8px - maps to borderRadius.lg / componentRadius.modal.md
+      lg: "rounded-xl",
+      // 12px - maps to borderRadius.xl / componentRadius.modal.lg
+      xl: "rounded-2xl",
+      // 16px - maps to borderRadius.2xl / componentRadius.modal.xl
+      fullscreen: "rounded-none"
+      // No radius - maps to borderRadius.none
+    },
+    padding: {
+      sm: "p-md",
+      // 16px - maps to semanticSpacing.md
+      md: "p-lg",
+      // 24px - maps to semanticSpacing.lg
+      lg: "p-xl",
+      // 32px - maps to semanticSpacing.xl
+      xl: "p-xl"
+      // 32px - maps to semanticSpacing.xl (same as lg)
+    },
+    shadow: {
+      sm: "shadow-md",
+      // Maps to elevationShadows.md
+      md: "shadow-lg",
+      // Maps to elevationShadows.lg
+      lg: "shadow-xl",
+      // Maps to elevationShadows.xl
+      xl: "shadow-xl"
+      // Maps to elevationShadows.xl (same as lg)
+    },
+    maxWidth: {
+      sm: "max-w-md",
+      // 448px
+      md: "max-w-lg",
+      // 512px
+      lg: "max-w-2xl",
+      // 672px
+      xl: "max-w-4xl",
+      // 896px
+      fullscreen: "max-w-full"
+      // Full width
+    },
+    /**
+     * Modal surface tokens by variant
+     * Token-based styling for all modal surface variants
+     */
+    surface: {
+      primary: {
+        bg: "bg-background",
+        // Maps to SURFACE_TOKENS.variant.flat.bg
+        border: "border border-border"
+        // Maps to SURFACE_TOKENS.variant.flat.border
+      },
+      secondary: {
+        bg: "bg-card",
+        // Maps to elevated surface
+        border: "border border-border",
+        // Maps to border
+        shadow: "shadow-sm"
+        // Maps to elevation shadow
+      },
+      tinted: {
+        bg: "bg-muted/50",
+        // Maps to SURFACE_TOKENS.variant.subtle.bg
+        border: "border border-border/50"
+        // Maps to SURFACE_TOKENS.variant.subtle.border
+      },
+      bare: {
+        bg: "bg-transparent",
+        // No background
+        border: "border-none",
+        // No border
+        shadow: "shadow-none"
+        // No shadow
       }
-    ],
-    "4xl": [
-      e["4xl"][0],
-      {
-        lineHeight: e["4xl"][1].lineHeight,
-        letterSpacing: e["4xl"][1].letterSpacing
+    },
+    /**
+     * Modal container tokens
+     * For backdrop container positioning and layout
+     */
+    container: {
+      layout: "fixed inset-0 z-40 flex items-center justify-center"
+      // Container for backdrop and modal content
+    },
+    /**
+     * Modal position tokens
+     * For centering and positioning modal content
+     */
+    position: {
+      center: "left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2"
+      // Center positioning
+    },
+    /**
+     * Modal transition tokens
+     * Maps to motion tokens for appear/disappear animations
+     */
+    transition: {
+      appear: "tm-motion-fade-scale",
+      // Maps to OVERLAY_TOKENS.animation.enter.combined
+      disappear: "tm-motion-fade-scale-out"
+      // Maps to OVERLAY_TOKENS.animation.exit.combined
+    },
+    /**
+     * Modal section spacing tokens
+     * For header, body, and footer spacing
+     */
+    spacing: {
+      header: {
+        marginBottom: "mb-md",
+        // 16px - spacing below header
+        gap: "gap-xs"
+        // 4px - gap between header elements
+      },
+      body: {
+        layout: "flex-1"
+        // Layout utility for body to take remaining space
+      },
+      footer: {
+        marginTop: "mt-md",
+        // 16px - spacing above footer
+        gap: "gap-sm"
+        // 8px - gap between footer elements
       }
-    ],
-    "5xl": [
-      e["5xl"][0],
-      {
-        lineHeight: e["5xl"][1].lineHeight,
-        letterSpacing: e["5xl"][1].letterSpacing
+    }
+  },
+  /**
+   * Animation tokens for overlay enter/exit animations
+   * Maps to Motion V2 utility classes
+   * Uses CSS-only animations from motion/v2.ts
+   */
+  animation: {
+    enter: {
+      duration: "duration-normal",
+      // 250ms - maps to motion V2 durations.normal
+      easing: "ease-out",
+      // Maps to motion V2 easings.standard
+      keyframes: "tm-motion-fade-in",
+      // Motion V2 fade in
+      scale: "tm-motion-scale-in",
+      // Motion V2 scale in
+      combined: "tm-motion-fade-scale"
+      // Motion V2 fade + scale
+    },
+    exit: {
+      duration: "duration-fast",
+      // 150ms - maps to motion V2 durations.fast
+      easing: "ease-in",
+      // Maps to motion V2 easings.standard
+      keyframes: "tm-motion-fade-out",
+      // Motion V2 fade out
+      scale: "tm-motion-scale-out",
+      // Motion V2 scale out
+      combined: "tm-motion-fade-scale-out"
+      // Motion V2 fade + scale out
+    }
+  },
+  /**
+   * Drawer tokens by size variant
+   * Maps to foundation tokens for spacing, radius, and shadows
+   */
+  drawer: {
+    width: {
+      sm: "w-64",
+      // 256px
+      md: "w-80",
+      // 320px
+      lg: "w-96"
+      // 384px
+    },
+    height: {
+      sm: "h-64",
+      // 256px
+      md: "h-80",
+      // 320px
+      lg: "h-96"
+      // 384px
+    },
+    radius: {
+      left: {
+        sm: "rounded-r-md",
+        // Right radius for left drawer
+        md: "rounded-r-lg",
+        lg: "rounded-r-xl"
+      },
+      right: {
+        sm: "rounded-l-md",
+        // Left radius for right drawer
+        md: "rounded-l-lg",
+        lg: "rounded-l-xl"
+      },
+      bottom: {
+        sm: "rounded-t-md",
+        // Top radius for bottom drawer
+        md: "rounded-t-lg",
+        lg: "rounded-t-xl"
       }
-    ],
-    "6xl": [
-      e["6xl"][0],
-      {
-        lineHeight: e["6xl"][1].lineHeight,
-        letterSpacing: e["6xl"][1].letterSpacing
+    },
+    padding: {
+      sm: "p-md",
+      // 16px
+      md: "p-lg",
+      // 24px
+      lg: "p-xl"
+      // 32px
+    },
+    shadow: {
+      sm: "shadow-md",
+      // Maps to elevationShadows.md
+      md: "shadow-lg",
+      // Maps to elevationShadows.lg
+      lg: "shadow-xl"
+      // Maps to elevationShadows.xl
+    },
+    animation: {
+      left: {
+        enter: "tm-motion-slide-right-in",
+        // Slide in from left
+        exit: "tm-motion-slide-right-out"
+        // Slide out to left
+      },
+      right: {
+        enter: "tm-motion-slide-left-in",
+        // Slide in from right
+        exit: "tm-motion-slide-left-out"
+        // Slide out to right
+      },
+      bottom: {
+        enter: "tm-motion-slide-up-in",
+        // Slide in from bottom
+        exit: "tm-motion-slide-up-out"
+        // Slide out to bottom
       }
-    ],
-    "7xl": [
-      e["7xl"][0],
-      {
-        lineHeight: e["7xl"][1].lineHeight,
-        letterSpacing: e["7xl"][1].letterSpacing
+    },
+    /**
+     * Drawer section spacing tokens
+     * For header, body, and footer spacing
+     */
+    spacing: {
+      header: {
+        marginBottom: "mb-md",
+        // 16px - spacing below header
+        gap: "gap-xs"
+        // 4px - gap between header elements
+      },
+      footer: {
+        marginTop: "mt-md",
+        // 16px - spacing above footer
+        gap: "gap-sm"
+        // 8px - gap between footer elements
       }
-    ],
-    "8xl": [
-      e["8xl"][0],
-      {
-        lineHeight: e["8xl"][1].lineHeight,
-        letterSpacing: e["8xl"][1].letterSpacing
+    }
+  }
+}, R = {
+  /**
+   * Spacing tokens for toast layout
+   * Maps to semanticSpacing tokens
+   */
+  spacing: {
+    gap: "gap-sm",
+    // 8px - maps to semanticSpacing.sm
+    padding: "p-md",
+    // 16px - maps to semanticSpacing.md
+    paddingHorizontal: "px-md",
+    // 16px horizontal padding
+    paddingVertical: "py-md"
+    // 16px vertical padding
+  },
+  /**
+   * Width tokens for toast layout
+   * Maps to width utilities
+   */
+  width: {
+    full: "w-full"
+    // Full width (100%)
+  },
+  /**
+   * Border radius for toasts
+   * Maps to componentRadius.toast
+   */
+  radius: {
+    default: "rounded-lg"
+    // 8px - maps to borderRadius.lg / componentRadius.toast.md
+  },
+  /**
+   * Shadow for toasts
+   * Maps to elevationShadows
+   */
+  shadow: {
+    default: "shadow-lg"
+    // Maps to elevationShadows.lg
+  },
+  /**
+   * Surface tokens for toast variants
+   * Maps to SURFACE_TOKENS for background colors
+   */
+  surface: {
+    success: "bg-success/10 border-success/20 text-success-foreground",
+    info: "bg-info/10 border-info/20 text-info-foreground",
+    warning: "bg-warning/10 border-warning/20 text-warning-foreground",
+    danger: "bg-destructive/10 border-destructive/20 text-destructive-foreground",
+    default: "bg-background border border-border text-foreground"
+  },
+  /**
+   * Animation tokens for toast enter/exit animations
+   * Maps to Motion V2 utility classes
+   * Uses CSS-only animations from motion/v2.ts
+   */
+  animation: {
+    enter: {
+      slideUp: "tm-motion-fade-slide-up",
+      // Motion V2 fade + slide up
+      fadeIn: "tm-motion-fade-in",
+      // Motion V2 fade in
+      combined: "tm-motion-fade-slide-right"
+      // Motion V2 fade + slide right (for toast from right)
+    },
+    exit: {
+      slideOutRight: "tm-motion-fade-slide-left-out",
+      // Motion V2 fade + slide left out
+      fadeOut: "tm-motion-fade-out",
+      // Motion V2 fade out
+      combined: "tm-motion-fade-slide-left-out"
+      // Motion V2 fade + slide left out
+    }
+  },
+  /**
+   * Position tokens for toast viewport
+   * Maps to spacing tokens for positioning
+   */
+  position: {
+    spacing: {
+      top: "top-md",
+      // 16px - maps to semanticSpacing.md
+      right: "right-md",
+      // 16px - maps to semanticSpacing.md
+      bottom: "bottom-md",
+      // 16px - maps to semanticSpacing.md
+      left: "left-md"
+      // 16px - maps to semanticSpacing.md
+    }
+  },
+  /**
+   * Content layout tokens
+   * For toast content container
+   */
+  content: {
+    layout: "flex flex-1 items-start",
+    // Content container layout
+    gap: "gap-sm",
+    // Gap between content elements - maps to spacing.gap
+    verticalSpacing: "space-y-xs"
+    // Vertical spacing between title and description (4px)
+  },
+  /**
+   * Title typography tokens
+   * Maps to TEXT_TOKENS for font sizing and weight
+   */
+  title: {
+    fontSize: "text-sm",
+    // Maps to TEXT_TOKENS.fontSize.sm
+    fontWeight: "font-semibold"
+    // Maps to TEXT_TOKENS.fontWeight.semibold
+  },
+  /**
+   * Description typography tokens
+   * Maps to TEXT_TOKENS for font sizing
+   */
+  description: {
+    fontSize: "text-sm",
+    // Maps to TEXT_TOKENS.fontSize.sm
+    opacity: "opacity-90"
+    // Description text opacity (90%)
+  },
+  /**
+   * Action button tokens
+   * For toast action button sizing
+   */
+  action: {
+    height: "h-8",
+    // Action button height (32px)
+    padding: "px-xs",
+    // Action button horizontal padding
+    fontSize: "text-xs"
+    // Maps to TEXT_TOKENS.fontSize.xs
+  },
+  /**
+   * Dismiss button tokens
+   * For toast dismiss button styling
+   */
+  dismiss: {
+    position: "absolute right-xs top-xs",
+    // Dismiss button positioning
+    size: "h-6 w-6",
+    // Dismiss button size (24px)
+    radius: "rounded-md",
+    // Dismiss button border radius (6px)
+    padding: "p-xs",
+    // Dismiss button padding
+    transition: "transition-opacity",
+    // Maps to MOTION_TOKENS.transition.opacity
+    colors: {
+      default: "text-foreground/50",
+      // Default text color with 50% opacity
+      hover: "hover:text-foreground"
+      // Hover text color
+    },
+    states: {
+      default: "opacity-0",
+      // Default opacity (hidden)
+      groupHover: "group-hover:opacity-100",
+      // Visible on group hover
+      focus: "focus:opacity-100",
+      // Visible on focus
+      focusRing: "focus:outline-none focus:ring-1"
+      // Focus ring styling
+    }
+  }
+}, V = {
+  /**
+   * Spacing tokens for notification layout
+   * Maps to semanticSpacing tokens
+   */
+  spacing: {
+    gap: "gap-sm",
+    // 8px - maps to semanticSpacing.sm
+    padding: "p-md",
+    // 16px - maps to semanticSpacing.md
+    paddingHorizontal: "px-md",
+    // 16px horizontal padding
+    paddingVertical: "py-md",
+    // 16px vertical padding
+    itemPadding: "p-sm",
+    // 8px - maps to semanticSpacing.sm
+    panelPadding: "p-lg"
+    // 24px - maps to semanticSpacing.lg
+  },
+  /**
+   * Border radius for notifications
+   * Maps to componentRadius.notification
+   */
+  radius: {
+    item: "rounded-md",
+    // 6px - maps to borderRadius.md / componentRadius.notification.item
+    panel: "rounded-lg",
+    // 8px - maps to borderRadius.lg / componentRadius.notification.panel
+    default: "rounded-lg"
+    // 8px - maps to borderRadius.lg
+  },
+  /**
+   * Shadow for notifications
+   * Maps to elevationShadows
+   */
+  shadow: {
+    item: "shadow-sm",
+    // Maps to elevationShadows.sm
+    panel: "shadow-xl",
+    // Maps to elevationShadows.xl
+    default: "shadow-lg"
+    // Maps to elevationShadows.lg
+  },
+  /**
+   * Width tokens for notifications
+   * Maps to spacing tokens for width constraints
+   */
+  width: {
+    item: "w-full",
+    // Full width within container
+    itemMax: "max-w-md",
+    // 448px - max width for item
+    panel: "w-full",
+    // Full width on mobile
+    panelSm: "w-sm",
+    // 384px - small panel width
+    panelMd: "w-md",
+    // 448px - medium panel width (default)
+    panelLg: "w-lg",
+    // 512px - large panel width
+    panelMaxHeight: "max-h-[calc(100vh-2rem)]"
+    // Max height with spacing
+  },
+  /**
+   * Item-specific tokens
+   * For individual notification items in lists
+   */
+  item: {
+    padding: "p-sm",
+    // 8px - maps to semanticSpacing.sm
+    gap: "gap-sm",
+    // 8px - maps to semanticSpacing.sm
+    iconSize: "h-5 w-5",
+    // 20px - icon size
+    radius: "rounded-md",
+    // 6px - maps to borderRadius.md
+    minHeight: "min-h-[3rem]"
+    // 48px - minimum item height
+  },
+  /**
+   * Surface tokens for notification variants
+   * Extends toast variants with system and log
+   * Maps to SURFACE_TOKENS for background colors
+   */
+  surface: {
+    success: "bg-success/10 border-success/20 text-success-foreground",
+    info: "bg-info/10 border-info/20 text-info-foreground",
+    warning: "bg-warning/10 border-warning/20 text-warning-foreground",
+    danger: "bg-destructive/10 border-destructive/20 text-destructive-foreground",
+    system: "bg-muted border-border text-foreground",
+    log: "bg-background border-border/50 text-muted-foreground",
+    default: "bg-background border border-border text-foreground"
+  },
+  /**
+   * Timeline tokens for grouped notifications
+   * Visual timeline indicators for grouped items
+   */
+  timeline: {
+    dotSize: "h-2 w-2",
+    // 8px - timeline dot size
+    lineWidth: "w-0.5",
+    // 2px - timeline line width
+    gap: "gap-xs"
+    // 4px - gap between timeline elements
+  },
+  /**
+   * Animation tokens for notification enter/exit animations
+   * Maps to Motion V2 utility classes
+   * Uses CSS-only animations from motion/v2.ts
+   */
+  animation: {
+    enter: {
+      slideInRight: "tm-motion-fade-slide-right",
+      // Motion V2 fade + slide right
+      fadeIn: "tm-motion-fade-in",
+      // Motion V2 fade in
+      combined: "tm-motion-fade-slide-right"
+      // Motion V2 fade + slide right
+    },
+    exit: {
+      slideOutRight: "tm-motion-fade-slide-right-out",
+      // Motion V2 fade + slide right out
+      fadeOut: "tm-motion-fade-out",
+      // Motion V2 fade out
+      combined: "tm-motion-fade-slide-right-out"
+      // Motion V2 fade + slide right out
+    },
+    panel: {
+      enter: {
+        slideInRight: "tm-motion-fade-slide-right",
+        // Motion V2 panel slide in from right
+        fadeIn: "tm-motion-fade-in",
+        // Motion V2 panel fade in
+        combined: "tm-motion-fade-slide-right"
+        // Motion V2 panel fade + slide right
+      },
+      exit: {
+        slideOutRight: "tm-motion-fade-slide-right-out",
+        // Motion V2 panel slide out to right
+        fadeOut: "tm-motion-fade-out",
+        // Motion V2 panel fade out
+        combined: "tm-motion-fade-slide-right-out"
+        // Motion V2 panel fade + slide right out
       }
-    ],
-    "9xl": [
-      e["9xl"][0],
-      {
-        lineHeight: e["9xl"][1].lineHeight,
-        letterSpacing: e["9xl"][1].letterSpacing
+    }
+  },
+  /**
+   * Panel-specific tokens
+   * For the side drawer notification panel
+   */
+  panel: {
+    width: {
+      default: "w-md",
+      // 448px - default panel width
+      sm: "w-sm",
+      // 384px - small panel
+      md: "w-md",
+      // 448px - medium panel
+      lg: "w-lg"
+      // 512px - large panel
+    },
+    maxHeight: "max-h-[calc(100vh-2rem)]",
+    // Max height with spacing
+    spacing: {
+      gap: "gap-md",
+      // 16px - gap between panel sections
+      padding: "p-lg",
+      // 24px - panel padding
+      headerPadding: "px-lg py-md"
+      // Header padding
+    },
+    radius: {
+      default: "rounded-lg",
+      // 8px - panel border radius
+      topLeft: "rounded-tl-lg",
+      // Top-left radius
+      topRight: "rounded-tr-lg"
+      // Top-right radius
+    },
+    shadow: {
+      default: "shadow-xl"
+      // Large shadow for panel elevation
+    },
+    backdrop: {
+      bg: "bg-black/50",
+      // Backdrop background
+      blur: "backdrop-blur-sm"
+      // Backdrop blur
+    }
+  }
+}, K = {
+  /**
+   * Navigation item heights by size
+   * Maps to Tailwind height utilities: h-8, h-9, h-10
+   */
+  sizes: {
+    sm: {
+      height: "h-8",
+      // 32px (2rem)
+      width: "w-8",
+      // 32px (2rem) - for square indicators
+      padding: {
+        horizontal: "px-sm",
+        // 8px (0.5rem) - maps to semanticSpacing.sm
+        vertical: "py-xs"
+        // 4px (0.25rem) - maps to semanticSpacing.xs
+      },
+      fontSize: "text-xs",
+      // Maps to fontSize.xs[0]
+      gap: "gap-xs"
+      // 4px (0.25rem) - maps to semanticSpacing.xs
+    },
+    md: {
+      height: "h-9",
+      // 36px (2.25rem)
+      padding: {
+        horizontal: "px-md",
+        // 16px (1rem) - maps to semanticSpacing.md
+        vertical: "py-sm"
+        // 8px (0.5rem) - maps to semanticSpacing.sm
+      },
+      fontSize: "text-sm",
+      // Maps to fontSize.sm[0]
+      gap: "gap-sm"
+      // 8px (0.5rem) - maps to semanticSpacing.sm
+    },
+    lg: {
+      height: "h-10",
+      // 40px (2.5rem)
+      padding: {
+        horizontal: "px-lg",
+        // 24px (1.5rem) - maps to semanticSpacing.lg
+        vertical: "py-sm"
+        // 8px (0.5rem) - maps to semanticSpacing.sm
+      },
+      fontSize: "text-base",
+      // Maps to fontSize.base[0]
+      gap: "gap-sm"
+      // 8px (0.5rem) - maps to semanticSpacing.sm
+    }
+  },
+  /**
+   * Border radius for navigation items
+   */
+  radius: {
+    default: "rounded-md",
+    // 6px (0.375rem) - maps to borderRadius.md
+    sm: "rounded-sm",
+    // 4px (0.25rem) - maps to borderRadius.sm
+    md: "rounded-md",
+    // 6px (0.375rem) - maps to borderRadius.md
+    lg: "rounded-lg",
+    // 8px (0.5rem) - maps to borderRadius.lg
+    full: "rounded-full"
+    // 9999px - maps to borderRadius.full
+  },
+  /**
+   * Spacing tokens for navigation components
+   */
+  spacing: {
+    itemPadding: {
+      sm: "px-sm py-xs",
+      // 8px horizontal, 4px vertical
+      md: "px-md py-sm",
+      // 16px horizontal, 8px vertical
+      lg: "px-lg py-sm"
+      // 24px horizontal, 8px vertical
+    },
+    listGap: {
+      xs: "gap-xs",
+      // 4px (0.25rem)
+      sm: "gap-sm",
+      // 8px (0.5rem)
+      md: "gap-md",
+      // 16px (1rem)
+      lg: "gap-lg"
+      // 24px (1.5rem)
+    },
+    content: {
+      marginTop: "mt-md"
+      // 16px (1rem) - spacing above content sections
+    }
+  },
+  /**
+   * Typography tokens for navigation components
+   */
+  typography: {
+    default: "text-sm",
+    // Maps to fontSize.sm[0]
+    sm: "text-xs",
+    // Maps to fontSize.xs[0]
+    md: "text-sm",
+    // Maps to fontSize.sm[0]
+    lg: "text-base",
+    // Maps to fontSize.base[0]
+    fontWeight: {
+      default: "font-medium",
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold"
+    }
+  },
+  /**
+   * State-based tokens for navigation items
+   * Colors, backgrounds, and borders for different states
+   */
+  states: {
+    default: {
+      background: "bg-transparent",
+      text: "text-foreground",
+      border: "border-transparent"
+    },
+    hover: {
+      background: "hover:bg-accent",
+      text: "hover:text-accent-foreground",
+      border: "hover:border-accent"
+    },
+    active: {
+      background: "bg-accent",
+      text: "text-accent-foreground",
+      border: "border-accent"
+    },
+    selected: {
+      background: "bg-primary",
+      text: "text-primary-foreground",
+      border: "border-primary"
+    },
+    disabled: {
+      background: "bg-transparent",
+      text: "text-muted-foreground disabled:opacity-50",
+      border: "border-transparent",
+      cursor: "disabled:cursor-not-allowed"
+    }
+  },
+  /**
+   * Indicator tokens for Tabs component
+   * Used for underline/indicator animation
+   */
+  indicator: {
+    height: "h-0.5",
+    // 2px - thin underline
+    radius: "rounded-full",
+    // Fully rounded
+    transition: "transition-all duration-normal ease-out",
+    // Maps to motion tokens
+    background: "bg-primary",
+    // Primary color for indicator
+    position: "absolute bottom-0 left-0 right-0"
+    // Position at bottom
+  },
+  /**
+   * Shadow tokens for navigation components
+   */
+  shadow: {
+    none: "shadow-none",
+    sm: "shadow-sm",
+    // Maps to elevationShadows.sm
+    default: "shadow-sm",
+    // Maps to elevationShadows.sm
+    md: "shadow"
+    // Maps to elevationShadows.xs
+  },
+  /**
+   * Focus ring tokens for accessibility
+   */
+  focus: {
+    ring: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2",
+    ringOffset: "focus-visible:ring-offset-2"
+  },
+  /**
+   * Container background tokens
+   * For segmented control and tab container backgrounds
+   */
+  container: {
+    background: {
+      muted: "bg-muted"
+      // Muted background for container
+    },
+    padding: {
+      xs: "p-xs",
+      // 4px padding
+      sm: "p-sm"
+      // 8px padding
+    }
+  },
+  /**
+   * Border color tokens
+   */
+  border: {
+    muted: "border-muted-foreground"
+    // Muted border color
+  }
+}, _ = {
+  /**
+   * Menu item tokens by size
+   * Maps to foundation spacing and radius tokens
+   */
+  item: {
+    padding: {
+      xs: "px-xs py-xs",
+      // 4px horizontal, 4px vertical - maps to semanticSpacing.xs
+      sm: "px-sm py-sm",
+      // 8px horizontal, 8px vertical - maps to semanticSpacing.sm
+      md: "px-md py-sm"
+      // 16px horizontal, 8px vertical - maps to semanticSpacing.md/sm
+    },
+    radius: {
+      sm: "rounded-sm",
+      // 4px - maps to borderRadius.sm
+      md: "rounded-md"
+      // 6px - maps to borderRadius.md
+    },
+    gap: {
+      xs: "gap-xs",
+      // 4px - maps to semanticSpacing.xs
+      sm: "gap-sm"
+      // 8px - maps to semanticSpacing.sm
+    },
+    height: {
+      sm: "h-8",
+      // 32px - maps to spacing[8]
+      md: "h-10",
+      // 40px - maps to spacing[10]
+      lg: "h-12"
+      // 48px - maps to spacing[12]
+    }
+  },
+  /**
+   * Menu content tokens by size
+   * Maps to foundation spacing, radius, and shadow tokens
+   */
+  content: {
+    padding: {
+      sm: "p-sm",
+      // 8px - maps to semanticSpacing.sm
+      md: "p-md"
+      // 16px - maps to semanticSpacing.md
+    },
+    radius: {
+      sm: "rounded-md",
+      // 6px - maps to borderRadius.md
+      md: "rounded-lg"
+      // 8px - maps to borderRadius.lg
+    },
+    shadow: {
+      sm: "shadow-md",
+      // Maps to elevationShadows.md
+      md: "shadow-lg"
+      // Maps to elevationShadows.lg
+    },
+    minWidth: {
+      sm: "min-w-32",
+      // 128px - maps to spacing[32]
+      md: "min-w-48"
+      // 192px - maps to spacing[48]
+    }
+  },
+  /**
+   * Menu separator tokens
+   * Maps to foundation spacing and color tokens
+   */
+  separator: {
+    margin: {
+      sm: "my-xs",
+      // 4px vertical margin - maps to semanticSpacing.xs
+      md: "my-sm"
+      // 8px vertical margin - maps to semanticSpacing.sm
+    },
+    height: "h-px",
+    // 1px height
+    color: "bg-border"
+    // Maps to border color token
+  },
+  /**
+   * Menu label tokens
+   * Maps to foundation spacing and typography tokens
+   */
+  label: {
+    padding: {
+      sm: "px-sm py-xs",
+      // 8px horizontal, 4px vertical - maps to semanticSpacing.sm/xs
+      md: "px-md py-sm"
+      // 16px horizontal, 8px vertical - maps to semanticSpacing.md/sm
+    },
+    textStyle: "text-sm font-semibold"
+    // Maps to fontSize.sm and fontWeight.semibold
+  },
+  /**
+   * Menu indicator tokens (for checkboxes, radio buttons)
+   * Maps to foundation spacing tokens
+   */
+  indicator: {
+    size: {
+      sm: "w-4 h-4",
+      // 16px - maps to spacing[4]
+      md: "w-5 h-5"
+      // 20px - maps to spacing[5]
+    },
+    offset: {
+      sm: "left-xs",
+      // 4px - maps to semanticSpacing.xs
+      md: "left-sm"
+      // 8px - maps to semanticSpacing.sm
+    }
+  }
+}, W = {
+  /**
+   * Popover content tokens by size
+   * Maps to foundation spacing, radius, and shadow tokens
+   */
+  content: {
+    border: {
+      default: "border",
+      // Border utility
+      color: "border-border"
+      // Border color using token
+    },
+    background: {
+      default: "bg-popover"
+      // Background using token
+    },
+    text: {
+      default: "text-popover-foreground"
+      // Text color using token
+    },
+    padding: {
+      sm: "p-sm",
+      // 8px - maps to semanticSpacing.sm
+      md: "p-md",
+      // 16px - maps to semanticSpacing.md
+      lg: "p-lg"
+      // 24px - maps to semanticSpacing.lg
+    },
+    radius: {
+      sm: "rounded-md",
+      // 6px - maps to borderRadius.md
+      md: "rounded-lg"
+      // 8px - maps to borderRadius.lg
+    },
+    shadow: {
+      sm: "shadow-md",
+      // Maps to elevationShadows.md
+      md: "shadow-lg"
+      // Maps to elevationShadows.lg
+    },
+    width: {
+      xs: "w-40",
+      // 160px - maps to spacing[40]
+      sm: "w-48",
+      // 192px - maps to spacing[48]
+      md: "w-72",
+      // 288px - maps to spacing[72]
+      lg: "w-96",
+      // 384px - maps to spacing[96]
+      xl: "w-[32rem]"
+      // 512px - custom large size
+    }
+  },
+  /**
+   * Popover arrow tokens
+   * Maps to foundation spacing tokens
+   */
+  arrow: {
+    size: {
+      sm: "w-2 h-2",
+      // 8px - maps to spacing[2]
+      md: "w-3 h-3"
+      // 12px - maps to spacing[3]
+    },
+    offset: {
+      sm: "-translate-x-1/2",
+      // Center horizontally - standard Tailwind utility
+      md: "-translate-x-1/2"
+      // Center horizontally - standard Tailwind utility
+    }
+  },
+  /**
+   * Animation tokens for popover enter/exit animations
+   * Maps to Motion V2 utility classes
+   * Uses CSS-only animations from motion/v2.ts
+   */
+  animation: {
+    enter: "tm-motion-fade-scale",
+    // Motion V2 fade + scale animation
+    exit: "tm-motion-fade-scale-out"
+    // Motion V2 fade + scale exit animation
+  }
+}, L = {
+  /**
+   * Trigger tokens by size
+   * Button element that opens/closes the dropdown
+   */
+  trigger: {
+    height: {
+      sm: "h-8",
+      // 32px
+      md: "h-9",
+      // 36px
+      lg: "h-10"
+      // 40px
+    },
+    padding: {
+      horizontal: {
+        sm: "px-sm",
+        // 8px
+        md: "px-md",
+        // 16px
+        lg: "px-lg"
+        // 24px
+      },
+      vertical: {
+        sm: "py-xs",
+        // 4px
+        md: "py-xs",
+        // 4px
+        lg: "py-sm"
+        // 8px
       }
-    ]
+    },
+    radius: {
+      sm: "rounded-md",
+      // 6px
+      md: "rounded-md",
+      // 6px
+      lg: "rounded-md"
+      // 6px
+    },
+    fontSize: {
+      sm: "text-sm",
+      // Maps to fontSize.sm
+      md: "text-base",
+      // Maps to fontSize.base
+      lg: "text-base"
+      // Maps to fontSize.base
+    },
+    shadow: "shadow-sm",
+    // Maps to elevationShadows.sm
+    /**
+     * Icon spacing for trigger
+     */
+    icon: {
+      spacing: "ml-sm"
+      // 8px - spacing between trigger text and icon
+    }
   },
-  fontWeight: { ...a },
-  lineHeight: { ...s },
-  letterSpacing: { ...o }
-}, S = {
-  ...h,
-  ...u,
-  ...f,
-  ...y,
-  ...d,
-  ...x
+  /**
+   * Variant-based tokens
+   * Border, background, text, and focus colors for different variants
+   */
+  variant: {
+    neutral: {
+      border: "border border-[hsl(var(--border))]",
+      // Border color using CSS var
+      background: "bg-[hsl(var(--popover))]",
+      // Background using CSS var
+      text: "text-[hsl(var(--popover-foreground))]",
+      // Text color using CSS var
+      focus: "focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2"
+      // Focus ring
+    },
+    tinted: {
+      border: "border border-[hsl(var(--border))]",
+      // Border color using CSS var
+      background: "bg-[hsl(var(--muted))]",
+      // Background using CSS var
+      text: "text-[hsl(var(--popover-foreground))]",
+      // Text color using CSS var
+      focus: "focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2"
+      // Focus ring
+    }
+  },
+  /**
+   * Menu tokens by size
+   * Container for the dropdown items
+   */
+  menu: {
+    border: {
+      default: "border border-[hsl(var(--border))]"
+      // Border color using CSS var
+    },
+    background: {
+      neutral: "bg-[hsl(var(--popover))]",
+      // Background using CSS var
+      tinted: "bg-[hsl(var(--muted))]"
+      // Background using CSS var
+    },
+    text: {
+      default: "text-[hsl(var(--popover-foreground))]"
+      // Text color using CSS var
+    },
+    padding: {
+      sm: "p-sm",
+      // 8px
+      md: "p-md",
+      // 16px
+      lg: "p-lg"
+      // 24px
+    },
+    radius: {
+      sm: "rounded-md",
+      // 6px
+      md: "rounded-lg",
+      // 8px
+      lg: "rounded-lg"
+      // 8px
+    },
+    shadow: {
+      sm: "shadow-md",
+      // Maps to elevationShadows.md
+      md: "shadow-lg",
+      // Maps to elevationShadows.lg
+      lg: "shadow-xl"
+      // Maps to elevationShadows.xl
+    },
+    minWidth: {
+      sm: "min-w-32",
+      // 128px
+      md: "min-w-48",
+      // 192px
+      lg: "min-w-64"
+      // 256px
+    }
+  },
+  /**
+   * Item tokens by size
+   * Individual menu item
+   */
+  item: {
+    background: {
+      focus: "focus:bg-[hsl(var(--accent))]",
+      // Focus background using CSS var
+      selected: "bg-[hsl(var(--accent))]"
+      // Selected background using CSS var
+    },
+    text: {
+      focus: "focus:text-[hsl(var(--accent-foreground))]",
+      // Focus text using CSS var
+      selected: "text-[hsl(var(--accent-foreground))]"
+      // Selected text using CSS var
+    },
+    padding: {
+      sm: "px-sm py-xs",
+      // 8px horizontal, 4px vertical
+      md: "px-md py-xs",
+      // 16px horizontal, 4px vertical
+      lg: "px-lg py-sm"
+      // 24px horizontal, 8px vertical
+    },
+    radius: {
+      sm: "rounded-sm",
+      // 4px
+      md: "rounded-md",
+      // 6px
+      lg: "rounded-md"
+      // 6px
+    },
+    fontSize: {
+      sm: "text-sm",
+      // Maps to fontSize.sm
+      md: "text-sm",
+      // Maps to fontSize.sm
+      lg: "text-base"
+      // Maps to fontSize.base
+    }
+  }
+}, M = {
+  /**
+   * Tooltip content tokens
+   * Maps to foundation spacing, radius, shadow, and typography tokens
+   */
+  content: {
+    border: {
+      default: "border",
+      // Border utility
+      color: "border-border"
+      // Border color using token
+    },
+    background: {
+      default: "bg-popover"
+      // Background using token
+    },
+    text: {
+      default: "text-popover-foreground"
+      // Text color using token
+    },
+    padding: {
+      horizontal: "px-sm",
+      // 8px horizontal - maps to semanticSpacing.sm
+      vertical: "py-xs"
+      // 4px vertical - maps to semanticSpacing.xs
+    },
+    radius: {
+      sm: "rounded-sm",
+      // 4px - maps to borderRadius.sm
+      md: "rounded-md"
+      // 6px - maps to borderRadius.md (default)
+    },
+    shadow: {
+      sm: "shadow-sm",
+      // Maps to elevationShadows.sm
+      md: "shadow-md"
+      // Maps to elevationShadows.md (default)
+    },
+    fontSize: {
+      sm: "text-sm"
+      // Maps to fontSize.sm (default)
+    }
+  }
+}, n = {
+  ...t,
+  ...i,
+  ...s,
+  ...a,
+  ...o,
+  ...r
 };
-function H(w) {
+function p(l) {
   return `:root {
-${Object.entries(w).map(([b, v]) => `    ${b}: ${v};`).join(`
+${Object.entries(l).map(([m, u]) => `    ${m}: ${u};`).join(`
 `)}
   }`;
 }
-const R = H(S), I = {
-  colors: Object.keys(h).length,
-  typography: Object.keys(u).length,
-  spacing: Object.keys(f).length,
-  shadows: Object.keys(y).length,
-  radius: Object.keys(d).length,
-  motion: Object.keys(x).length,
-  total: Object.keys(S).length
-};
+const A = p(n), H = {
+  colors: Object.keys(t).length,
+  typography: Object.keys(i).length,
+  spacing: Object.keys(s).length,
+  shadows: Object.keys(a).length,
+  radius: Object.keys(o).length,
+  motion: Object.keys(r).length,
+  total: Object.keys(n).length
+}, j = g;
 export {
-  c as accentColoredShadows,
+  v as ALERT_TOKENS,
+  w as BUTTON_TOKENS,
+  y as CARD_TOKENS,
+  z as CHECKBOX_TOKENS,
+  d as DATA_TOKENS,
+  k as DOMAIN_TOKENS,
+  L as DROPDOWN_TOKENS,
+  c as ICON_TOKENS,
+  S as INPUT_TOKENS,
+  _ as MENU_TOKENS,
+  h as MOTION_TOKENS,
+  K as NAVIGATION_TOKENS,
+  V as NOTIFICATION_TOKENS,
+  I as OVERLAY_TOKENS,
+  W as POPOVER_TOKENS,
+  T as RADIO_TOKENS,
+  E as SECTION_TOKENS,
+  C as SURFACE_TOKENS,
+  O as SWITCH_TOKENS,
+  N as TEXT_TOKENS,
+  R as TOAST_TOKENS,
+  M as TOOLTIP_TOKENS,
+  j as UI_COLORS,
+  ie as accentColoredShadows,
   U as accentColors,
-  S as allCSSVariables,
-  R as allCSSVariablesCSS,
-  E as animations,
-  L as baseColors,
-  ee as borderRadius,
-  h as colorCSSVariables,
-  te as componentRadius,
-  z as componentShadowMapping,
-  N as cssVariableColorTokens,
-  A as durations,
-  B as easings,
-  i as elevationShadows,
-  p as focusRings,
-  n as fontFamily,
-  e as fontSize,
-  a as fontWeight,
-  H as generateCSSVariablesCSS,
-  m as glowEffects,
-  D as keyframes,
-  l as layoutSpacing,
-  o as letterSpacing,
-  s as lineHeight,
-  x as motionCSSVariables,
-  g as primaryColoredShadows,
-  $ as primaryColors,
-  d as radiusCSSVariables,
-  G as reducedMotion,
-  q as secondaryColors,
-  J as semanticColors,
-  r as semanticSpacing,
-  y as shadowCSSVariables,
-  t as spacing,
-  f as spacingCSSVariables,
-  K as springs,
-  P as surfaceColors,
-  Q as tailwindMotionConfig,
-  le as tailwindRadiusConfig,
-  F as tailwindShadowConfig,
-  W as tailwindSpacingConfig,
-  X as tailwindThemeColors,
-  V as tailwindTypographyConfig,
-  Y as textColors,
-  M as textStyles,
-  I as tokenSystemSummary,
-  Z as transitions,
-  u as typographyCSSVariables
+  n as allCSSVariables,
+  A as allCSSVariablesCSS,
+  B as animations,
+  F as baseColors,
+  ne as borderRadius,
+  G as chartColors,
+  t as colorCSSVariables,
+  le as componentRadius,
+  me as componentShadowMapping,
+  q as cssVariableColorTokens,
+  X as durations,
+  Y as easings,
+  ue as elevationShadows,
+  ge as focusRings,
+  ce as fontFamily,
+  he as fontSize,
+  pe as fontSizeWithMd,
+  be as fontWeight,
+  p as generateCSSVariablesCSS,
+  fe as glowEffects,
+  $ as keyframes,
+  xe as layoutSpacing,
+  ve as letterSpacing,
+  we as lineHeight,
+  r as motionCSSVariables,
+  ye as motionV2CSSVariables,
+  ke as motionV2Combined,
+  Se as motionV2Durations,
+  ze as motionV2Easings,
+  Oe as motionV2Fade,
+  Te as motionV2Scale,
+  Ce as motionV2Slide,
+  Ne as motionV2TailwindConfig,
+  Ee as motionV2Transitions,
+  Ie as primaryColoredShadows,
+  J as primaryColors,
+  o as radiusCSSVariables,
+  Q as reducedMotion,
+  Z as secondaryColors,
+  ee as semanticColors,
+  e as semanticSpacing,
+  Re as shadowBase,
+  a as shadowCSSVariables,
+  Ve as shadowOpacity,
+  Ke as spacing,
+  s as spacingCSSVariables,
+  de as springs,
+  re as surfaceColors,
+  te as tailwindMotionConfig,
+  _e as tailwindRadiusConfig,
+  We as tailwindShadowConfig,
+  Le as tailwindSpacingConfig,
+  g as tailwindThemeColors,
+  Me as tailwindTypographyConfig,
+  oe as textColors,
+  Ae as textStyles,
+  H as tokenSystemSummary,
+  ae as transitions,
+  i as typographyCSSVariables
 };