@tenerife.music/ui 1.0.13 → 1.0.16

package/dist/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var reactSlot = require('@radix-ui/react-slot');
-var classVarianceAuthority = require('class-variance-authority');
 var React49 = require('react');
+var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -49,13 +49,18 @@ var primaryColors = {
   100: "210 40% 96%",
   200: "217 32.6% 17.5%",
   300: "216 28% 26%",
-  400: "215 25% 27%",
-  500: "215 20% 35%",
-  // Base primary
-  600: "215 16% 47%",
-  700: "216 12% 54%",
-  800: "217 10% 62%",
-  900: "222 47.4% 11.2%",
+  400: "215 25% 30%",
+  // Adjusted for better progression
+  500: "215 20% 38%",
+  // Adjusted for better progression
+  600: "215 16% 45%",
+  // Adjusted for better progression
+  700: "216 12% 35%",
+  // Rebalanced for semantic strength (L* ~35)
+  800: "217 10% 28%",
+  // Adjusted for proper progression
+  900: "222 47.4% 18%",
+  // Adjusted for better progression
   950: "222 84% 4.9%"
   // Darkest blue
 };
@@ -65,12 +70,15 @@ var accentColors = {
   200: "280 60% 85%",
   300: "280 55% 75%",
   400: "280 50% 65%",
-  500: "280 70% 67%",
-  // Base accent (night mode primary)
-  600: "259 65% 58%",
-  700: "259 60% 50%",
-  800: "259 55% 45%",
-  900: "259 50% 40%",
+  500: "280 65% 72%",
+  // Adjusted for WCAG AA contrast (4.5:1) with dark text in night mode
+  600: "259 65% 59%",
+  // Default accent - lightened for better contrast vs secondary (L* ~59, was 52, 15 delta from secondary-600)
+  700: "259 60% 44%",
+  // Active state - rebalanced for semantic strength (L* ~44, 12 delta from secondary-700)
+  800: "259 55% 38%",
+  // Adjusted for proper progression
+  900: "259 50% 32%",
   950: "259 45% 30%"
 };
 var secondaryColors = {
@@ -79,12 +87,15 @@ var secondaryColors = {
   200: "173 100% 85%",
   300: "173 100% 70%",
   400: "173 100% 55%",
-  500: "173 100% 37%",
-  // Base secondary (Tenerife #00bfa6)
-  600: "173 100% 32%",
-  700: "173 95% 27%",
+  500: "173 100% 45%",
+  // Adjusted for better scale progression
+  600: "173 100% 44%",
+  // Default secondary - rebalanced for better contrast vs primary (L* ~44, was 38)
+  700: "173 95% 32%",
+  // Active state - rebalanced for semantic strength (L* ~32)
   800: "173 90% 22%",
-  900: "173 85% 17%",
+  // Primary variant - darkened for dominance (L* ~22, was 26)
+  900: "173 85% 20%",
   950: "173 80% 12%"
 };
 var surfaceColors = {
@@ -177,13 +188,13 @@ var chartColors = {
 var textColors = {
   day: {
     primary: "0 0% 9%",
-    // Almost black
+    // Almost black (neutral-900 equivalent)
     secondary: "0 0% 45%",
     // Medium gray
     tertiary: "0 0% 65%",
     // Light gray
-    muted: "0 0% 38%",
-    // Muted gray with stronger contrast
+    muted: "0 0% 42%",
+    // Muted gray - adjusted for WCAG AA contrast (4.5:1) on surface.elevated2
     inverse: "0 0% 100%"
     // White (for dark backgrounds)
   },
@@ -495,6 +506,139 @@ var ALERT_TOKENS = {
   }
 };
 
+// src/tokens/components/motion.ts
+var MOTION_TOKENS = {
+  /**
+   * 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
+    "1000": "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
+  }
+};
+
 // src/tokens/components/button.ts
 var BUTTON_TOKENS = {
   /**
@@ -527,25 +671,48 @@ var BUTTON_TOKENS = {
     vertical: {
       sm: "py-xs",
       // 4px (0.25rem) - maps to semanticSpacing.xs
-      md: "py-sm"
+      md: "py-sm",
       // 8px (0.5rem) - maps to semanticSpacing.sm
+      lg: "py-md"
+      // 16px (1rem) - maps to semanticSpacing.md - standardized for visual distinction
     }
   },
   /**
-   * Gap between icon and text
+   * Gap between icon and text by size
+   * Scales with button size for visual consistency
    */
-  gap: "gap-sm",
-  // 8px (0.5rem) - maps to semanticSpacing.sm
+  gap: {
+    sm: "gap-xs",
+    // 4px (0.25rem) - smaller gap for small buttons
+    md: "gap-sm",
+    // 8px (0.5rem) - medium gap for medium buttons
+    lg: "gap-md"
+    // 16px (1rem) - larger gap for large buttons
+  },
   /**
    * Border radius for all button sizes
+   * Consistent radius across sizes for visual harmony
+   *
+   * @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
+   * @rule References componentRadius.button.md (6px / 0.375rem) from Radius Authority
+   * @see docs/architecture/RADIUS_AUTHORITY_CONTRACT.md
    */
   radius: "rounded-md",
-  // 6px (0.375rem) - maps to borderRadius.md
+  // References componentRadius.button.md (6px / 0.375rem) - Radius Authority compliant
   /**
-   * Icon size within buttons
+   * Icon size within buttons by button size
+   * Scales proportionally with button size for visual balance
    */
-  iconSize: "size-4",
-  // 16px (1rem) - maps to spacing[4]
+  iconSize: {
+    sm: "size-3.5",
+    // 14px (0.875rem) - smaller icon for small buttons
+    md: "size-4",
+    // 16px (1rem) - medium icon for medium buttons
+    lg: "size-5",
+    // 20px (1.25rem) - larger icon for large buttons
+    icon: "size-4"
+    // 16px (1rem) - medium icon for icon-only buttons
+  },
   /**
    * Width tokens
    */
@@ -555,15 +722,19 @@ var BUTTON_TOKENS = {
   },
   /**
    * Font sizes by button size
-   * Maps to foundation typography fontSize tokens
+   * References foundation typography fontSize tokens from Typography Authority
+   *
+   * @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
+   * @rule All fontSize values reference Typography Authority tokens
+   * @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
    */
   fontSize: {
     sm: "text-xs",
-    // Maps to fontSize.xs[0]
+    // References fontSize.xs[0] from Typography Authority (~12px)
     md: "text-sm",
-    // Maps to fontSize.sm[0]
-    lg: "text-sm"
-    // Maps to fontSize.sm[0]
+    // References fontSize.sm[0] from Typography Authority (~14px)
+    lg: "text-base"
+    // References fontSize.base[0] from Typography Authority (~16px)
   },
   /**
    * Shadow tokens by variant
@@ -578,50 +749,137 @@ var BUTTON_TOKENS = {
   /**
    * Color tokens for button variants
    * Uses semantic color tokens that map to CSS variables
+   *
+   * State tokens (hover, active, disabled) use CSS variables from State Matrix.
+   * All states are injected via updateStateMatrixFromTokens() and consumed via arbitrary values.
+   * States react to Color Authority changes automatically through State Matrix.
+   *
+   * Interaction Authority Rules:
+   * - Hover (Priority 4): hover: prefix - ONLY when !disabled && !loading && pointer-events:auto
+   * - Active (Priority 3): active: prefix - ONLY when !disabled && !loading && mousedown
+   * - Focus (Priority 5): focus-visible: prefix - ONLY when !disabled && keyboard navigation
+   * - Disabled (Priority 1): disabled: prefix - Blocks ALL interactions
+   * - Loading (Priority 2): loading: prefix - Blocks hover/active (when implemented)
+   * - Base (Priority 6): No prefix - Default state, pointer-events: auto
+   *
+   * @enforcement TUNG_STATE_AUTHORITY_FOUNDATION_LOCK
+   * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+   * @rule States use CSS variables, not Tailwind variants
+   * @rule All state variables follow pattern: --{component}-{variant}-{state}-{property}
+   * @rule Visual states (colors) are SEPARATE from interaction states (pointer-events)
+   * @rule Hover MUST work with real mouse cursor, NOT just DevTools force state
+   * @rule Active MUST activate only on mousedown, NOT on hover
+   * @rule Focus MUST activate only on keyboard navigation, NOT on mouse click
+   *
+   * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
    */
   variant: {
     primary: {
-      background: "bg-primary",
-      // Primary background using CSS var
+      background: "bg-[hsl(var(--button-primary-base-bg))]",
+      // Primary base background - CSS variable from State Matrix
       text: "text-primary-foreground",
       // Primary text using CSS var
-      hover: "hover:bg-primary/90"
-      // Primary hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-primary-hover-bg))]",
+      // Primary hover - CSS variable from State Matrix (Priority 4: blocked by disabled/loading)
+      active: "active:bg-[hsl(var(--button-primary-active-bg))]",
+      // Primary active - CSS variable from State Matrix (Priority 3: blocked by disabled/loading, priority over hover)
+      focus: "focus-visible:bg-[hsl(var(--button-primary-focus-bg))]",
+      // Primary focus - CSS variable from State Matrix (Priority 5: keyboard navigation only)
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-primary-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix (Priority 1: blocks all)
+        text: "disabled:text-[hsl(var(--button-primary-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      },
+      loading: "bg-[hsl(var(--button-primary-loading-bg))]"
+      // Primary loading - CSS variable from State Matrix (Priority 2: blocks hover/active, used with aria-busy/data-loading when implemented)
     },
     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
+      hover: "hover:bg-[hsl(var(--button-secondary-hover-bg))]",
+      // Secondary hover - CSS variable from State Matrix
+      active: "active:bg-[hsl(var(--button-secondary-active-bg))]",
+      // Secondary active - CSS variable from State Matrix
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-secondary-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-secondary-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      }
     },
     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
+      hover: "hover:bg-[hsl(var(--button-accent-hover-bg))]",
+      // Accent hover - CSS variable from State Matrix
+      active: "active:bg-[hsl(var(--button-accent-active-bg))]",
+      // Accent active - CSS variable from State Matrix
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-accent-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-accent-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      }
     },
     outline: {
       border: "border border-input",
       // Input border using CSS var
       background: "bg-background",
       // Background using CSS var
+      text: "text-foreground",
+      // Foreground text using CSS var
       hover: {
-        background: "hover:bg-accent",
-        // Accent hover using CSS var
-        text: "hover:text-accent-foreground"
-        // Accent text using CSS var
+        background: "hover:bg-[hsl(var(--button-outline-hover-bg))]",
+        // Outline hover background - CSS variable from State Matrix
+        text: "hover:text-[hsl(var(--button-outline-hover-text))]",
+        // Outline hover text - CSS variable from State Matrix
+        border: "hover:border-[hsl(var(--button-outline-hover-border))]"
+        // Outline hover border - CSS variable from State Matrix
+      },
+      active: {
+        background: "active:bg-[hsl(var(--button-outline-active-bg))]",
+        // Outline active background - CSS variable from State Matrix
+        text: "active:text-[hsl(var(--button-outline-active-text))]",
+        // Outline active text - CSS variable from State Matrix
+        border: "active:border-[hsl(var(--button-outline-active-border))]"
+        // Outline active border - CSS variable from State Matrix
+      },
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-outline-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-outline-disabled-text))]",
+        // Disabled text - CSS variable from State Matrix
+        border: "disabled:border-[hsl(var(--button-outline-disabled-border))]"
+        // Disabled border - CSS variable from State Matrix
       }
     },
     ghost: {
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-foreground",
+      // Foreground text using CSS var
       hover: {
-        background: "hover:bg-accent",
-        // Accent hover using CSS var
-        text: "hover:text-accent-foreground"
-        // Accent text using CSS var
+        background: "hover:bg-[hsl(var(--button-ghost-hover-bg))]",
+        // Ghost hover background - CSS variable from State Matrix
+        text: "hover:text-[hsl(var(--button-ghost-hover-text))]"
+        // Ghost hover text - CSS variable from State Matrix
+      },
+      active: {
+        background: "active:bg-[hsl(var(--button-ghost-active-bg))]",
+        // Ghost active background - CSS variable from State Matrix
+        text: "active:text-[hsl(var(--button-ghost-active-text))]"
+        // Ghost active text - CSS variable from State Matrix
+      },
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-ghost-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-ghost-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
       }
     },
     destructive: {
@@ -629,16 +887,94 @@ var BUTTON_TOKENS = {
       // Destructive background using CSS var
       text: "text-destructive-foreground",
       // Destructive text using CSS var
-      hover: "hover:bg-destructive/90"
-      // Destructive hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-destructive-hover-bg))]",
+      // Destructive hover - CSS variable from State Matrix
+      active: "active:bg-[hsl(var(--button-destructive-active-bg))]",
+      // Destructive active - CSS variable from State Matrix
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-destructive-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-destructive-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      }
     }
   },
   /**
    * Transition tokens
+   * References Motion Authority tokens for consistent motion behavior
+   *
+   * @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
+   * @rule Uses MOTION_TOKENS.transitionPreset.colors from Motion Authority
+   * @rule Motion transitions MUST use canonical motion tokens only
+   * @see docs/architecture/MOTION_AUTHORITY_CONTRACT.md
    */
   transition: {
-    colors: "transition-colors"
-    // Color transition using motion tokens
+    colors: MOTION_TOKENS.transitionPreset.colors
+    // "transition-colors duration-normal ease-out" - Motion Authority compliant
+  },
+  /**
+   * Global state tokens
+   * Shared state tokens that apply across all variants
+   * Variant-specific states are defined in variant.*.active and variant.*.disabled
+   *
+   * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+   * @rule All interaction states MUST follow Interaction Authority Contract
+   * @rule State priority: disabled > loading > active > hover > focus-visible > base
+   * @rule Visual states (colors) are SEPARATE from interaction states (pointer-events, cursor)
+   * @rule All states MUST be browser-native (CSS pseudo-classes), NOT JavaScript-managed
+   */
+  state: {
+    /**
+     * Disabled state tokens
+     * Global disabled state tokens (variant-specific overrides in variant.*.disabled)
+     *
+     * Interaction Authority Rules:
+     * - Priority: 1 (Highest) - Blocks ALL interactions
+     * - MUST block hover, active, and focus states
+     * - MUST use disabled: prefix (never in base state)
+     * - Base state MUST have pointer-events: auto (default) for hover to work
+     *
+     * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+     * @enforcement TUNG_BUTTON_INTERACTION_FIX
+     * @rule Interaction Authority: pointer-events is NOT a visual token
+     * @rule pointer-events-none MUST use disabled: prefix (never in base state)
+     * @rule Base state MUST have pointer-events: auto (default) for hover to work
+     * @rule These tokens are applied in base but only activate when element is disabled
+     * @rule Hover is FORBIDDEN when disabled={true}
+     * @rule Active is FORBIDDEN when disabled={true}
+     * @rule Focus is FORBIDDEN when disabled={true} (for interactions)
+     *
+     * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
+     */
+    disabled: {
+      cursor: "disabled:cursor-not-allowed",
+      // Disabled cursor style (only applies when disabled)
+      pointerEvents: "disabled:pointer-events-none"
+      // Disable pointer events (only applies when disabled)
+    },
+    /**
+     * Focus state tokens
+     * Focus ring for keyboard navigation
+     *
+     * Interaction Authority Rules:
+     * - Priority: 5 - Lower than active and hover
+     * - MUST activate only on keyboard navigation (focus-visible: prefix)
+     * - MUST NOT activate on mouse click (use :focus-visible, not :focus)
+     * - MUST be blocked by disabled state
+     *
+     * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+     * @rule Focus MUST use focus-visible: prefix (keyboard navigation only)
+     * @rule Focus MUST be blocked when disabled={true}
+     * @rule Focus MUST NOT activate on mouse click
+     *
+     * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
+     */
+    focus: {
+      ring: "focus-visible:ring-1 focus-visible:ring-ring",
+      // Focus ring using semantic ring color
+      outline: "focus-visible:outline-none"
+      // Remove default outline (replaced by ring)
+    }
   }
 };
 
@@ -726,6 +1062,68 @@ var CARD_TOKENS = {
   }
 };
 
+// src/tokens/components/artist.ts
+var ARTIST_TOKENS = {
+  /**
+   * Image container tokens
+   * Layout classes for image container wrapper
+   */
+  image: {
+    /**
+     * Container layout tokens
+     * Positioning and sizing for image container
+     */
+    container: {
+      /**
+       * Base container layout
+       * Relative positioning, full width, overflow hidden
+       * Uses Tailwind layout utilities (allowed per architecture)
+       */
+      layout: "relative w-full overflow-hidden"
+    },
+    /**
+     * Image sizing tokens
+     * Full width and height for images
+     */
+    sizing: {
+      /**
+       * Full size image
+       * Uses Tailwind sizing utilities (allowed per architecture)
+       */
+      full: "h-full w-full"
+    },
+    /**
+     * Placeholder container tokens
+     * Layout for placeholder icon container when no image is provided
+     */
+    placeholder: {
+      /**
+       * Placeholder container layout
+       * Flex centering for placeholder icon
+       * Uses Tailwind layout utilities (allowed per architecture)
+       */
+      container: "flex h-full w-full items-center justify-center"
+    }
+  },
+  /**
+   * Footer border tokens
+   * Border styling for card footer separator
+   */
+  footer: {
+    /**
+     * Footer border tokens
+     * Top border separator for footer section
+     */
+    border: {
+      /**
+       * Footer border top
+       * Uses semantic border color token
+       */
+      top: "border-t border-border"
+    }
+  }
+};
+
 // src/tokens/spacing.ts
 var spacing = {
   // Zero spacing
@@ -989,139 +1387,44 @@ var tailwindSpacingConfig = {
 // src/tokens/components/data.ts
 var DATA_TOKENS = {
   /**
-   * Table Component Tokens
+   * Skeleton Component Tokens
    */
-  table: {
+  skeleton: {
     /**
-     * Table row heights by size
+     * Skeleton heights by variant
      * 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
+    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 for table
+     * Border radius by variant
+     * Maps to foundation borderRadius tokens
      */
     radius: {
-      default: "rounded-md"
+      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
     },
     /**
-     * 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 tokens
+     * Uses motion tokens for animations
      */
     animation: {
       pulse: "animate-pulse",
@@ -1148,97 +1451,6 @@ var DATA_TOKENS = {
       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
-    }
   }
 };
 
@@ -1298,139 +1510,6 @@ var ICON_TOKENS = {
   }
 };
 
-// src/tokens/components/motion.ts
-var MOTION_TOKENS = {
-  /**
-   * 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
-    "1000": "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
-  }
-};
-
 // src/tokens/components/domain.ts
 var DOMAIN_TOKENS = {
   /**
@@ -1583,7 +1662,7 @@ var DOMAIN_TOKENS = {
   },
   /**
    * Image tokens for card media
-   * Defines aspect ratio, radius, and overlay styles
+   * Defines aspect ratio, radius, overlay styles, and placeholder gradients
    */
   image: {
     /**
@@ -1606,6 +1685,40 @@ var DOMAIN_TOKENS = {
     overlay: {
       gradient: "bg-gradient-to-t from-black/60 via-transparent to-transparent"
       // Gradient overlay for image hover states
+    },
+    /**
+     * Placeholder gradient tokens for image placeholders
+     * Used when no image URL is provided
+     */
+    placeholder: {
+      gradient: "bg-gradient-to-br from-muted to-muted/50"
+      // Placeholder gradient background
+    }
+  },
+  /**
+   * Text tokens for card text elements
+   * Defines hover states and line clamping for titles and descriptions
+   */
+  text: {
+    /**
+     * Hover state tokens for text elements
+     * Used for interactive text elements like titles
+     */
+    hover: {
+      primary: "group-hover:text-primary"
+      // Hover state for primary text color
+    },
+    /**
+     * Line clamp tokens for text truncation
+     * Used for limiting text to specific number of lines
+     */
+    lineClamp: {
+      one: "line-clamp-1",
+      // Single line clamp
+      two: "line-clamp-2",
+      // Two line clamp
+      three: "line-clamp-3"
+      // Three line clamp
     }
   },
   /**
@@ -1828,7 +1941,95 @@ var DOMAIN_TOKENS = {
       height: "h-6"
       // References spacing[6] (1.5rem / 24px) via Tailwind
     }
-  }
+  },
+  /**
+   * CTA (Call-to-Action) button tokens for domain card components
+   * Provides PromoCard-specific CTA button styling tokens
+   * These tokens are semantically owned by domain card components, not by the Button component
+   * References foundation tokens (spacing, typography, radius, shadows, motion) for consistency
+   */
+  cta: {
+    /**
+     * CTA button styling tokens
+     * Used by PromoCard and other domain card components for CTA button elements
+     */
+    button: {
+      /**
+       * Button heights by size
+       * Maps to Tailwind height utilities: h-8, h-9
+       */
+      height: {
+        sm: "h-8",
+        // 32px (2rem) - compact size
+        md: "h-9"
+        // 36px (2.25rem) - default size
+      },
+      /**
+       * Button padding by size
+       * Horizontal and vertical padding values
+       * References semanticSpacing tokens
+       */
+      padding: {
+        horizontal: {
+          sm: "px-sm",
+          // 8px (0.5rem) - maps to semanticSpacing.sm
+          md: "px-md"
+          // 16px (1rem) - maps to semanticSpacing.md
+        },
+        vertical: {
+          sm: "py-xs"
+          // 4px (0.25rem) - maps to semanticSpacing.xs
+        }
+      },
+      /**
+       * Border radius for CTA buttons
+       * References borderRadius.md (6px / 0.375rem)
+       * Using Tailwind class "rounded-md" which maps to borderRadius.md
+       */
+      radius: "rounded-md",
+      // References borderRadius.md via Tailwind
+      /**
+       * 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]
+      },
+      /**
+       * Shadow tokens for CTA buttons
+       * Maps to foundation elevation shadow tokens
+       */
+      shadow: {
+        primary: "shadow"
+        // Maps to elevationShadows.xs (primary variant uses shadow)
+      },
+      /**
+       * Color tokens for CTA 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
+        }
+      },
+      /**
+       * Transition tokens for CTA buttons
+       * References MOTION_TOKENS for transitions
+       */
+      transition: {
+        colors: "transition-colors"
+        // Color transition using motion tokens
+      }
+    }
+  }
 };
 
 // src/tokens/components/input.ts
@@ -1931,40 +2132,6 @@ var INPUT_TOKENS = {
     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
@@ -2178,6 +2345,188 @@ var INPUT_TOKENS = {
   }
 };
 
+// src/tokens/components/textarea.ts
+var TEXTAREA_TOKENS = {
+  /**
+   * Shadow token
+   * Maps to foundation elevation shadow tokens
+   */
+  shadow: "shadow-sm",
+  // Maps to elevationShadows.sm
+  /**
+   * 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
+    }
+  },
+  /**
+   * 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: {
+    // 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))]"}
+  },
+  /**
+   * Size-based token structure
+   * Organized by size for easy access
+   */
+  size: {
+    xs: {
+      padding: {
+        horizontal: "px-xs",
+        vertical: "py-xs"
+      },
+      radius: "rounded-sm",
+      fontSize: "text-xs"},
+    sm: {
+      padding: {
+        horizontal: "px-sm",
+        vertical: "py-xs"
+      },
+      radius: "rounded-md",
+      fontSize: "text-sm"},
+    md: {
+      padding: {
+        horizontal: "px-sm",
+        vertical: "py-xs"
+      },
+      radius: "rounded-md",
+      fontSize: "text-base",
+      fontSizeResponsive: "md:text-sm"},
+    lg: {
+      padding: {
+        horizontal: "px-md",
+        vertical: "py-sm"
+      },
+      radius: "rounded-md",
+      fontSize: "text-base"},
+    xl: {
+      padding: {
+        horizontal: "px-lg",
+        vertical: "py-md"
+      },
+      radius: "rounded-lg",
+      fontSize: "text-lg"}
+  }
+};
+
+// src/tokens/components/form.ts
+var FORM_TOKENS = {
+  /**
+   * Label tokens
+   * Spacing and styling for labels
+   */
+  label: {
+    // 8px (0.5rem) - spacing between label and control
+    /**
+     * Color for required asterisk mark
+     */
+    requiredMark: "text-destructive"
+    // Color for required asterisk
+  }};
+
 // src/tokens/components/checkbox.ts
 var CHECKBOX_TOKENS = {
   /**
@@ -2952,8 +3301,16 @@ var TEXT_TOKENS = {
     // Maps to fontSize.base[0]
     lg: "text-lg",
     // Maps to fontSize.lg[0]
-    xl: "text-xl"
+    xl: "text-xl",
     // Maps to fontSize.xl[0]
+    "2xl": "text-2xl",
+    // Maps to fontSize.2xl[0]
+    "3xl": "text-3xl",
+    // Maps to fontSize.3xl[0]
+    "4xl": "text-4xl",
+    // Maps to fontSize.4xl[0]
+    "5xl": "text-5xl"
+    // Maps to fontSize.5xl[0]
   },
   /**
    * Font weights by weight variant
@@ -2978,6 +3335,8 @@ var TEXT_TOKENS = {
     // Maps to lineHeight.none
     tight: "leading-tight",
     // Maps to lineHeight.tight
+    snug: "leading-snug",
+    // Maps to lineHeight.snug
     normal: "leading-normal",
     // Maps to lineHeight.normal
     relaxed: "leading-relaxed",
@@ -3501,9 +3860,9 @@ var TOAST_TOKENS = {
       // Default opacity (hidden)
       groupHover: "group-hover:opacity-100",
       // Visible on group hover
-      focus: "focus:opacity-100",
+      focus: "focus-visible:opacity-100",
       // Visible on focus
-      focusRing: "focus:outline-none focus:ring-1"
+      focusRing: "focus-visible:outline-none focus-visible:ring-1"
       // Focus ring styling
     }
   }
@@ -4245,19 +4604,27 @@ var DROPDOWN_TOKENS = {
       // 256px
     }
   },
+  /**
+   * Width tokens
+   * Common width utilities
+   */
+  width: {
+    full: "w-full"
+    // Full width (100%)
+  },
   /**
    * Item tokens by size
    * Individual menu item
    */
   item: {
     background: {
-      focus: "focus:bg-[hsl(var(--accent))]",
+      focus: "focus-visible: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: "focus-visible:text-[hsl(var(--accent-foreground))]",
       // Focus text using CSS var
       selected: "text-[hsl(var(--accent-foreground))]"
       // Selected text using CSS var
@@ -4509,9 +4876,9 @@ var SELECT_TOKENS = {
     indicator: {
       size: "size-4"},
     focus: {
-      background: "focus:bg-[hsl(var(--accent))]",
+      background: "focus-visible:bg-[hsl(var(--accent))]",
       // Focus background using CSS var
-      text: "focus:text-[hsl(var(--accent-foreground))]"
+      text: "focus-visible:text-[hsl(var(--accent-foreground))]"
       // Focus text using CSS var
     },
     disabled: {
@@ -5054,26 +5421,314 @@ var MODAL_TOKENS = {
   }
 };
 
-// src/tokens/motion/v2.ts
-var motionV2Durations = {
-  fast: "150ms",
-  // Quick interactions
-  normal: "250ms",
-  // Default transitions
-  slow: "350ms",
-  // Emphasized animations
-  reduced: "0ms"
-  // For prefers-reduced-motion
-};
-var motionV2Easings = {
-  soft: "cubic-bezier(0.22, 1, 0.36, 1)",
-  // Gentle, smooth
-  standard: "cubic-bezier(0.4, 0, 0.2, 1)",
-  // Material Design standard
-  emphasized: "cubic-bezier(0.2, 0, 0, 1)"
-  // Strong, decisive
-};
-var motionV2Transitions = {
+// src/tokens/components/table.ts
+var TABLE_TOKENS = {
+  /**
+   * 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
+    }
+  },
+  /**
+   * 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: {
+    // 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
+  },
+  /**
+   * Border tokens for table
+   */
+  border: {
+    bottom: "border-b"
+    // Border bottom for rows and headers
+  },
+  /**
+   * Layout tokens for table container and base styles
+   */
+  layout: {
+    overflow: "overflow-x-auto",
+    // Table container overflow
+    table: "w-full border-collapse"
+    // Table base styles
+  },
+  /**
+   * Sticky header tokens
+   * For sticky header positioning and styling
+   */
+  sticky: {
+    header: "sticky top-0 z-10 bg-background"
+    // Sticky header styles
+  },
+  /**
+   * Expandable row tokens
+   * For expandable content styling
+   */
+  expandable: {
+    padding: "p-md",
+    // Expandable content padding - maps to semanticSpacing.md
+    container: "p-0",
+    // Expandable container padding
+    transition: "overflow-hidden transition-all duration-normal ease-in-out",
+    // Transition styles
+    expanded: "max-h-[100vh] opacity-100",
+    // Expanded state
+    collapsed: "max-h-0 opacity-0",
+    // Collapsed state
+    cursor: "cursor-pointer",
+    // Cursor for expandable rows
+    content: {
+      expanded: "block",
+      // Expanded content display
+      collapsed: "hidden"
+      // Collapsed content display
+    }
+  },
+  /**
+   * Loading state tokens
+   * For loading state cell styling
+   */
+  loading: {
+    cellPadding: "p-sm",
+    // Loading state cell padding - maps to semanticSpacing.sm
+    skeletonWidth: "w-full"
+    // Skeleton width
+  },
+  /**
+   * Empty state tokens
+   * For empty state cell styling
+   */
+  empty: {
+    padding: "p-8"
+    // Empty state padding - maps to semanticSpacing.2xl
+  },
+  /**
+   * Sortable header tokens
+   * For sortable header styling and interactions
+   */
+  sortable: {
+    hover: "hover:bg-muted/50",
+    // Sortable header hover
+    gap: "gap-2",
+    // Sort icon gap - maps to semanticSpacing.sm
+    cursor: "cursor-pointer select-none",
+    // Sortable cursor
+    container: "flex items-center",
+    // Sortable header container
+    icon: {
+      base: "inline-flex size-4 items-center text-muted-foreground transition-transform",
+      // Sort icon base styles
+      rotated: "rotate-180",
+      // Rotated state (descending)
+      inactive: "opacity-30"
+      // Inactive state (no sort)
+    }
+  }
+};
+
+// src/tokens/components/data-list.ts
+var DATA_LIST_TOKENS = {
+  /**
+   * Spacing tokens for DataList
+   * Maps to semantic spacing tokens
+   */
+  spacing: {
+    gap: "gap-md"},
+  /**
+   * Label width tokens (for desktop horizontal layout)
+   * Maps to Tailwind width utilities
+   */
+  labelWidth: {
+    // 96px (6rem) - small label width
+    md: "w-32"},
+  /**
+   * 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
+  },
+  /**
+   * Item tokens
+   * For individual DataList item styling
+   */
+  item: {
+    /**
+     * Border tokens for items
+     */
+    border: "border-b border-border last:border-0",
+    // Item borders
+    /**
+     * Responsive layout tokens
+     */
+    layout: {
+      mobile: "flex flex-col",
+      // Mobile layout - vertical
+      desktop: "md:flex-row md:items-center"
+      // Desktop layout - horizontal
+    }
+  },
+  /**
+   * Label tokens
+   * For DataList label styling
+   */
+  label: {
+    mobile: "mb-1 font-semibold text-foreground",
+    // Mobile label styles
+    desktop: "md:mb-0"
+    // Desktop label margin override
+  },
+  /**
+   * Value tokens
+   * For DataList value styling
+   */
+  value: {
+    color: "text-muted-foreground",
+    // Value text color
+    flex: "flex-1"
+    // Value flex grow
+  }
+};
+
+// src/tokens/components/empty-state.ts
+var EMPTY_STATE_TOKENS = {
+  /**
+   * Spacing tokens for EmptyState
+   * Maps to semantic spacing tokens
+   */
+  spacing: {
+    // 24px (1.5rem) - container padding - maps to semanticSpacing.lg
+    action: "mt-2"
+    // Action button margin top - maps to semanticSpacing.xs
+  },
+  /**
+   * Icon sizes by variant
+   * Maps to Tailwind size utilities
+   */
+  icon: {
+    size: {
+      sm: "size-8",
+      // 32px (2rem)
+      md: "size-12",
+      // 48px (3rem)
+      lg: "size-16"
+      // 64px (4rem)
+    },
+    container: "flex items-center justify-center text-muted-foreground"
+    // Icon container styles
+  },
+  /**
+   * 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
+      color: "text-foreground"
+      // Title text color
+    },
+    description: {
+      fontSize: "text-sm",
+      // Maps to fontSize.sm[0]
+      fontWeight: "font-normal",
+      // Maps to fontWeight.normal
+      color: "text-muted-foreground",
+      // Description text color
+      maxWidth: "max-w-md"
+      // Maximum width for description
+    }
+  },
+  /**
+   * Alignment tokens
+   * For text alignment in EmptyState
+   */
+  alignment: {
+    center: "text-center"}
+};
+
+// src/tokens/motion/v2.ts
+var motionV2Durations = {
+  fast: "150ms",
+  // Quick interactions
+  normal: "250ms",
+  // Default transitions
+  slow: "350ms",
+  // Emphasized animations
+  reduced: "0ms"
+  // For prefers-reduced-motion
+};
+var motionV2Easings = {
+  soft: "cubic-bezier(0.22, 1, 0.36, 1)",
+  // Gentle, smooth
+  standard: "cubic-bezier(0.4, 0, 0.2, 1)",
+  // Material Design standard
+  emphasized: "cubic-bezier(0.2, 0, 0, 1)"
+  // Strong, decisive
+};
+var motionV2Transitions = {
   fast: `${motionV2Durations.fast} ${motionV2Easings.standard}`,
   normal: `${motionV2Durations.normal} ${motionV2Easings.standard}`,
   slow: `${motionV2Durations.slow} ${motionV2Easings.emphasized}`,
@@ -5321,54 +5976,54 @@ var transitions = {
 var keyframes = {
   // Fade animations
   fadeIn: {
-    from: { opacity: 0 },
-    to: { opacity: 1 }
+    from: { opacity: "0" },
+    to: { opacity: "1" }
   },
   fadeOut: {
-    from: { opacity: 1 },
-    to: { opacity: 0 }
+    from: { opacity: "1" },
+    to: { opacity: "0" }
   },
   // Slide animations
   slideInUp: {
-    from: { transform: "translateY(100%)", opacity: 0 },
-    to: { transform: "translateY(0)", opacity: 1 }
+    from: { transform: "translateY(100%)", opacity: "0" },
+    to: { transform: "translateY(0)", opacity: "1" }
   },
   slideInDown: {
-    from: { transform: "translateY(-100%)", opacity: 0 },
-    to: { transform: "translateY(0)", opacity: 1 }
+    from: { transform: "translateY(-100%)", opacity: "0" },
+    to: { transform: "translateY(0)", opacity: "1" }
   },
   slideInLeft: {
-    from: { transform: "translateX(-100%)", opacity: 0 },
-    to: { transform: "translateX(0)", opacity: 1 }
+    from: { transform: "translateX(-100%)", opacity: "0" },
+    to: { transform: "translateX(0)", opacity: "1" }
   },
   slideInRight: {
-    from: { transform: "translateX(100%)", opacity: 0 },
-    to: { transform: "translateX(0)", opacity: 1 }
+    from: { transform: "translateX(100%)", opacity: "0" },
+    to: { transform: "translateX(0)", opacity: "1" }
   },
   slideOutUp: {
-    from: { transform: "translateY(0)", opacity: 1 },
-    to: { transform: "translateY(-100%)", opacity: 0 }
+    from: { transform: "translateY(0)", opacity: "1" },
+    to: { transform: "translateY(-100%)", opacity: "0" }
   },
   slideOutDown: {
-    from: { transform: "translateY(0)", opacity: 1 },
-    to: { transform: "translateY(100%)", opacity: 0 }
+    from: { transform: "translateY(0)", opacity: "1" },
+    to: { transform: "translateY(100%)", opacity: "0" }
   },
   slideOutLeft: {
-    from: { transform: "translateX(0)", opacity: 1 },
-    to: { transform: "translateX(-100%)", opacity: 0 }
+    from: { transform: "translateX(0)", opacity: "1" },
+    to: { transform: "translateX(-100%)", opacity: "0" }
   },
   slideOutRight: {
-    from: { transform: "translateX(0)", opacity: 1 },
-    to: { transform: "translateX(100%)", opacity: 0 }
+    from: { transform: "translateX(0)", opacity: "1" },
+    to: { transform: "translateX(100%)", opacity: "0" }
   },
   // Scale animations
   scaleIn: {
-    from: { transform: "scale(0.95)", opacity: 0 },
-    to: { transform: "scale(1)", opacity: 1 }
+    from: { transform: "scale(0.95)", opacity: "0" },
+    to: { transform: "scale(1)", opacity: "1" }
   },
   scaleOut: {
-    from: { transform: "scale(1)", opacity: 1 },
-    to: { transform: "scale(0.95)", opacity: 0 }
+    from: { transform: "scale(1)", opacity: "1" },
+    to: { transform: "scale(0.95)", opacity: "0" }
   },
   scaleUp: {
     from: { transform: "scale(1)" },
@@ -5389,8 +6044,8 @@ var keyframes = {
   },
   // Pulse and bounce
   pulse: {
-    "0%, 100%": { opacity: 1 },
-    "50%": { opacity: 0.5 }
+    "0%, 100%": { opacity: "1" },
+    "50%": { opacity: "0.5" }
   },
   bounce: {
     "0%, 100%": {
@@ -5412,7 +6067,7 @@ var keyframes = {
   ping: {
     "75%, 100%": {
       transform: "scale(2)",
-      opacity: 0
+      opacity: "0"
     }
   },
   // Accordion animations (for Radix UI)
@@ -6371,41 +7026,179 @@ var tokenSystemSummary = {
 
 // src/tokens/theme.ts
 var UI_COLORS = tailwindThemeColors;
+var FORBIDDEN_PATTERNS = [
+  // Raw color utilities (bg-red-500, text-blue-600, etc.)
+  // These are always forbidden as they bypass the color token system
+  /\b(bg|text|border|ring|outline)-(red|blue|green|yellow|purple|pink|indigo|gray|slate|zinc|neutral|stone|orange|amber|emerald|teal|cyan|sky|violet|fuchsia|rose)-\d+/,
+  // Raw spacing utilities with arbitrary numbers (p-4, m-2, gap-3, etc.)
+  // Allow semantic spacing tokens (px-sm, py-md, etc.) which use token names
+  /\b(p|m|px|py|pt|pb|pl|pr|mx|my|mt|mb|ml|mr|gap|space-[xy])-(\d+|\[)/,
+  // Raw size utilities with arbitrary numbers (w-4, h-6, etc.)
+  // Allow semantic size tokens (h-8, w-9, etc.) which are standard design system values
+  // Only flag arbitrary values like w-[123px] or h-[calc(...)]
+  /\b(w|h|min-w|min-h|max-w|max-h)-\[/
+];
+function validateTokenUsage(classes, context) {
+  if (process.env.NODE_ENV === "production") {
+    return;
+  }
+  for (const pattern of FORBIDDEN_PATTERNS) {
+    if (pattern.test(classes)) {
+      console.warn(
+        `[tokenCVA] Potential hardcoded Tailwind utility detected in ${context}:
+  "${classes}"
+  Pattern: ${pattern}
+  Please use token-based utilities instead (e.g., from component tokens).`
+      );
+    }
+  }
+}
+function validateVariantConfig(value, path, visited = /* @__PURE__ */ new Set()) {
+  if (value === void 0 || value === null) {
+    return;
+  }
+  const key = `${path}-${String(value)}`;
+  if (visited.has(key)) {
+    return;
+  }
+  visited.add(key);
+  if (typeof value === "string") {
+    validateTokenUsage(value, path);
+  } else if (Array.isArray(value)) {
+    value.forEach((item, index2) => {
+      validateVariantConfig(item, `${path}[${index2}]`, visited);
+    });
+  } else if (typeof value === "object") {
+    Object.entries(value).forEach(([key2, val]) => {
+      validateVariantConfig(val, `${path}.${key2}`, visited);
+    });
+  }
+}
+function tokenCVA(config) {
+  if (process.env.NODE_ENV !== "production") {
+    if (config.base) {
+      validateVariantConfig(config.base, "base");
+    }
+    if (config.variants) {
+      Object.entries(config.variants).forEach(([variantKey, variantValues]) => {
+        Object.entries(variantValues).forEach(([valueKey, value]) => {
+          validateVariantConfig(value, `variants.${variantKey}.${valueKey}`);
+        });
+      });
+    }
+    if (config.compoundVariants) {
+      config.compoundVariants.forEach((compound, index2) => {
+        if (compound.class) {
+          validateVariantConfig(compound.class, `compoundVariants[${index2}].class`);
+        }
+        if (compound.className) {
+          validateVariantConfig(compound.className, `compoundVariants[${index2}].className`);
+        }
+      });
+    }
+  }
+  return classVarianceAuthority.cva(config.base, {
+    variants: config.variants,
+    compoundVariants: config.compoundVariants,
+    defaultVariants: config.defaultVariants
+  });
+}
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-var buttonVariants = classVarianceAuthority.cva(
-  `inline-flex items-center justify-center ${BUTTON_TOKENS.gap} whitespace-nowrap ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.fontSize.md} font-medium ${BUTTON_TOKENS.transition.colors} focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:${BUTTON_TOKENS.iconSize} [&_svg]:shrink-0`,
-  {
-    variants: {
-      variant: {
-        primary: `${BUTTON_TOKENS.variant.primary.background} ${BUTTON_TOKENS.variant.primary.text} ${BUTTON_TOKENS.shadow.primary} ${BUTTON_TOKENS.variant.primary.hover}`,
-        secondary: `${BUTTON_TOKENS.variant.secondary.background} ${BUTTON_TOKENS.variant.secondary.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.secondary.hover}`,
-        accent: `${BUTTON_TOKENS.variant.accent.background} ${BUTTON_TOKENS.variant.accent.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.accent.hover}`,
-        outline: `${BUTTON_TOKENS.variant.outline.border} ${BUTTON_TOKENS.variant.outline.background} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.outline.hover.background} ${BUTTON_TOKENS.variant.outline.hover.text}`,
-        ghost: `${BUTTON_TOKENS.variant.ghost.hover.background} ${BUTTON_TOKENS.variant.ghost.hover.text}`,
-        destructive: `${BUTTON_TOKENS.variant.destructive.background} ${BUTTON_TOKENS.variant.destructive.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.destructive.hover}`
-      },
-      size: {
-        sm: `${BUTTON_TOKENS.height.sm} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.sm} ${BUTTON_TOKENS.padding.vertical.sm} ${BUTTON_TOKENS.fontSize.sm}`,
-        md: `${BUTTON_TOKENS.height.md} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.md} ${BUTTON_TOKENS.padding.vertical.md} ${BUTTON_TOKENS.fontSize.md}`,
-        lg: `${BUTTON_TOKENS.height.lg} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.lg} ${BUTTON_TOKENS.padding.vertical.md} ${BUTTON_TOKENS.fontSize.lg}`,
-        icon: `${BUTTON_TOKENS.height.icon} ${BUTTON_TOKENS.width.icon}`
-      }
+function formatDate(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }).format(new Date(date));
+}
+var buttonVariants = tokenCVA({
+  base: `inline-flex items-center justify-center whitespace-nowrap ${BUTTON_TOKENS.radius} font-medium ${BUTTON_TOKENS.transition.colors} ${BUTTON_TOKENS.state.focus.outline} ${BUTTON_TOKENS.state.focus.ring} ${BUTTON_TOKENS.state.disabled.cursor} ${BUTTON_TOKENS.state.disabled.pointerEvents} [&_svg]:pointer-events-none [&_svg]:shrink-0`,
+  variants: {
+    variant: {
+      primary: `${BUTTON_TOKENS.variant.primary.background} ${BUTTON_TOKENS.variant.primary.text} ${BUTTON_TOKENS.shadow.primary} ${BUTTON_TOKENS.variant.primary.hover} ${BUTTON_TOKENS.variant.primary.active} ${BUTTON_TOKENS.variant.primary.focus} ${BUTTON_TOKENS.variant.primary.disabled.background} ${BUTTON_TOKENS.variant.primary.disabled.text}`,
+      secondary: `${BUTTON_TOKENS.variant.secondary.background} ${BUTTON_TOKENS.variant.secondary.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.secondary.hover} ${BUTTON_TOKENS.variant.secondary.active} ${BUTTON_TOKENS.variant.secondary.disabled.background} ${BUTTON_TOKENS.variant.secondary.disabled.text}`,
+      accent: `${BUTTON_TOKENS.variant.accent.background} ${BUTTON_TOKENS.variant.accent.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.accent.hover} ${BUTTON_TOKENS.variant.accent.active} ${BUTTON_TOKENS.variant.accent.disabled.background} ${BUTTON_TOKENS.variant.accent.disabled.text}`,
+      outline: `${BUTTON_TOKENS.variant.outline.border} ${BUTTON_TOKENS.variant.outline.background} ${BUTTON_TOKENS.variant.outline.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.outline.hover.background} ${BUTTON_TOKENS.variant.outline.hover.text} ${BUTTON_TOKENS.variant.outline.hover.border} ${BUTTON_TOKENS.variant.outline.active.background} ${BUTTON_TOKENS.variant.outline.active.text} ${BUTTON_TOKENS.variant.outline.active.border} ${BUTTON_TOKENS.variant.outline.disabled.background} ${BUTTON_TOKENS.variant.outline.disabled.text} ${BUTTON_TOKENS.variant.outline.disabled.border}`,
+      ghost: `${BUTTON_TOKENS.variant.ghost.background} ${BUTTON_TOKENS.variant.ghost.text} ${BUTTON_TOKENS.variant.ghost.hover.background} ${BUTTON_TOKENS.variant.ghost.hover.text} ${BUTTON_TOKENS.variant.ghost.active.background} ${BUTTON_TOKENS.variant.ghost.active.text} ${BUTTON_TOKENS.variant.ghost.disabled.background} ${BUTTON_TOKENS.variant.ghost.disabled.text}`,
+      destructive: `${BUTTON_TOKENS.variant.destructive.background} ${BUTTON_TOKENS.variant.destructive.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.destructive.hover} ${BUTTON_TOKENS.variant.destructive.active} ${BUTTON_TOKENS.variant.destructive.disabled.background} ${BUTTON_TOKENS.variant.destructive.disabled.text}`
     },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
+    size: {
+      sm: `${BUTTON_TOKENS.height.sm} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.sm} ${BUTTON_TOKENS.padding.vertical.sm} ${BUTTON_TOKENS.fontSize.sm} ${BUTTON_TOKENS.gap.sm} [&_svg]:${BUTTON_TOKENS.iconSize.sm}`,
+      md: `${BUTTON_TOKENS.height.md} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.md} ${BUTTON_TOKENS.padding.vertical.md} ${BUTTON_TOKENS.fontSize.md} ${BUTTON_TOKENS.gap.md} [&_svg]:${BUTTON_TOKENS.iconSize.md}`,
+      lg: `${BUTTON_TOKENS.height.lg} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.lg} ${BUTTON_TOKENS.padding.vertical.md} ${BUTTON_TOKENS.fontSize.lg} ${BUTTON_TOKENS.gap.lg} [&_svg]:${BUTTON_TOKENS.iconSize.lg}`,
+      icon: `${BUTTON_TOKENS.height.icon} ${BUTTON_TOKENS.width.icon} [&_svg]:${BUTTON_TOKENS.iconSize.icon}`
     }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
   }
-);
+});
 var Button = React49__namespace.forwardRef(
   ({ className, variant, size: size3, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
-    return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { className: cn(buttonVariants({ variant, size: size3, className })), ref, ...props, children: [
-      leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center", children: leftIcon }),
+    const finalClassName = cn(buttonVariants({ variant, size: size3, className }));
+    const iconSizeMap = {
+      "size-3.5": "[&_svg]:w-3.5 [&_svg]:h-3.5",
+      "size-4": "[&_svg]:w-4 [&_svg]:h-4",
+      "size-5": "[&_svg]:w-5 [&_svg]:h-5"
+    };
+    const iconSizeToken = size3 ? BUTTON_TOKENS.iconSize[size3] : BUTTON_TOKENS.iconSize.md;
+    const iconSizeClass = iconSizeMap[iconSizeToken] || "[&_svg]:w-4 [&_svg]:h-4";
+    if (typeof window !== "undefined" && variant === "primary") {
+      const hasHoverClass = finalClassName.includes(
+        "hover:bg-[hsl(var(--button-primary-hover-bg))]"
+      );
+      const hasActiveClass = finalClassName.includes(
+        "active:bg-[hsl(var(--button-primary-active-bg))]"
+      );
+      fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          location: "button.tsx:137",
+          message: "Button className check (State Authority Contract)",
+          data: {
+            variant,
+            size: size3,
+            className: finalClassName,
+            hasHoverClass,
+            hasActiveClass,
+            hoverClassInString: finalClassName.includes("hover"),
+            allClasses: finalClassName.split(" ").filter((c) => c.includes("hover") || c.includes("active") || c.includes("disabled"))
+          },
+          timestamp: Date.now(),
+          sessionId: "debug-session",
+          runId: "state-authority-contract",
+          hypothesisId: "A"
+        })
+      }).catch(() => {
+      });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { className: finalClassName, ref, ...props, children: [
+      leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn(
+            "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current",
+            iconSizeClass
+          ),
+          children: leftIcon
+        }
+      ),
       children,
-      rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center", children: rightIcon })
+      rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn(
+            "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current",
+            iconSizeClass
+          ),
+          children: rightIcon
+        }
+      )
     ] });
   }
 );
@@ -6500,14 +7293,14 @@ Alert.displayName = "Alert";
 var bodyVariants = classVarianceAuthority.cva("font-sans text-foreground", {
   variants: {
     size: {
-      md: "text-md leading-relaxed tracking-normal",
-      lg: "text-lg leading-relaxed tracking-normal"
+      md: `${TEXT_TOKENS.fontSize.md} ${TEXT_TOKENS.lineHeight.relaxed} ${TEXT_TOKENS.letterSpacing.normal}`,
+      lg: `${TEXT_TOKENS.fontSize.lg} ${TEXT_TOKENS.lineHeight.relaxed} ${TEXT_TOKENS.letterSpacing.normal}`
     },
     weight: {
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold"
+      normal: TEXT_TOKENS.fontWeight.normal,
+      medium: TEXT_TOKENS.fontWeight.medium,
+      semibold: TEXT_TOKENS.fontWeight.semibold,
+      bold: TEXT_TOKENS.fontWeight.bold
     },
     muted: {
       true: "text-muted-foreground",
@@ -6535,22 +7328,31 @@ var Body = React49__namespace.forwardRef(
   }
 );
 Body.displayName = "Body";
-var captionVariants = classVarianceAuthority.cva("font-sans text-foreground", {
-  variants: {
-    weight: {
-      normal: "font-normal",
-      medium: "font-medium"
+var captionVariants = classVarianceAuthority.cva(
+  [
+    "font-sans",
+    "text-foreground",
+    TEXT_TOKENS.fontSize.xs,
+    TEXT_TOKENS.lineHeight.tight,
+    TEXT_TOKENS.letterSpacing.wide
+  ].filter(Boolean).join(" "),
+  {
+    variants: {
+      weight: {
+        normal: TEXT_TOKENS.fontWeight.normal,
+        medium: TEXT_TOKENS.fontWeight.medium
+      },
+      muted: {
+        true: "text-muted-foreground",
+        false: ""
+      }
     },
-    muted: {
-      true: "text-muted-foreground",
-      false: ""
+    defaultVariants: {
+      weight: "normal",
+      muted: true
     }
-  },
-  defaultVariants: {
-    weight: "normal",
-    muted: true
   }
-});
+);
 var Caption = React49__namespace.forwardRef(
   ({ className, weight, muted, as = "span", children, ...props }, ref) => {
     const Component = as;
@@ -6558,11 +7360,7 @@ var Caption = React49__namespace.forwardRef(
       Component,
       {
         ref,
-        className: cn(
-          "text-xs leading-tight tracking-wide",
-          captionVariants({ weight, muted }),
-          className
-        ),
+        className: cn(captionVariants({ weight, muted }), className),
         ...props,
         children
       }
@@ -6570,11 +7368,43 @@ var Caption = React49__namespace.forwardRef(
   }
 );
 Caption.displayName = "Caption";
+
+// src/tokens/components/code.ts
+var CODE_TOKENS = {
+  /**
+   * Background color tokens
+   * Uses semantic color tokens
+   */
+  background: {
+    muted: "bg-muted"
+    // Muted background for code blocks
+  },
+  /**
+   * Border radius tokens
+   * Maps to foundation borderRadius tokens
+   */
+  radius: {
+    inline: "rounded",
+    // Small radius for inline code
+    block: "rounded-md"
+    // Medium radius for code blocks
+  },
+  /**
+   * Padding tokens
+   * Maps to foundation spacing tokens
+   */
+  padding: {
+    inline: "px-xs py-0.5",
+    // 4px horizontal, 4px vertical for inline code
+    block: "p-md"
+    // 16px padding for code blocks
+  }
+};
 var codeVariants = classVarianceAuthority.cva("font-mono text-foreground", {
   variants: {
     variant: {
-      inline: "rounded bg-muted px-xs py-0.5 text-sm font-semibold",
-      block: "block rounded-md bg-muted p-md text-sm font-semibold"
+      inline: `${CODE_TOKENS.radius.inline} ${CODE_TOKENS.background.muted} ${CODE_TOKENS.padding.inline} ${TEXT_TOKENS.fontSize.sm} ${TEXT_TOKENS.fontWeight.semibold}`,
+      block: `block ${CODE_TOKENS.radius.block} ${CODE_TOKENS.background.muted} ${CODE_TOKENS.padding.block} ${TEXT_TOKENS.fontSize.sm} ${TEXT_TOKENS.fontWeight.semibold}`
     },
     muted: {
       true: "text-muted-foreground",
@@ -6604,19 +7434,19 @@ Code.displayName = "Code";
 var displayVariants = classVarianceAuthority.cva("font-display text-foreground", {
   variants: {
     size: {
-      xl: "text-xl leading-normal tracking-normal",
-      "2xl": "text-2xl leading-tight tracking-tight",
-      "3xl": "text-3xl leading-tight tracking-tight",
-      "4xl": "text-4xl leading-none tracking-tight"
+      xl: `${TEXT_TOKENS.fontSize.xl} ${TEXT_TOKENS.lineHeight.normal} ${TEXT_TOKENS.letterSpacing.normal}`,
+      "2xl": `${TEXT_TOKENS.fontSize["2xl"]} ${TEXT_TOKENS.lineHeight.tight} ${TEXT_TOKENS.letterSpacing.tight}`,
+      "3xl": `${TEXT_TOKENS.fontSize["3xl"]} ${TEXT_TOKENS.lineHeight.tight} ${TEXT_TOKENS.letterSpacing.tight}`,
+      "4xl": `${TEXT_TOKENS.fontSize["4xl"]} ${TEXT_TOKENS.lineHeight.none} ${TEXT_TOKENS.letterSpacing.tight}`
     },
     weight: {
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold"
-    },
-    muted: {
-      true: "text-muted-foreground",
+      normal: TEXT_TOKENS.fontWeight.normal,
+      medium: TEXT_TOKENS.fontWeight.medium,
+      semibold: TEXT_TOKENS.fontWeight.semibold,
+      bold: TEXT_TOKENS.fontWeight.bold
+    },
+    muted: {
+      true: "text-muted-foreground",
       false: ""
     }
   },
@@ -6645,149 +7475,87 @@ var Display = React49__namespace.forwardRef(
   }
 );
 Display.displayName = "Display";
+var levelConfig = {
+  1: [
+    TEXT_TOKENS.fontSize["5xl"],
+    TEXT_TOKENS.fontWeight.bold,
+    TEXT_TOKENS.lineHeight.tight,
+    TEXT_TOKENS.letterSpacing.tight
+  ],
+  2: [
+    TEXT_TOKENS.fontSize["4xl"],
+    TEXT_TOKENS.fontWeight.bold,
+    TEXT_TOKENS.lineHeight.tight,
+    TEXT_TOKENS.letterSpacing.tight
+  ],
+  3: [
+    TEXT_TOKENS.fontSize["3xl"],
+    TEXT_TOKENS.fontWeight.semibold,
+    TEXT_TOKENS.lineHeight.snug,
+    TEXT_TOKENS.letterSpacing.normal
+  ],
+  4: [
+    TEXT_TOKENS.fontSize["2xl"],
+    TEXT_TOKENS.fontWeight.semibold,
+    TEXT_TOKENS.lineHeight.snug,
+    TEXT_TOKENS.letterSpacing.normal
+  ],
+  5: [
+    TEXT_TOKENS.fontSize.xl,
+    TEXT_TOKENS.fontWeight.medium,
+    TEXT_TOKENS.lineHeight.normal,
+    TEXT_TOKENS.letterSpacing.normal
+  ],
+  6: [
+    TEXT_TOKENS.fontSize.lg,
+    TEXT_TOKENS.fontWeight.medium,
+    TEXT_TOKENS.lineHeight.normal,
+    TEXT_TOKENS.letterSpacing.normal
+  ]
+};
+var levelVariants = Object.entries(levelConfig).reduce(
+  (acc, [level, [fontSize2, defaultWeight, lineHeight2, letterSpacing2]]) => {
+    acc[Number(level)] = `${fontSize2} ${defaultWeight} ${lineHeight2} ${letterSpacing2}`;
+    return acc;
+  },
+  {}
+);
+var generateWeightVariants = () => {
+  const weights = [
+    "normal",
+    "medium",
+    "semibold",
+    "bold"
+  ];
+  const levels = [1, 2, 3, 4, 5, 6];
+  const variants = [];
+  for (const level of levels) {
+    const [fontSize2, , lineHeight2, letterSpacing2] = levelConfig[level];
+    for (const weight of weights) {
+      variants.push({
+        level,
+        weight,
+        class: `${fontSize2} ${TEXT_TOKENS.fontWeight[weight]} ${lineHeight2} ${letterSpacing2}`
+      });
+    }
+  }
+  return variants;
+};
 var headingVariants = classVarianceAuthority.cva("font-display text-foreground", {
   variants: {
-    level: {
-      1: "text-5xl font-bold leading-tight tracking-tight",
-      2: "text-4xl font-bold leading-tight tracking-tight",
-      3: "text-3xl font-semibold leading-snug tracking-normal",
-      4: "text-2xl font-semibold leading-snug tracking-normal",
-      5: "text-xl font-medium leading-normal tracking-normal",
-      6: "text-lg font-medium leading-normal tracking-normal"
-    },
+    level: levelVariants,
     weight: {
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold"
+      normal: TEXT_TOKENS.fontWeight.normal,
+      medium: TEXT_TOKENS.fontWeight.medium,
+      semibold: TEXT_TOKENS.fontWeight.semibold,
+      bold: TEXT_TOKENS.fontWeight.bold
     },
     muted: {
       true: "text-muted-foreground",
       false: ""
     }
   },
-  compoundVariants: [
-    {
-      level: 1,
-      weight: "normal",
-      class: "text-5xl font-normal"
-    },
-    {
-      level: 1,
-      weight: "medium",
-      class: "text-5xl font-medium"
-    },
-    {
-      level: 1,
-      weight: "semibold",
-      class: "text-5xl font-semibold"
-    },
-    {
-      level: 1,
-      weight: "bold",
-      class: "text-5xl font-bold"
-    },
-    {
-      level: 2,
-      weight: "normal",
-      class: "text-4xl font-normal"
-    },
-    {
-      level: 2,
-      weight: "medium",
-      class: "text-4xl font-medium"
-    },
-    {
-      level: 2,
-      weight: "semibold",
-      class: "text-4xl font-semibold"
-    },
-    {
-      level: 2,
-      weight: "bold",
-      class: "text-4xl font-bold"
-    },
-    {
-      level: 3,
-      weight: "normal",
-      class: "text-3xl font-normal"
-    },
-    {
-      level: 3,
-      weight: "medium",
-      class: "text-3xl font-medium"
-    },
-    {
-      level: 3,
-      weight: "semibold",
-      class: "text-3xl font-semibold"
-    },
-    {
-      level: 3,
-      weight: "bold",
-      class: "text-3xl font-bold"
-    },
-    {
-      level: 4,
-      weight: "normal",
-      class: "text-2xl font-normal"
-    },
-    {
-      level: 4,
-      weight: "medium",
-      class: "text-2xl font-medium"
-    },
-    {
-      level: 4,
-      weight: "semibold",
-      class: "text-2xl font-semibold"
-    },
-    {
-      level: 4,
-      weight: "bold",
-      class: "text-2xl font-bold"
-    },
-    {
-      level: 5,
-      weight: "normal",
-      class: "text-xl font-normal"
-    },
-    {
-      level: 5,
-      weight: "medium",
-      class: "text-xl font-medium"
-    },
-    {
-      level: 5,
-      weight: "semibold",
-      class: "text-xl font-semibold"
-    },
-    {
-      level: 5,
-      weight: "bold",
-      class: "text-xl font-bold"
-    },
-    {
-      level: 6,
-      weight: "normal",
-      class: "text-lg font-normal"
-    },
-    {
-      level: 6,
-      weight: "medium",
-      class: "text-lg font-medium"
-    },
-    {
-      level: 6,
-      weight: "semibold",
-      class: "text-lg font-semibold"
-    },
-    {
-      level: 6,
-      weight: "bold",
-      class: "text-lg font-bold"
-    }
-  ],
+  compoundVariants: generateWeightVariants(),
   defaultVariants: {
     level: 1,
     muted: false
@@ -6811,8 +7579,8 @@ Heading.displayName = "Heading";
 var leadVariants = classVarianceAuthority.cva("font-sans text-foreground", {
   variants: {
     size: {
-      lg: "text-lg leading-normal tracking-normal",
-      xl: "text-xl leading-normal tracking-normal"
+      lg: `${TEXT_TOKENS.fontSize.lg} ${TEXT_TOKENS.lineHeight.normal} ${TEXT_TOKENS.letterSpacing.normal}`,
+      xl: `${TEXT_TOKENS.fontSize.xl} ${TEXT_TOKENS.lineHeight.normal} ${TEXT_TOKENS.letterSpacing.normal}`
     },
     muted: {
       true: "text-muted-foreground",
@@ -6949,7 +7717,7 @@ function getSpacingPx(token) {
   return 4;
 }
 var selectTriggerVariants = classVarianceAuthority.cva(
-  `flex items-center justify-between outline-none ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed [&>span]:line-clamp-1`,
+  `flex items-center justify-between outline-none ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed [&>span]:line-clamp-1`,
   {
     variants: {
       size: {
@@ -7408,7 +8176,7 @@ var ModalClose = React49__namespace.forwardRef(
           MODAL_TOKENS.close.radius,
           MODAL_TOKENS.close.opacity.default,
           MODAL_TOKENS.close.opacity.hover,
-          "ring-offset-background transition-opacity focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+          "ring-offset-background transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
           className
         ),
         ...props,
@@ -8000,8 +8768,10 @@ var Input = React49__namespace.forwardRef(
       }
       return void 0;
     });
+    const baseVariant = getBaseValue(variant);
+    const baseSize = getBaseValue(size3);
     const inputClasses = cn(
-      inputVariants({ variant, size: size3, state, fullWidth }),
+      inputVariants({ variant: baseVariant, size: baseSize, state, fullWidth }),
       // Add padding for icons if present
       iconLeft && INPUT_TOKENS.icon.paddingLeft,
       iconRight && INPUT_TOKENS.icon.paddingRight,
@@ -8339,31 +9109,31 @@ var Radio = React49__namespace.forwardRef(
 );
 Radio.displayName = "Radio";
 var textareaVariants = classVarianceAuthority.cva(
-  `flex min-h-[80px] ${INPUT_TOKENS.shadow} ${MOTION_TOKENS.transition.colors} disabled:cursor-not-allowed focus-visible:outline-none resize-y`,
+  `flex min-h-[80px] ${TEXTAREA_TOKENS.shadow} ${MOTION_TOKENS.transition.colors} disabled:cursor-not-allowed focus-visible:outline-none resize-y`,
   {
     variants: {
       variant: {
-        primary: `${INPUT_TOKENS.variant.primary.border} ${INPUT_TOKENS.variant.primary.background} ${INPUT_TOKENS.variant.primary.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.primary.focus}`,
-        secondary: `${INPUT_TOKENS.variant.secondary.border} ${INPUT_TOKENS.variant.secondary.background} ${INPUT_TOKENS.variant.secondary.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.secondary.focus}`,
-        outline: `${INPUT_TOKENS.variant.outline.border} ${INPUT_TOKENS.variant.outline.background} ${INPUT_TOKENS.variant.outline.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.outline.focus}`,
-        ghost: `${INPUT_TOKENS.variant.ghost.border} ${INPUT_TOKENS.variant.ghost.background} ${INPUT_TOKENS.variant.ghost.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.ghost.focus}`,
-        destructive: `${INPUT_TOKENS.variant.destructive.border} ${INPUT_TOKENS.variant.destructive.background} ${INPUT_TOKENS.variant.destructive.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.destructive.focus}`
+        primary: `${TEXTAREA_TOKENS.variant.primary.border} ${TEXTAREA_TOKENS.variant.primary.background} ${TEXTAREA_TOKENS.variant.primary.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.primary.focus}`,
+        secondary: `${TEXTAREA_TOKENS.variant.secondary.border} ${TEXTAREA_TOKENS.variant.secondary.background} ${TEXTAREA_TOKENS.variant.secondary.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.secondary.focus}`,
+        outline: `${TEXTAREA_TOKENS.variant.outline.border} ${TEXTAREA_TOKENS.variant.outline.background} ${TEXTAREA_TOKENS.variant.outline.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.outline.focus}`,
+        ghost: `${TEXTAREA_TOKENS.variant.ghost.border} ${TEXTAREA_TOKENS.variant.ghost.background} ${TEXTAREA_TOKENS.variant.ghost.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.ghost.focus}`,
+        destructive: `${TEXTAREA_TOKENS.variant.destructive.border} ${TEXTAREA_TOKENS.variant.destructive.background} ${TEXTAREA_TOKENS.variant.destructive.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.destructive.focus}`
       },
       size: {
-        xs: `${INPUT_TOKENS.size.xs.padding.horizontal} ${INPUT_TOKENS.size.xs.padding.vertical} ${INPUT_TOKENS.size.xs.radius} ${INPUT_TOKENS.size.xs.fontSize}`,
-        sm: `${INPUT_TOKENS.size.sm.padding.horizontal} ${INPUT_TOKENS.size.sm.padding.vertical} ${INPUT_TOKENS.size.sm.radius} ${INPUT_TOKENS.size.sm.fontSize}`,
-        md: `${INPUT_TOKENS.size.md.padding.horizontal} ${INPUT_TOKENS.size.md.padding.vertical} ${INPUT_TOKENS.size.md.radius} ${INPUT_TOKENS.size.md.fontSize} ${INPUT_TOKENS.size.md.fontSizeResponsive}`,
-        lg: `${INPUT_TOKENS.size.lg.padding.horizontal} ${INPUT_TOKENS.size.lg.padding.vertical} ${INPUT_TOKENS.size.lg.radius} ${INPUT_TOKENS.size.lg.fontSize}`,
-        xl: `${INPUT_TOKENS.size.xl.padding.horizontal} ${INPUT_TOKENS.size.xl.padding.vertical} ${INPUT_TOKENS.size.xl.radius} ${INPUT_TOKENS.size.xl.fontSize}`
+        xs: `${TEXTAREA_TOKENS.size.xs.padding.horizontal} ${TEXTAREA_TOKENS.size.xs.padding.vertical} ${TEXTAREA_TOKENS.size.xs.radius} ${TEXTAREA_TOKENS.size.xs.fontSize}`,
+        sm: `${TEXTAREA_TOKENS.size.sm.padding.horizontal} ${TEXTAREA_TOKENS.size.sm.padding.vertical} ${TEXTAREA_TOKENS.size.sm.radius} ${TEXTAREA_TOKENS.size.sm.fontSize}`,
+        md: `${TEXTAREA_TOKENS.size.md.padding.horizontal} ${TEXTAREA_TOKENS.size.md.padding.vertical} ${TEXTAREA_TOKENS.size.md.radius} ${TEXTAREA_TOKENS.size.md.fontSize} ${TEXTAREA_TOKENS.size.md.fontSizeResponsive}`,
+        lg: `${TEXTAREA_TOKENS.size.lg.padding.horizontal} ${TEXTAREA_TOKENS.size.lg.padding.vertical} ${TEXTAREA_TOKENS.size.lg.radius} ${TEXTAREA_TOKENS.size.lg.fontSize}`,
+        xl: `${TEXTAREA_TOKENS.size.xl.padding.horizontal} ${TEXTAREA_TOKENS.size.xl.padding.vertical} ${TEXTAREA_TOKENS.size.xl.radius} ${TEXTAREA_TOKENS.size.xl.fontSize}`
       },
       state: {
-        default: `${INPUT_TOKENS.state.border.default} ${INPUT_TOKENS.state.background.default} ${INPUT_TOKENS.state.text.default} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.state.border.focus}`,
-        error: `${INPUT_TOKENS.state.border.error} ${INPUT_TOKENS.state.background.default} ${INPUT_TOKENS.state.text.default} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.state.border.focus}`,
-        success: `${INPUT_TOKENS.state.border.success} ${INPUT_TOKENS.state.background.default} ${INPUT_TOKENS.state.text.default} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.state.border.focus}`,
-        disabled: `${INPUT_TOKENS.state.border.disabled} ${INPUT_TOKENS.state.background.disabled} ${INPUT_TOKENS.state.text.default} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.state.text.disabled}`
+        default: `${TEXTAREA_TOKENS.state.border.default} ${TEXTAREA_TOKENS.state.background.default} ${TEXTAREA_TOKENS.state.text.default} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.state.border.focus}`,
+        error: `${TEXTAREA_TOKENS.state.border.error} ${TEXTAREA_TOKENS.state.background.default} ${TEXTAREA_TOKENS.state.text.default} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.state.border.focus}`,
+        success: `${TEXTAREA_TOKENS.state.border.success} ${TEXTAREA_TOKENS.state.background.default} ${TEXTAREA_TOKENS.state.text.default} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.state.border.focus}`,
+        disabled: `${TEXTAREA_TOKENS.state.border.disabled} ${TEXTAREA_TOKENS.state.background.disabled} ${TEXTAREA_TOKENS.state.text.default} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.state.text.disabled}`
       },
       fullWidth: {
-        true: INPUT_TOKENS.width.full,
+        true: TEXTAREA_TOKENS.width.full,
         false: ""
       }
     },
@@ -8407,7 +9177,7 @@ var Textarea = React49__namespace.forwardRef(
     const currentLength = typeof currentValue === "string" ? currentValue.length : 0;
     const shouldShowCounter = showCharacterCount && maxLength !== void 0;
     if (shouldShowCounter) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", fullWidth !== false && INPUT_TOKENS.width.full), children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", fullWidth !== false && TEXTAREA_TOKENS.width.full), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "textarea",
           {
@@ -8427,11 +9197,11 @@ var Textarea = React49__namespace.forwardRef(
           {
             className: cn(
               "absolute",
-              INPUT_TOKENS.message.position.bottom,
-              INPUT_TOKENS.message.position.right,
+              TEXTAREA_TOKENS.message.position.bottom,
+              TEXTAREA_TOKENS.message.position.right,
               TEXT_TOKENS.fontSize.xs,
-              INPUT_TOKENS.message.color.default,
-              currentLength > maxLength && INPUT_TOKENS.message.color.error
+              TEXTAREA_TOKENS.message.color.default,
+              currentLength > maxLength && TEXTAREA_TOKENS.message.color.error
             ),
             children: [
               currentLength,
@@ -8466,45 +9236,6 @@ function shadowToClass(value) {
   if (!value || value === "none") return void 0;
   return `shadow-${value}`;
 }
-function displayToClass(value) {
-  if (!value) return void 0;
-  if (value === "inline") return "inline";
-  if (value === "inline-block") return "inline-block";
-  if (value === "flex") return "flex";
-  if (value === "inline-flex") return "inline-flex";
-  if (value === "grid") return "grid";
-  if (value === "inline-grid") return "inline-grid";
-  if (value === "block") return "block";
-  if (value === "none") return "hidden";
-  return void 0;
-}
-function flexDirectionToClass(value) {
-  if (!value) return void 0;
-  if (value === "row") return "flex-row";
-  if (value === "column") return "flex-col";
-  if (value === "row-reverse") return "flex-row-reverse";
-  if (value === "column-reverse") return "flex-col-reverse";
-  return void 0;
-}
-function alignToClass(value) {
-  if (!value) return void 0;
-  if (value === "start") return "items-start";
-  if (value === "end") return "items-end";
-  if (value === "center") return "items-center";
-  if (value === "baseline") return "items-baseline";
-  if (value === "stretch") return "items-stretch";
-  return void 0;
-}
-function justifyToClass(value) {
-  if (!value) return void 0;
-  if (value === "start") return "justify-start";
-  if (value === "end") return "justify-end";
-  if (value === "center") return "justify-center";
-  if (value === "between") return "justify-between";
-  if (value === "around") return "justify-around";
-  if (value === "evenly") return "justify-evenly";
-  return void 0;
-}
 var Box = React49__namespace.forwardRef(
   ({
     as: Component = "div",
@@ -8522,14 +9253,9 @@ var Box = React49__namespace.forwardRef(
     mr,
     mb,
     ml,
-    display,
-    flexDirection,
     radius,
     shadow,
     bg,
-    gap,
-    align,
-    justify,
     className,
     style,
     ...props
@@ -8550,7 +9276,6 @@ var Box = React49__namespace.forwardRef(
     const mlValue = getBaseValue2(ml);
     const radiusValue = getBaseValue2(radius);
     const bgValue = getBaseValue2(bg);
-    const gapValue = getBaseValue2(gap);
     const inlineStyles = {
       ...pValue !== void 0 && { padding: getSpacingCSSVar(String(pValue)) },
       ...!p && pxValue !== void 0 && {
@@ -8580,18 +9305,9 @@ var Box = React49__namespace.forwardRef(
       ...!m && !mx && mlValue !== void 0 && { marginLeft: getSpacingCSSVar(String(mlValue)) },
       ...radiusValue !== void 0 && { borderRadius: getRadiusCSSVar(radiusValue) },
       ...bgValue !== void 0 && { backgroundColor: getColorCSSVar(bgValue) },
-      ...gapValue !== void 0 && { gap: getSpacingCSSVar(String(gapValue)) },
       ...style
     };
     const classes = cn(
-      // Display
-      displayToClass(display),
-      // Flex direction
-      flexDirectionToClass(flexDirection),
-      // Align
-      alignToClass(align),
-      // Justify
-      justifyToClass(justify),
       // Shadow
       shadowToClass(shadow),
       className
@@ -8602,18 +9318,46 @@ var Box = React49__namespace.forwardRef(
   }
 );
 Box.displayName = "Box";
+function alignToClass(value) {
+  if (!value) return void 0;
+  if (value === "start") return "items-start";
+  if (value === "end") return "items-end";
+  if (value === "center") return "items-center";
+  if (value === "baseline") return "items-baseline";
+  if (value === "stretch") return "items-stretch";
+  return void 0;
+}
+function justifyToClass(value) {
+  if (!value) return void 0;
+  if (value === "start") return "justify-start";
+  if (value === "end") return "justify-end";
+  if (value === "center") return "justify-center";
+  if (value === "between") return "justify-between";
+  if (value === "around") return "justify-around";
+  if (value === "evenly") return "justify-evenly";
+  return void 0;
+}
 var Stack = React49__namespace.forwardRef(
-  ({ direction = "vertical", spacing: spacing2, gap, align, justify, ...props }, ref) => {
+  ({ direction = "vertical", spacing: spacing2, gap, align, justify, className, style, ...props }, ref) => {
     const gapValue = spacing2 ?? gap;
+    const gapBaseValue = getBaseValue(gapValue);
+    const flexClasses = cn(
+      "flex",
+      direction === "horizontal" ? "flex-row" : "flex-col",
+      alignToClass(align),
+      justifyToClass(justify),
+      className
+    );
+    const inlineStyles = {
+      ...gapBaseValue !== void 0 && { gap: getSpacingCSSVar(String(gapBaseValue)) },
+      ...style
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
         ref,
-        display: "flex",
-        flexDirection: direction === "horizontal" ? "row" : "column",
-        gap: gapValue,
-        align,
-        justify,
+        className: flexClasses,
+        style: Object.keys(inlineStyles).length > 0 ? inlineStyles : void 0,
         ...props
       }
     );
@@ -8724,7 +9468,7 @@ function getFlexBaseValue(value) {
   }
   return value;
 }
-function flexDirectionToClass2(value) {
+function flexDirectionToClass(value) {
   if (!value) return void 0;
   if (value === "row") return "flex-row";
   if (value === "column") return "flex-col";
@@ -8777,8 +9521,10 @@ var Flex = React49__namespace.forwardRef(
     const alignValue = getFlexBaseValue(align);
     const justifyValue = getFlexBaseValue(justify);
     const basisValue = getFlexBaseValue(basis);
+    const gapBaseValue = getBaseValue(gap);
     const flexClasses = cn(
-      flexDirectionToClass2(directionValue),
+      "flex",
+      flexDirectionToClass(directionValue),
       flexWrapToClass(wrapValue),
       growToClass(grow),
       shrinkToClass(shrink),
@@ -8797,15 +9543,13 @@ var Flex = React49__namespace.forwardRef(
     })();
     const flexStyle = {
       ...flexBasisCSS ? { flexBasis: flexBasisCSS } : {},
+      ...gapBaseValue !== void 0 && { gap: getSpacingCSSVar(String(gapBaseValue)) },
       ...style
     };
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
         ref,
-        display: "flex",
-        flexDirection: directionValue,
-        gap,
         className: flexClasses,
         style: Object.keys(flexStyle).length > 0 ? flexStyle : void 0,
         ...props
@@ -8872,7 +9616,22 @@ function justifyToClass3(value) {
   return void 0;
 }
 var Grid = React49__namespace.forwardRef(
-  ({ cols, sm, md, lg, xl, "2xl": xl2, rows, gap, flow, align, justify, className, ...props }, ref) => {
+  ({
+    cols,
+    sm,
+    md,
+    lg,
+    xl,
+    "2xl": xl2,
+    rows,
+    gap,
+    flow,
+    align,
+    justify,
+    className,
+    style,
+    ...props
+  }, ref) => {
     let colsValue = cols;
     if (sm || md || lg || xl || xl2) {
       if (cols !== void 0 && typeof cols !== "object") {
@@ -8941,23 +9700,25 @@ var Grid = React49__namespace.forwardRef(
       justifyToClass3(justifyValue),
       className
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, display: "grid", gap, className: gridClasses, ...props });
+    const gapBaseValue = gap ? getBaseValue(gap) : void 0;
+    const gridStyle = {
+      ...gapBaseValue !== void 0 && { gap: getSpacingCSSVar(String(gapBaseValue)) },
+      ...style
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Box,
+      {
+        ref,
+        className: cn("grid", gridClasses),
+        style: Object.keys(gridStyle).length > 0 ? gridStyle : void 0,
+        ...props
+      }
+    );
   }
 );
 Grid.displayName = "Grid";
-var Row = React49__namespace.forwardRef(({ gap, align, justify, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      ref,
-      display: "flex",
-      flexDirection: "row",
-      gap,
-      align,
-      justify,
-      ...props
-    }
-  );
+var Row = React49__namespace.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Stack, { ref, direction: "horizontal", ...props });
 });
 Row.displayName = "Row";
 var surfaceVariants = classVarianceAuthority.cva("", {
@@ -8992,7 +9753,7 @@ var labelVariants = classVarianceAuthority.cva(
 var Label2 = React49__namespace.forwardRef(
   ({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(LabelPrimitive__namespace.Root, { ref, className: cn(labelVariants(), className), ...props, children: [
     children,
-    required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(INPUT_TOKENS.label.requiredMark, "ml-xs"), children: "*" })
+    required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(FORM_TOKENS.label.requiredMark, "ml-xs"), children: "*" })
   ] })
 );
 Label2.displayName = LabelPrimitive__namespace.Root.displayName;
@@ -9339,7 +10100,7 @@ var ToastRoot = React49__namespace.forwardRef(
                 altText: toast.action.label,
                 onClick: toast.action.onClick,
                 className: cn(
-                  "inline-flex shrink-0 items-center justify-center rounded-md border bg-transparent font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50",
+                  "inline-flex shrink-0 items-center justify-center rounded-md border bg-transparent font-medium transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
                   TOAST_TOKENS.action.height,
                   TOAST_TOKENS.action.padding,
                   TOAST_TOKENS.action.fontSize
@@ -9397,7 +10158,7 @@ var ToastAction = React49__namespace.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: cn(
-      "inline-flex shrink-0 items-center justify-center rounded-md border bg-transparent font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50",
+      "inline-flex shrink-0 items-center justify-center rounded-md border bg-transparent font-medium transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
       TOAST_TOKENS.action.height,
       TOAST_TOKENS.action.padding,
       TOAST_TOKENS.action.fontSize,
@@ -9837,7 +10598,7 @@ var NotificationCenterItem = React49__namespace.forwardRef(
               size: "icon",
               onClick: handleDismiss,
               "aria-label": "Dismiss notification",
-              className: "absolute right-xs top-xs h-6 w-6 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100",
+              className: "absolute right-xs top-xs h-6 w-6 opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 group-hover:opacity-100",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
             }
           )
@@ -10398,7 +11159,7 @@ var PopoverArrow = React49__namespace.forwardRef(
 );
 PopoverArrow.displayName = "PopoverArrow";
 
-// node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+// node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var min = Math.min;
 var max = Math.max;
 var round = Math.round;
@@ -10529,7 +11290,7 @@ function rectToClientRect(rect) {
   };
 }
 
-// node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+// node_modules/.pnpm/@floating-ui+core@1.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {
     reference,
@@ -10974,7 +11735,7 @@ var shift = function(options) {
   };
 };
 
-// node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+// node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
 function hasWindow() {
   return typeof window !== "undefined";
 }
@@ -11127,7 +11888,7 @@ function getFrameElement(win) {
   return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
 }
 
-// node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
+// node_modules/.pnpm/@floating-ui+dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
 function getCssDimensions(element) {
   const css = getComputedStyle2(element);
   let width = parseFloat(css.width) || 0;
@@ -11981,7 +12742,7 @@ function usePositioning({
       return offsetValue;
     }
     const baseOffset = getBaseValue(offsetValue);
-    return baseOffset ? getSpacingPx(baseOffset) : 4;
+    return baseOffset ? getSpacingPx(baseOffset) : getSpacingPx(1);
   }, [offsetValue]);
   React49__namespace.useEffect(() => {
     setMounted(true);
@@ -11992,7 +12753,7 @@ function usePositioning({
       middlewareArray.push(flip3());
     }
     if (enableShift) {
-      middlewareArray.push(shift3({ padding: 8 }));
+      middlewareArray.push(shift3({ padding: getSpacingPx(2) }));
     }
     return middlewareArray;
   }, [offsetPx, enableFlip, enableShift]);
@@ -12351,7 +13112,7 @@ var DropdownMenuItem = React49__namespace.forwardRef(
           MENU_TOKENS.item.padding.md,
           MENU_TOKENS.item.radius.md,
           inset && "pl-8",
-          !disabled && "focus:bg-accent focus:text-accent-foreground",
+          !disabled && "focus-visible:bg-accent focus-visible:text-accent-foreground",
           selected && "bg-accent/50",
           disabled && "pointer-events-none opacity-50",
           className
@@ -12834,9 +13595,9 @@ var CONTEXT_MENU_TOKENS = {
     radius: "rounded-sm",
     // 4px (0.25rem)
     focus: {
-      background: "focus:bg-[hsl(var(--accent))]",
+      background: "focus-visible:bg-[hsl(var(--accent))]",
       // Focus background using CSS var
-      text: "focus:text-[hsl(var(--accent-foreground))]"
+      text: "focus-visible:text-[hsl(var(--accent-foreground))]"
       // Focus text using CSS var
     },
     disabled: {
@@ -13224,7 +13985,7 @@ var Skeleton = React49__namespace.forwardRef(
 Skeleton.displayName = "Skeleton";
 var EmptyStateAction = React49__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mt-2", className), ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(EMPTY_STATE_TOKENS.spacing.action, className), ...props, children });
   }
 );
 EmptyStateAction.displayName = "EmptyStateAction";
@@ -13235,9 +13996,10 @@ var EmptyStateDescription = React49__namespace.forwardRef(
       {
         ref,
         className: cn(
-          DATA_TOKENS.emptyState.typography.description.fontSize,
-          DATA_TOKENS.emptyState.typography.description.fontWeight,
-          "max-w-md text-muted-foreground",
+          EMPTY_STATE_TOKENS.typography.description.fontSize,
+          EMPTY_STATE_TOKENS.typography.description.fontWeight,
+          EMPTY_STATE_TOKENS.typography.description.color,
+          EMPTY_STATE_TOKENS.typography.description.maxWidth,
           className
         ),
         ...props,
@@ -13249,16 +14011,12 @@ var EmptyStateDescription = React49__namespace.forwardRef(
 EmptyStateDescription.displayName = "EmptyStateDescription";
 var EmptyStateIcon = React49__namespace.forwardRef(
   ({ children, size: size3 = "md", className, ...props }, ref) => {
-    const iconSizeClass = DATA_TOKENS.emptyState.iconSize[size3];
+    const iconSizeClass = EMPTY_STATE_TOKENS.icon.size[size3];
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
-        className: cn(
-          "flex items-center justify-center text-muted-foreground",
-          iconSizeClass,
-          className
-        ),
+        className: cn(EMPTY_STATE_TOKENS.icon.container, iconSizeClass, className),
         ...props,
         children
       }
@@ -13273,9 +14031,9 @@ var EmptyStateTitle = React49__namespace.forwardRef(
       {
         ref,
         className: cn(
-          DATA_TOKENS.emptyState.typography.title.fontSize,
-          DATA_TOKENS.emptyState.typography.title.fontWeight,
-          "text-foreground",
+          EMPTY_STATE_TOKENS.typography.title.fontSize,
+          EMPTY_STATE_TOKENS.typography.title.fontWeight,
+          EMPTY_STATE_TOKENS.typography.title.color,
           className
         ),
         ...props,
@@ -13296,7 +14054,7 @@ var EmptyState = React49__namespace.forwardRef(
         variant: "flat",
         radius: "xl",
         p: "lg",
-        className: cn("text-center", className),
+        className: cn(EMPTY_STATE_TOKENS.alignment.center, className),
         id: emptyStateId,
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(Stack, { gap: "md", align: "center", justify: "center", children })
@@ -13313,14 +14071,16 @@ var DataListItem = React49__namespace.forwardRef(
   ({ padding = "md", className, children, ...props }, ref) => {
     const paddingValue = getBaseValue(padding);
     const paddingKey = paddingValue && ["sm", "md", "lg"].includes(String(paddingValue)) ? String(paddingValue) : "md";
-    const paddingClass = DATA_TOKENS.dataList.rowPadding[paddingKey];
+    const paddingClass = DATA_LIST_TOKENS.rowPadding[paddingKey];
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         className: cn(
           paddingClass,
-          "flex flex-col border-b border-border last:border-0 md:flex-row md:items-center",
+          DATA_LIST_TOKENS.item.layout.mobile,
+          DATA_LIST_TOKENS.item.layout.desktop,
+          DATA_LIST_TOKENS.item.border,
           className
         ),
         ...props,
@@ -13337,9 +14097,9 @@ var DataListLabel = React49__namespace.forwardRef(
       {
         ref,
         className: cn(
-          "mb-1 font-semibold text-foreground md:mb-0",
-          "md:w-32",
-          // Default md width from tokens
+          DATA_LIST_TOKENS.label.mobile,
+          DATA_LIST_TOKENS.label.desktop,
+          DATA_LIST_TOKENS.labelWidth.md,
           className
         ),
         ...props,
@@ -13351,13 +14111,21 @@ var DataListLabel = React49__namespace.forwardRef(
 DataListLabel.displayName = "DataListLabel";
 var DataListValue = React49__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("dd", { ref, className: cn("flex-1 text-muted-foreground", className), ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "dd",
+      {
+        ref,
+        className: cn(DATA_LIST_TOKENS.value.flex, DATA_LIST_TOKENS.value.color, className),
+        ...props,
+        children
+      }
+    );
   }
 );
 DataListValue.displayName = "DataListValue";
 var DataListRoot = React49__namespace.forwardRef(
   ({ labelWidth: _labelWidth = "md", className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("dl", { ref, className: cn(DATA_TOKENS.dataList.spacing.gap, className), ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx("dl", { ref, className: cn(DATA_LIST_TOKENS.spacing.gap, className), ...props, children });
   }
 );
 DataListRoot.displayName = "DataListRoot";
@@ -13372,9 +14140,9 @@ var TableBody = React49__namespace.forwardRef(
 TableBody.displayName = "TableBody";
 var TableCell = React49__namespace.forwardRef(
   ({ align = "left", size: size3 = "md", className, ...props }, ref) => {
-    const paddingClass = DATA_TOKENS.table.padding.cell[size3];
-    const typographyClass = DATA_TOKENS.table.typography.cell.fontSize;
-    const fontWeightClass = DATA_TOKENS.table.typography.cell.fontWeight;
+    const paddingClass = TABLE_TOKENS.padding.cell[size3];
+    const typographyClass = TABLE_TOKENS.typography.cell.fontSize;
+    const fontWeightClass = TABLE_TOKENS.typography.cell.fontWeight;
     const alignmentClasses = {
       left: "text-left",
       center: "text-center",
@@ -13400,7 +14168,7 @@ var TableCell = React49__namespace.forwardRef(
 TableCell.displayName = "TableCell";
 var TableEmpty = React49__namespace.forwardRef(
   ({ colSpan, message = "No data available", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn(className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: "p-8", children: /* @__PURE__ */ jsxRuntime.jsxs(EmptyState, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn(className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: TABLE_TOKENS.empty.padding, children: /* @__PURE__ */ jsxRuntime.jsxs(EmptyState, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(EmptyStateIcon, { children: "\u{1F4ED}" }),
       /* @__PURE__ */ jsxRuntime.jsx(EmptyStateTitle, { children: message })
     ] }) }) });
@@ -13415,13 +14183,22 @@ var TableExpandableContent = React49__namespace.forwardRef(
         ref,
         colSpan,
         className: cn(
-          "p-0",
-          "overflow-hidden transition-all duration-normal ease-in-out",
-          expanded ? "max-h-[100vh] opacity-100" : "max-h-0 opacity-0",
+          TABLE_TOKENS.expandable.container,
+          TABLE_TOKENS.expandable.transition,
+          expanded ? TABLE_TOKENS.expandable.expanded : TABLE_TOKENS.expandable.collapsed,
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-md", expanded ? "block" : "hidden"), children })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              TABLE_TOKENS.expandable.padding,
+              expanded ? TABLE_TOKENS.expandable.content.expanded : TABLE_TOKENS.expandable.content.collapsed
+            ),
+            children
+          }
+        )
       }
     );
   }
@@ -13434,9 +14211,9 @@ var TableSortIcon = React49__namespace.forwardRef(
       {
         ref,
         className: cn(
-          "inline-flex size-4 items-center text-muted-foreground transition-transform",
-          direction === "desc" && "rotate-180",
-          !direction && "opacity-30",
+          TABLE_TOKENS.sortable.icon.base,
+          direction === "desc" && TABLE_TOKENS.sortable.icon.rotated,
+          !direction && TABLE_TOKENS.sortable.icon.inactive,
           className
         ),
         "aria-hidden": "true",
@@ -13483,9 +14260,9 @@ var TableHead = React49__namespace.forwardRef(
         direction: nextDirection
       });
     }, [sortable, columnKey, sortState, setSortState]);
-    const paddingClass = DATA_TOKENS.table.padding.header[size3];
-    const typographyClass = DATA_TOKENS.table.typography.header.fontSize;
-    const fontWeightClass = DATA_TOKENS.table.typography.header.fontWeight;
+    const paddingClass = TABLE_TOKENS.padding.header[size3];
+    const typographyClass = TABLE_TOKENS.typography.header.fontSize;
+    const fontWeightClass = TABLE_TOKENS.typography.header.fontWeight;
     const alignmentClasses = {
       left: "text-left",
       center: "text-center",
@@ -13502,9 +14279,10 @@ var TableHead = React49__namespace.forwardRef(
           typographyClass,
           fontWeightClass,
           alignmentClasses[align],
-          DATA_TOKENS.table.colors.border,
-          "border-b",
-          sortable && "cursor-pointer select-none hover:bg-muted/50",
+          TABLE_TOKENS.colors.border,
+          TABLE_TOKENS.border.bottom,
+          sortable && TABLE_TOKENS.sortable.cursor,
+          sortable && TABLE_TOKENS.sortable.hover,
           className
         ),
         onClick: handleSort,
@@ -13516,7 +14294,7 @@ var TableHead = React49__namespace.forwardRef(
         })(),
         role: "columnheader",
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(TABLE_TOKENS.sortable.container, TABLE_TOKENS.sortable.gap), children: [
           children,
           sortable && /* @__PURE__ */ jsxRuntime.jsx(TableSortIcon, { direction: sortDirection })
         ] })
@@ -13531,7 +14309,7 @@ var TableHeader = React49__namespace.forwardRef(
       "thead",
       {
         ref,
-        className: cn(sticky && "sticky top-0 z-10 bg-background", className),
+        className: cn(sticky && TABLE_TOKENS.sticky.header, className),
         role: "rowgroup",
         ...props
       }
@@ -13541,7 +14319,7 @@ var TableHeader = React49__namespace.forwardRef(
 TableHeader.displayName = "TableHeader";
 var TableLoadingState = React49__namespace.forwardRef(
   ({ colSpan, rows = 5, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: rows }).map((_, index2) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: index2 === 0 ? ref : void 0, className: cn(className), ...props, children: Array.from({ length: colSpan }).map((_2, cellIndex) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "text", className: "w-full" }) }, cellIndex)) }, index2)) });
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: rows }).map((_, index2) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: index2 === 0 ? ref : void 0, className: cn(className), ...props, children: Array.from({ length: colSpan }).map((_2, cellIndex) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: TABLE_TOKENS.loading.cellPadding, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "text", className: TABLE_TOKENS.loading.skeletonWidth }) }, cellIndex)) }, index2)) });
   }
 );
 TableLoadingState.displayName = "TableLoadingState";
@@ -13559,11 +14337,11 @@ var TableRow = React49__namespace.forwardRef(
       {
         ref,
         className: cn(
-          DATA_TOKENS.table.colors.border,
-          "border-b",
-          DATA_TOKENS.table.colors.rowHover,
-          selected && DATA_TOKENS.table.colors.rowSelected,
-          expandable && "cursor-pointer",
+          TABLE_TOKENS.colors.border,
+          TABLE_TOKENS.border.bottom,
+          TABLE_TOKENS.colors.rowHover,
+          selected && TABLE_TOKENS.colors.rowSelected,
+          expandable && TABLE_TOKENS.expandable.cursor,
           className
         ),
         "aria-expanded": expandable ? expanded : void 0,
@@ -13624,13 +14402,13 @@ function TableRoot({
     }),
     [sortState, expandedRows, toggleRow, expandable, renderExpandableContent]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: TABLE_TOKENS.layout.overflow, children: /* @__PURE__ */ jsxRuntime.jsx(
     "table",
     {
       className: cn(
-        "w-full border-collapse",
-        DATA_TOKENS.table.radius.default,
-        DATA_TOKENS.table.shadow.subtle,
+        TABLE_TOKENS.layout.table,
+        TABLE_TOKENS.radius.default,
+        TABLE_TOKENS.shadow.subtle,
         className
       ),
       role: "table",
@@ -15197,8 +15975,8 @@ var artistCardGenresVariants = classVarianceAuthority.cva(
   }
 );
 var artistCardFooterBorderVariants = classVarianceAuthority.cva(
-  // Base classes - border top, spacing
-  "border-t border-border",
+  // Base classes - border top from ARTIST_TOKENS, spacing from DOMAIN_TOKENS
+  ARTIST_TOKENS.footer.border.top,
   {
     variants: {
       size: {
@@ -15258,37 +16036,49 @@ var ArtistCard = React49__namespace.forwardRef(
         ...props,
         children: [
           featured && popularBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: artistCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: artistCardBadgeSurfaceVariants({ size: size3, variant: "featured" }), children: popularBadgeText }) }),
-          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-hidden bg-gradient-to-br from-muted to-muted/50", children: [
-            imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: imageUrl,
-                alt: name,
-                className: cn("h-full w-full", artistCardImageTransformVariants({ size: size3 }))
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Icon2,
-              {
-                name: "info",
-                size: "xl",
-                color: "muted",
-                className: ICON_TOKENS.sizes["4xl"],
-                "aria-hidden": "true"
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: artistCardImageOverlayVariants({ size: size3 }) })
-          ] }) }),
+          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                ARTIST_TOKENS.image.container.layout,
+                DOMAIN_TOKENS.image.placeholder.gradient
+              ),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: name,
+                    className: cn(
+                      ARTIST_TOKENS.image.sizing.full,
+                      artistCardImageTransformVariants({ size: size3 })
+                    )
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ARTIST_TOKENS.image.placeholder.container, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    size: "xl",
+                    color: "muted",
+                    className: ICON_TOKENS.sizes["4xl"],
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: artistCardImageOverlayVariants({ size: size3 }) })
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(CardBaseContentWrapper, { size: size3, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               Heading,
               {
                 level: 3,
                 className: cn(
-                  "line-clamp-2",
+                  DOMAIN_TOKENS.text.lineClamp.two,
                   TEXT_TOKENS.fontSize.lg,
                   TEXT_TOKENS.fontWeight.bold,
                   MOTION_TOKENS.transition.colors,
-                  "group-hover:text-primary",
+                  DOMAIN_TOKENS.text.hover.primary,
                   size3 === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
                 ),
                 children: href ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href, variant: "ghost", children: name }) : name
@@ -15300,7 +16090,7 @@ var ArtistCard = React49__namespace.forwardRef(
                 size: "sm",
                 variant: "muted",
                 className: cn(
-                  "line-clamp-2",
+                  DOMAIN_TOKENS.text.lineClamp.two,
                   size3 === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
                 ),
                 children: description
@@ -15362,16 +16152,16 @@ var ArtistCard = React49__namespace.forwardRef(
   }
 );
 ArtistCard.displayName = "ArtistCard";
-var eventCardBadgeVariants = classVarianceAuthority.cva(
+var categoryCardBadgeVariants = classVarianceAuthority.cva(
   // Base classes - absolute positioning, z-index
   "absolute z-10",
   {
     variants: {
       size: {
         default: DOMAIN_TOKENS.badges.position.default,
-        // Default positioning - maps to semanticSpacing.md (12px)
+        // Default positioning - references semanticSpacing.md (16px)
         compact: DOMAIN_TOKENS.badges.position.compact
-        // Compact positioning - maps to semanticSpacing.sm (8px)
+        // Compact positioning - references semanticSpacing.sm (8px)
       }
     },
     defaultVariants: {
@@ -15379,9 +16169,10 @@ var eventCardBadgeVariants = classVarianceAuthority.cva(
     }
   }
 );
-var eventCardBadgeSurfaceVariants = classVarianceAuthority.cva(
+var categoryCardBadgeSurfaceVariants = classVarianceAuthority.cva(
   // Base classes - flex layout, items center, badge styling
-  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} font-semibold`,
+  // Uses DOMAIN_TOKENS for badge-specific styles, TEXT_TOKENS for typography
+  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
   {
     variants: {
       variant: {
@@ -15394,130 +16185,14 @@ var eventCardBadgeSurfaceVariants = classVarianceAuthority.cva(
     }
   }
 );
-var eventCardMetadataVariants = classVarianceAuthority.cva(
-  // Base classes - flex column, metadata spacing
-  `flex flex-col ${DOMAIN_TOKENS.metadata.spacing.vertical}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardMetadataItemVariants = classVarianceAuthority.cva(
-  // Base classes - flex items center, metadata spacing and text
-  `flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.xs}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardMetadataIconVariants = classVarianceAuthority.cva(
-  // Base classes - icon size and color
-  `${ICON_TOKENS.sizes.md} ${ICON_TOKENS.colors.muted}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardFooterVariants = classVarianceAuthority.cva(
-  // Base classes - border top, spacing
-  "border-t border-border",
-  {
-    variants: {
-      size: {
-        default: DOMAIN_TOKENS.spacing.footer.paddingTopDefault,
-        // Default padding top - references semanticSpacing.sm (8px) via Tailwind
-        compact: DOMAIN_TOKENS.spacing.footer.paddingTopCompact
-        // Compact padding top - references semanticSpacing.xs (4px) via Tailwind
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardTicketButtonVariants = classVarianceAuthority.cva(
-  // Base classes - flex layout, badge gradient, motion
-  `inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} font-semibold transform`,
-  {
-    variants: {
-      size: {
-        default: DOMAIN_TOKENS.spacing.button.paddingDefault,
-        // Default padding - references semanticSpacing.md (16px) horizontal, xs (4px) vertical via Tailwind
-        compact: DOMAIN_TOKENS.spacing.button.paddingCompact
-        // Compact padding - references semanticSpacing.sm (8px) horizontal, xs (4px) vertical via Tailwind
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardTicketButtonIconVariants = classVarianceAuthority.cva(
-  // Base classes - icon size and spacing
-  `${ICON_TOKENS.sizes.md} ${DOMAIN_TOKENS.spacing.button.iconMarginLeft}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardPriceVariants = classVarianceAuthority.cva(
-  // Base classes - price gradient text
-  `bg-gradient-to-r from-accent-500 to-primary-600 bg-clip-text text-transparent`,
-  {
-    variants: {
-      size: {
-        default: TEXT_TOKENS.fontSize.lg,
-        // Default size
-        compact: TEXT_TOKENS.fontSize.md
-        // Compact size
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var EventCard = React49__namespace.forwardRef(
+var CategoryCard = React49__namespace.forwardRef(
   ({
     title,
     description,
-    date,
-    venueName,
-    price,
     imageUrl,
     href,
-    ticketUrl,
     featured = false,
     showImage = true,
-    getTicketsLabel,
     featuredBadgeText,
     size: size3 = "default",
     variant,
@@ -15540,46 +16215,57 @@ var EventCard = React49__namespace.forwardRef(
         className: cn("group relative", className),
         ...props,
         children: [
-          featured && featuredBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: eventCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
-          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-hidden bg-gradient-to-br from-surface-elevated1 to-surface-elevated2", children: [
-            imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: imageUrl,
-                alt: title,
-                className: cn(
-                  "h-full w-full object-cover",
-                  DOMAIN_TOKENS.motion.hover.transition,
-                  DOMAIN_TOKENS.motion.hover.scale
-                )
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Icon2,
-              {
-                name: "info",
-                size: "xl",
-                color: "muted",
-                className: ICON_TOKENS.sizes["4xl"],
-                "aria-hidden": "true"
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "absolute inset-0 opacity-0 transition-opacity duration-normal group-hover:opacity-100",
-                  DOMAIN_TOKENS.image.overlay.gradient
+          featured && featuredBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: categoryCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: categoryCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
+          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "relative w-full overflow-hidden",
+                DOMAIN_TOKENS.image.placeholder.gradient
+              ),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: title,
+                    className: cn(
+                      "h-full w-full object-cover",
+                      DOMAIN_TOKENS.motion.hover.transition,
+                      DOMAIN_TOKENS.motion.hover.scale
+                    )
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    className: cn(ICON_TOKENS.sizes["4xl"], ICON_TOKENS.colors.muted),
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute inset-0 opacity-0 group-hover:opacity-100",
+                      MOTION_TOKENS.transition.opacity,
+                      MOTION_TOKENS.duration.normal,
+                      DOMAIN_TOKENS.image.overlay.gradient
+                    )
+                  }
                 )
-              }
-            )
-          ] }) }),
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(CardBaseContentWrapper, { size: size3, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               Heading,
               {
                 level: 3,
                 className: cn(
-                  "line-clamp-2 transition-colors group-hover:text-primary",
+                  DOMAIN_TOKENS.text.lineClamp.two,
+                  MOTION_TOKENS.transition.colors,
+                  DOMAIN_TOKENS.text.hover.primary,
                   TEXT_TOKENS.fontSize.lg,
                   TEXT_TOKENS.fontWeight.bold,
                   DOMAIN_TOKENS.spacing.section.titleToSubtitle
@@ -15591,47 +16277,21 @@ var EventCard = React49__namespace.forwardRef(
               Text,
               {
                 size: "sm",
-                muted: true,
+                variant: "muted",
                 className: cn(
-                  "line-clamp-2",
+                  DOMAIN_TOKENS.text.lineClamp.two,
                   size3 === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
                 ),
                 children: description
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataVariants({ size: size3 }), children: [
-              date && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), children: [
-                /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, { className: eventCardMetadataIconVariants({ size: size3 }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", muted: true, children: date })
-              ] }),
-              venueName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), children: [
-                /* @__PURE__ */ jsxRuntime.jsx(IconLocation, { className: eventCardMetadataIconVariants({ size: size3 }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", muted: true, className: "line-clamp-1", children: venueName })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", eventCardFooterVariants({ size: size3 })), children: [
-            ticketUrl && /* @__PURE__ */ jsxRuntime.jsxs(
-              Link,
-              {
-                href: ticketUrl,
-                className: cn("w-full", eventCardTicketButtonVariants({ size: size3 })),
-                target: "_blank",
-                rel: "noopener noreferrer",
-                children: [
-                  getTicketsLabel,
-                  /* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: eventCardTicketButtonIconVariants({ size: size3 }) })
-                ]
-              }
-            ),
-            !ticketUrl && price && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: size3 === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventCardPriceVariants({ size: size3 }), children: price }) }) })
-          ] }) })
+            )
+          ] })
         ]
       }
     ) });
   }
 );
-EventCard.displayName = "EventCard";
+CategoryCard.displayName = "CategoryCard";
 var promoCardBadgeVariants = classVarianceAuthority.cva(
   // Base classes - absolute positioning, z-index
   "absolute z-10",
@@ -15665,14 +16325,14 @@ var promoCardBadgeSurfaceVariants = classVarianceAuthority.cva(
   }
 );
 var promoCardCtaButtonVariants = classVarianceAuthority.cva(
-  // Base classes - flex layout, button tokens, motion
-  `inline-flex items-center justify-center ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.variant.primary.background} ${BUTTON_TOKENS.variant.primary.text} ${BUTTON_TOKENS.shadow.primary} ${BUTTON_TOKENS.variant.primary.hover} ${BUTTON_TOKENS.transition.colors} font-semibold`,
+  // Base classes - flex layout, CTA button tokens, motion
+  `inline-flex items-center justify-center ${DOMAIN_TOKENS.cta.button.radius} ${DOMAIN_TOKENS.cta.button.variant.primary.background} ${DOMAIN_TOKENS.cta.button.variant.primary.text} ${DOMAIN_TOKENS.cta.button.shadow.primary} ${DOMAIN_TOKENS.cta.button.variant.primary.hover} ${DOMAIN_TOKENS.cta.button.transition.colors} font-semibold`,
   {
     variants: {
       size: {
-        default: `${BUTTON_TOKENS.height.md} ${BUTTON_TOKENS.padding.horizontal.md} ${BUTTON_TOKENS.padding.vertical.sm} ${BUTTON_TOKENS.fontSize.md}`,
+        default: `${DOMAIN_TOKENS.cta.button.height.md} ${DOMAIN_TOKENS.cta.button.padding.horizontal.md} ${DOMAIN_TOKENS.cta.button.padding.vertical.sm} ${DOMAIN_TOKENS.cta.button.fontSize.md}`,
         // Default size - uses md height and padding
-        compact: `${BUTTON_TOKENS.height.sm} ${BUTTON_TOKENS.padding.horizontal.sm} ${BUTTON_TOKENS.padding.vertical.sm} ${BUTTON_TOKENS.fontSize.sm}`
+        compact: `${DOMAIN_TOKENS.cta.button.height.sm} ${DOMAIN_TOKENS.cta.button.padding.horizontal.sm} ${DOMAIN_TOKENS.cta.button.padding.vertical.sm} ${DOMAIN_TOKENS.cta.button.fontSize.sm}`
         // Compact size - uses sm height and padding
       }
     },
@@ -15804,6 +16464,22 @@ var PromoCard = React49__namespace.forwardRef(
   }
 );
 PromoCard.displayName = "PromoCard";
+var ticketCardVariants = classVarianceAuthority.cva("group relative", {
+  variants: {
+    size: {
+      default: "",
+      compact: ""
+    },
+    variant: {
+      default: "",
+      featured: ""
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    variant: "default"
+  }
+});
 var ticketCardBadgeVariants = classVarianceAuthority.cva(
   // Base classes - absolute positioning, z-index
   "absolute z-10",
@@ -15811,7 +16487,7 @@ var ticketCardBadgeVariants = classVarianceAuthority.cva(
     variants: {
       size: {
         default: DOMAIN_TOKENS.badges.position.default,
-        // Default positioning - maps to semanticSpacing.md (12px)
+        // Default positioning - maps to semanticSpacing.md (16px)
         compact: DOMAIN_TOKENS.badges.position.compact
         // Compact positioning - maps to semanticSpacing.sm (8px)
       }
@@ -15823,7 +16499,7 @@ var ticketCardBadgeVariants = classVarianceAuthority.cva(
 );
 var ticketCardBadgeSurfaceVariants = classVarianceAuthority.cva(
   // Base classes - flex layout, items center, badge styling
-  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} font-semibold`,
+  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
   {
     variants: {
       variant: {
@@ -15840,6 +16516,45 @@ var ticketCardBadgeSurfaceVariants = classVarianceAuthority.cva(
     }
   }
 );
+var ticketCardTitleVariants = classVarianceAuthority.cva(
+  `${TEXT_TOKENS.fontSize.lg} ${TEXT_TOKENS.fontWeight.bold} ${MOTION_TOKENS.transition.colors} ${DOMAIN_TOKENS.text.hover.primary} ${DOMAIN_TOKENS.text.lineClamp.two}`,
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.spacing.section.subtitleToMetadata,
+        compact: DOMAIN_TOKENS.spacing.section.titleToSubtitle
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var ticketCardDateVariants = classVarianceAuthority.cva(
+  `${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.sm} ${MOTION_TOKENS.transition.colors}`,
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.spacing.section.titleToSubtitle,
+        compact: `${DOMAIN_TOKENS.spacing.section.titleToSubtitle} ${TEXT_TOKENS.fontSize.xs}`
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var ticketCardDescriptionVariants = classVarianceAuthority.cva(`${DOMAIN_TOKENS.text.lineClamp.two}`, {
+  variants: {
+    size: {
+      default: DOMAIN_TOKENS.spacing.section.subtitleToMetadata,
+      compact: DOMAIN_TOKENS.spacing.section.titleToSubtitle
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
 var ticketCardPriceCapacityContainerVariants = classVarianceAuthority.cva(
   // Base classes - flex layout, price/capacity spacing
   `flex items-center ${DOMAIN_TOKENS.priceCapacity.spacing}`,
@@ -15857,7 +16572,7 @@ var ticketCardPriceCapacityContainerVariants = classVarianceAuthority.cva(
 );
 var ticketCardPriceVariants = classVarianceAuthority.cva(
   // Base classes - price text color
-  `${DOMAIN_TOKENS.priceCapacity.text.primary} font-bold`,
+  `${DOMAIN_TOKENS.priceCapacity.text.primary} ${TEXT_TOKENS.fontWeight.bold}`,
   {
     variants: {
       size: {
@@ -15891,7 +16606,7 @@ var ticketCardCapacityVariants = classVarianceAuthority.cva(
 );
 var ticketCardAvailabilityVariants = classVarianceAuthority.cva(
   // Base classes - availability indicator styling
-  `inline-flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${TEXT_TOKENS.fontSize.xs} font-medium`,
+  `inline-flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.medium}`,
   {
     variants: {
       availability: {
@@ -15924,7 +16639,7 @@ var ticketCardFooterVariants = classVarianceAuthority.cva(
 );
 var ticketCardPurchaseButtonVariants = classVarianceAuthority.cva(
   // Base classes - flex layout, badge gradient, motion
-  `inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} font-semibold transform`,
+  `inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} ${TEXT_TOKENS.fontWeight.semibold} transform`,
   {
     variants: {
       size: {
@@ -15959,9 +16674,38 @@ var ticketCardPurchaseButtonIconVariants = classVarianceAuthority.cva(
     }
   }
 );
+var ticketCardImageOverlayVariants = classVarianceAuthority.cva(
+  `absolute inset-0 ${DOMAIN_TOKENS.image.overlay.gradient} opacity-0 ${MOTION_TOKENS.transition.opacity} ${MOTION_TOKENS.duration.normal} group-hover:opacity-100`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var ticketCardImageTransformVariants = classVarianceAuthority.cva(
+  `object-cover ${MOTION_TOKENS.transition.transform} ${MOTION_TOKENS.duration.slow} ${DOMAIN_TOKENS.motion.hover.scale}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
 var TicketCard = React49__namespace.forwardRef(
   ({
     title,
+    date,
     description,
     price,
     capacity,
@@ -16008,57 +16752,368 @@ var TicketCard = React49__namespace.forwardRef(
       }
     };
     const availabilityLabel = getAvailabilityLabel();
+    const formattedDate = date ? formatDate(date) : null;
+    const dateTimeValue = (() => {
+      if (!date) return null;
+      if (typeof date === "string") {
+        return new Date(date).toISOString();
+      }
+      if (date instanceof Date) {
+        return date.toISOString();
+      }
+      return new Date(date).toISOString();
+    })();
     return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...animationProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
       CardBase,
       {
         ref,
         size: size3,
         variant: cardVariant,
-        className: cn("group relative", className),
+        className: cn(ticketCardVariants({ size: size3, variant: cardVariant }), className),
         ...props,
         children: [
           featured && featuredBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ticketCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
           vipBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(ticketCardBadgeVariants({ size: size3 }), getVipBadgePosition()), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "vip" }), children: vipBadgeText }) }),
           discountBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(ticketCardBadgeVariants({ size: size3 }), getDiscountBadgePosition()), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "discount" }), children: discountBadgeText }) }),
-          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-hidden bg-gradient-to-br from-surface-elevated1 to-surface-elevated2", children: [
-            imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: imageUrl,
-                alt: title,
-                className: cn(
-                  "h-full w-full object-cover",
-                  DOMAIN_TOKENS.motion.hover.transition,
-                  DOMAIN_TOKENS.motion.hover.scale
-                )
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Icon2,
+          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "relative w-full overflow-hidden",
+                DOMAIN_TOKENS.image.placeholder.gradient
+              ),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: title,
+                    className: cn("h-full w-full", ticketCardImageTransformVariants({ size: size3 }))
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    size: "xl",
+                    color: "muted",
+                    className: ICON_TOKENS.sizes["4xl"],
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: ticketCardImageOverlayVariants({ size: size3 }) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(CardBaseContentWrapper, { size: size3, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, className: ticketCardTitleVariants({ size: size3 }), children: href ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href, variant: "ghost", children: title }) : title }),
+            formattedDate && dateTimeValue && /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: dateTimeValue, className: ticketCardDateVariants({ size: size3 }), children: formattedDate }),
+            description && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", variant: "muted", className: ticketCardDescriptionVariants({ size: size3 }), children: description }),
+            (price || capacity) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ticketCardPriceCapacityContainerVariants({ size: size3 }), children: [
+              price && /* @__PURE__ */ jsxRuntime.jsx(
+                Text,
+                {
+                  size: size3 === "compact" ? "md" : "lg",
+                  weight: "bold",
+                  className: ticketCardPriceVariants({ size: size3 }),
+                  children: price
+                }
+              ),
+              capacity && /* @__PURE__ */ jsxRuntime.jsx(
+                Text,
+                {
+                  size: size3 === "compact" ? "xs" : "sm",
+                  variant: "muted",
+                  className: ticketCardCapacityVariants({ size: size3 }),
+                  children: capacity
+                }
+              )
+            ] }),
+            availabilityLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ticketCardAvailabilityVariants({ availability }), children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", variant: availability === "sold_out" ? "muted" : "primary", children: availabilityLabel }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", ticketCardFooterVariants({ size: size3 })), children: [
+            purchaseUrl && !isPurchaseDisabled && /* @__PURE__ */ jsxRuntime.jsxs(
+              Link,
               {
-                name: "info",
-                size: "xl",
-                color: "muted",
-                className: ICON_TOKENS.sizes["4xl"],
-                "aria-hidden": "true"
+                href: purchaseUrl,
+                className: cn(
+                  "w-full",
+                  ticketCardPurchaseButtonVariants({ size: size3, disabled: false })
+                ),
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: [
+                  purchaseLabel,
+                  /* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
+                ]
               }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            ),
+            (!purchaseUrl || isPurchaseDisabled) && /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 className: cn(
-                  "absolute inset-0 opacity-0 transition-opacity duration-normal group-hover:opacity-100",
-                  DOMAIN_TOKENS.image.overlay.gradient
-                )
+                  "w-full",
+                  ticketCardPurchaseButtonVariants({ size: size3, disabled: isPurchaseDisabled })
+                ),
+                children: [
+                  purchaseLabel,
+                  /* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
+                ]
               }
             )
-          ] }) }),
+          ] }) })
+        ]
+      }
+    ) });
+  }
+);
+TicketCard.displayName = "TicketCard";
+var eventCardVariants = classVarianceAuthority.cva(
+  // Base classes - surface, border, radius, shadow, motion from tokens
+  `${DOMAIN_TOKENS.surface.bg.default} ${DOMAIN_TOKENS.surface.border.default} ${DOMAIN_TOKENS.surface.radius.default} ${DOMAIN_TOKENS.surface.shadow.default} ${DOMAIN_TOKENS.surface.bg.hover} ${DOMAIN_TOKENS.surface.border.hover} ${DOMAIN_TOKENS.surface.elevation.hover} ${DOMAIN_TOKENS.motion.hover.transition} overflow-hidden`,
+  {
+    variants: {
+      size: {
+        default: `${CARD_TOKENS.size.md.padding} ${DOMAIN_TOKENS.layout.gap.default}`,
+        compact: `${CARD_TOKENS.size.sm.padding} ${DOMAIN_TOKENS.layout.gap.compact}`
+      },
+      layout: {
+        vertical: "flex flex-col"
+      },
+      variant: {
+        default: "",
+        featured: `${DOMAIN_TOKENS.badges.surface.featured}`
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      layout: "vertical",
+      variant: "default"
+    }
+  }
+);
+var eventCardBadgeVariants = classVarianceAuthority.cva(
+  // Base classes - absolute positioning, z-index
+  "absolute z-10",
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.badges.position.default,
+        compact: DOMAIN_TOKENS.badges.position.compact
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardBadgeSurfaceVariants = classVarianceAuthority.cva(
+  // Base classes - flex layout, items center, badge styling from tokens
+  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
+  {
+    variants: {
+      variant: {
+        default: DOMAIN_TOKENS.badges.surface.default,
+        featured: DOMAIN_TOKENS.badges.surface.featured
+      }
+    },
+    defaultVariants: {
+      variant: "featured"
+    }
+  }
+);
+var eventCardMetadataVariants = classVarianceAuthority.cva(
+  // Base classes - flex column, metadata spacing from tokens
+  `flex flex-col ${DOMAIN_TOKENS.metadata.spacing.vertical}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardMetadataItemVariants = classVarianceAuthority.cva(
+  // Base classes - flex items center, metadata spacing and text from tokens
+  `flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.xs}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardMetadataIconVariants = classVarianceAuthority.cva(
+  // Base classes - icon size and color from tokens
+  `${DOMAIN_TOKENS.metadata.icon.sizeSm} ${DOMAIN_TOKENS.metadata.icon.default}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardFooterVariants = classVarianceAuthority.cva(
+  // Base classes - border top, spacing from tokens
+  "border-t border-border",
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.spacing.footer.paddingTopDefault,
+        compact: DOMAIN_TOKENS.spacing.footer.paddingTopCompact
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardTicketButtonVariants = classVarianceAuthority.cva(
+  // Base classes - flex layout, badge gradient, motion from tokens
+  `inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} ${TEXT_TOKENS.fontWeight.semibold} transform`,
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.spacing.button.paddingDefault,
+        compact: DOMAIN_TOKENS.spacing.button.paddingCompact
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardTicketButtonIconVariants = classVarianceAuthority.cva(
+  // Base classes - icon size and spacing from tokens
+  `${DOMAIN_TOKENS.metadata.icon.sizeSm} ${DOMAIN_TOKENS.spacing.button.iconMarginLeft}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardPriceVariants = classVarianceAuthority.cva(
+  // Base classes - price gradient text from tokens
+  `bg-gradient-to-r from-accent-500 to-primary-600 bg-clip-text text-transparent`,
+  {
+    variants: {
+      size: {
+        default: TEXT_TOKENS.fontSize.lg,
+        compact: TEXT_TOKENS.fontSize.md
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var EventCard = React49__namespace.forwardRef(
+  ({
+    title,
+    description,
+    date,
+    venueName,
+    price,
+    imageUrl,
+    href,
+    ticketUrl,
+    featured = false,
+    showImage = true,
+    getTicketsLabel,
+    featuredBadgeText,
+    size: size3 = "default",
+    layout = "vertical",
+    variant,
+    className,
+    animation,
+    ...props
+  }, ref) => {
+    const animationProps = resolveComponentAnimations({
+      animation: animation?.animation || "fadeInUp",
+      hoverAnimation: animation?.hoverAnimation || "hoverLift",
+      animationProps: animation?.animationProps
+    });
+    const cardVariant = variant || (featured ? "featured" : "default");
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...animationProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      CardBase,
+      {
+        ref,
+        size: size3,
+        variant: cardVariant,
+        className: cn(
+          eventCardVariants({ size: size3, layout, variant: cardVariant }),
+          "group relative",
+          className
+        ),
+        ...props,
+        children: [
+          featured && featuredBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: eventCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
+          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn("relative w-full overflow-hidden", DOMAIN_TOKENS.surface.bg.default),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: title,
+                    className: cn(
+                      "h-full w-full object-cover",
+                      DOMAIN_TOKENS.motion.hover.transition,
+                      DOMAIN_TOKENS.motion.hover.scale
+                    )
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    size: "xl",
+                    color: "muted",
+                    className: ICON_TOKENS.sizes["4xl"],
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute inset-0 opacity-0 group-hover:opacity-100",
+                      DOMAIN_TOKENS.motion.hover.transition,
+                      DOMAIN_TOKENS.image.overlay.gradient
+                    )
+                  }
+                )
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(CardBaseContentWrapper, { size: size3, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               Heading,
               {
                 level: 3,
                 className: cn(
-                  "line-clamp-2 transition-colors group-hover:text-primary",
+                  "line-clamp-2 group-hover:text-primary",
+                  DOMAIN_TOKENS.motion.hover.transition,
                   TEXT_TOKENS.fontSize.lg,
                   TEXT_TOKENS.fontWeight.bold,
                   DOMAIN_TOKENS.spacing.section.titleToSubtitle
@@ -16070,7 +17125,7 @@ var TicketCard = React49__namespace.forwardRef(
               Text,
               {
                 size: "sm",
-                variant: "muted",
+                muted: true,
                 className: cn(
                   "line-clamp-2",
                   size3 === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
@@ -16078,49 +17133,57 @@ var TicketCard = React49__namespace.forwardRef(
                 children: description
               }
             ),
-            (price || capacity) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ticketCardPriceCapacityContainerVariants({ size: size3 }), children: [
-              price && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: size3 === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ticketCardPriceVariants({ size: size3 }), children: price }) }),
-              capacity && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: size3 === "compact" ? "xs" : "sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ticketCardCapacityVariants({ size: size3 }), children: capacity }) })
-            ] }),
-            availabilityLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ticketCardAvailabilityVariants({ availability }), children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", variant: availability === "sold_out" ? "muted" : "primary", children: availabilityLabel }) })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataVariants({ size: size3 }), children: [
+              date && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), role: "text", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  IconCalendar,
+                  {
+                    className: eventCardMetadataIconVariants({ size: size3 }),
+                    "aria-hidden": true
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", muted: true, children: /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: date, children: date }) })
+              ] }),
+              venueName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), role: "text", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  IconLocation,
+                  {
+                    className: eventCardMetadataIconVariants({ size: size3 }),
+                    "aria-hidden": true
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", muted: true, className: "line-clamp-1", children: /* @__PURE__ */ jsxRuntime.jsx("address", { children: venueName }) })
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", ticketCardFooterVariants({ size: size3 })), children: [
-            purchaseUrl && !isPurchaseDisabled && /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", eventCardFooterVariants({ size: size3 })), children: [
+            ticketUrl && /* @__PURE__ */ jsxRuntime.jsxs(
               Link,
               {
-                href: purchaseUrl,
-                className: cn(
-                  "w-full",
-                  ticketCardPurchaseButtonVariants({ size: size3, disabled: false })
-                ),
+                href: ticketUrl,
+                className: cn("w-full", eventCardTicketButtonVariants({ size: size3 })),
                 target: "_blank",
                 rel: "noopener noreferrer",
                 children: [
-                  purchaseLabel,
-                  /* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
+                  getTicketsLabel,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    IconArrowRight,
+                    {
+                      className: eventCardTicketButtonIconVariants({ size: size3 }),
+                      "aria-hidden": true
+                    }
+                  )
                 ]
               }
             ),
-            (!purchaseUrl || isPurchaseDisabled) && /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: cn(
-                  "w-full",
-                  ticketCardPurchaseButtonVariants({ size: size3, disabled: isPurchaseDisabled })
-                ),
-                children: [
-                  purchaseLabel,
-                  /* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
-                ]
-              }
-            )
+            !ticketUrl && price && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: size3 === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventCardPriceVariants({ size: size3 }), children: price }) }) })
           ] }) })
         ]
       }
     ) });
   }
 );
-TicketCard.displayName = "TicketCard";
+EventCard.displayName = "EventCard";
 
 exports.ALERT_TOKENS = ALERT_TOKENS;
 exports.Alert = Alert;
@@ -16138,6 +17201,7 @@ exports.Card = Card;
 exports.CardBody = CardBody;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
+exports.CategoryCard = CategoryCard;
 exports.Checkbox = Checkbox;
 exports.Code = Code;
 exports.Column = Column;