@tenerife.music/ui 1.0.15 → 1.0.16

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
 import * as React49 from 'react';
 import { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -22,13 +22,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
 };
@@ -38,12 +43,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 = {
@@ -52,12 +60,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 = {
@@ -150,13 +161,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)
   },
@@ -468,6 +479,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 = {
   /**
@@ -500,25 +644,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
    */
@@ -528,15 +695,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
@@ -551,50 +722,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: {
@@ -602,16 +860,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)
+    }
   }
 };
 
@@ -1147,139 +1483,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 = {
   /**
@@ -3071,8 +3274,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
@@ -3097,6 +3308,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",
@@ -3620,9 +3833,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
     }
   }
@@ -4378,13 +4591,13 @@ var DROPDOWN_TOKENS = {
    */
   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
@@ -4636,9 +4849,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: {
@@ -5736,54 +5949,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)" },
@@ -5804,8 +6017,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%": {
@@ -5827,7 +6040,7 @@ var keyframes = {
   ping: {
     "75%, 100%": {
       transform: "scale(2)",
-      opacity: 0
+      opacity: "0"
     }
   },
   // Accordion animations (for Radix UI)
@@ -6786,6 +6999,83 @@ 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 cva(config.base, {
+    variants: config.variants,
+    compoundVariants: config.compoundVariants,
+    defaultVariants: config.defaultVariants
+  });
+}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -6796,38 +7086,92 @@ function formatDate(date) {
     year: "numeric"
   }).format(new Date(date));
 }
-var buttonVariants = 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}`
-      }
+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.forwardRef(
   ({ className, variant, size: size3, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsxs(Comp, { className: cn(buttonVariants({ variant, size: size3, className })), ref, ...props, children: [
-      leftIcon && /* @__PURE__ */ 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__ */ jsxs(Comp, { className: finalClassName, ref, ...props, children: [
+      leftIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current",
+            iconSizeClass
+          ),
+          children: leftIcon
+        }
+      ),
       children,
-      rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: rightIcon })
+      rightIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current",
+            iconSizeClass
+          ),
+          children: rightIcon
+        }
+      )
     ] });
   }
 );
@@ -6922,14 +7266,14 @@ Alert.displayName = "Alert";
 var bodyVariants = 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",
@@ -6957,22 +7301,31 @@ var Body = React49.forwardRef(
   }
 );
 Body.displayName = "Body";
-var captionVariants = cva("font-sans text-foreground", {
-  variants: {
-    weight: {
-      normal: "font-normal",
-      medium: "font-medium"
+var captionVariants = 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.forwardRef(
   ({ className, weight, muted, as = "span", children, ...props }, ref) => {
     const Component = as;
@@ -6980,11 +7333,7 @@ var Caption = React49.forwardRef(
       Component,
       {
         ref,
-        className: cn(
-          "text-xs leading-tight tracking-wide",
-          captionVariants({ weight, muted }),
-          className
-        ),
+        className: cn(captionVariants({ weight, muted }), className),
         ...props,
         children
       }
@@ -6992,11 +7341,43 @@ var Caption = React49.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 = 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",
@@ -7026,16 +7407,16 @@ Code.displayName = "Code";
 var displayVariants = 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"
+      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",
@@ -7067,149 +7448,87 @@ var Display = React49.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 = 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
@@ -7233,8 +7552,8 @@ Heading.displayName = "Heading";
 var leadVariants = 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",
@@ -7371,7 +7690,7 @@ function getSpacingPx(token) {
   return 4;
 }
 var selectTriggerVariants = 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: {
@@ -7830,7 +8149,7 @@ var ModalClose = React49.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,
@@ -8422,8 +8741,10 @@ var Input = React49.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,
@@ -8888,45 +9209,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.forwardRef(
   ({
     as: Component = "div",
@@ -8944,14 +9226,9 @@ var Box = React49.forwardRef(
     mr,
     mb,
     ml,
-    display,
-    flexDirection,
     radius,
     shadow,
     bg,
-    gap,
-    align,
-    justify,
     className,
     style,
     ...props
@@ -8972,7 +9249,6 @@ var Box = React49.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 && {
@@ -9002,18 +9278,9 @@ var Box = React49.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
@@ -9024,18 +9291,46 @@ var Box = React49.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.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__ */ 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
       }
     );
@@ -9146,7 +9441,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";
@@ -9199,8 +9494,10 @@ var Flex = React49.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),
@@ -9219,15 +9516,13 @@ var Flex = React49.forwardRef(
     })();
     const flexStyle = {
       ...flexBasisCSS ? { flexBasis: flexBasisCSS } : {},
+      ...gapBaseValue !== void 0 && { gap: getSpacingCSSVar(String(gapBaseValue)) },
       ...style
     };
     return /* @__PURE__ */ jsx(
       Box,
       {
         ref,
-        display: "flex",
-        flexDirection: directionValue,
-        gap,
         className: flexClasses,
         style: Object.keys(flexStyle).length > 0 ? flexStyle : void 0,
         ...props
@@ -9294,7 +9589,22 @@ function justifyToClass3(value) {
   return void 0;
 }
 var Grid = React49.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") {
@@ -9363,23 +9673,25 @@ var Grid = React49.forwardRef(
       justifyToClass3(justifyValue),
       className
     );
-    return /* @__PURE__ */ 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__ */ jsx(
+      Box,
+      {
+        ref,
+        className: cn("grid", gridClasses),
+        style: Object.keys(gridStyle).length > 0 ? gridStyle : void 0,
+        ...props
+      }
+    );
   }
 );
 Grid.displayName = "Grid";
-var Row = React49.forwardRef(({ gap, align, justify, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref,
-      display: "flex",
-      flexDirection: "row",
-      gap,
-      align,
-      justify,
-      ...props
-    }
-  );
+var Row = React49.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Stack, { ref, direction: "horizontal", ...props });
 });
 Row.displayName = "Row";
 var surfaceVariants = cva("", {
@@ -9761,7 +10073,7 @@ var ToastRoot = React49.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
@@ -9819,7 +10131,7 @@ var ToastAction = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     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,
@@ -10259,7 +10571,7 @@ var NotificationCenterItem = React49.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__ */ jsx(X, { className: "h-4 w-4" })
             }
           )
@@ -12403,7 +12715,7 @@ function usePositioning({
       return offsetValue;
     }
     const baseOffset = getBaseValue(offsetValue);
-    return baseOffset ? getSpacingPx(baseOffset) : 4;
+    return baseOffset ? getSpacingPx(baseOffset) : getSpacingPx(1);
   }, [offsetValue]);
   React49.useEffect(() => {
     setMounted(true);
@@ -12414,7 +12726,7 @@ function usePositioning({
       middlewareArray.push(flip3());
     }
     if (enableShift) {
-      middlewareArray.push(shift3({ padding: 8 }));
+      middlewareArray.push(shift3({ padding: getSpacingPx(2) }));
     }
     return middlewareArray;
   }, [offsetPx, enableFlip, enableShift]);
@@ -12773,7 +13085,7 @@ var DropdownMenuItem = React49.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
@@ -13256,9 +13568,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: {