@tenerife.music/ui 4.0.0 → 5.0.0

package/dist/index-B9bPI2VR.d.cts

@@ -1,4523 +0,0 @@
-import './colors-BRUYtnG-.cjs';
-import './index-4rLh47Jk.cjs';
-import './typography-BsoBDDcG.cjs';
-
-/**
- * Alert Component Tokens
- *
- * Component-level design tokens for Alert component.
- * Maps foundation tokens (spacing, radius) to alert-specific usage.
- *
- * All values reference foundation tokens to ensure consistency across the design system.
- */
-/**
- * Alert Component Tokens
- *
- * Defines spacing, sizing, and visual tokens for Alert component.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-declare const ALERT_TOKENS: {
-    /**
-     * Padding for alert content
-     */
-    readonly padding: "p-md";
-    /**
-     * Border radius for alerts
-     */
-    readonly radius: "rounded-lg";
-    /**
-     * Border token
-     * Base border style
-     */
-    readonly border: "border";
-    /**
-     * Icon size within alerts
-     */
-    readonly iconSize: "size-4";
-    /**
-     * Variant-based token structure
-     * Organized by variant for token-driven styling
-     */
-    readonly variant: {
-        readonly default: {
-            readonly background: "bg-[hsl(var(--tm-muted))]";
-            readonly border: "border-[hsl(var(--tm-border-default))]";
-            readonly text: "text-[hsl(var(--tm-text-primary))]";
-        };
-        readonly primary: {
-            readonly background: "bg-[hsl(var(--tm-primary))]/10";
-            readonly border: "border-[hsl(var(--tm-primary))]/20";
-            readonly text: "text-[hsl(var(--tm-primary-foreground))]";
-        };
-        readonly secondary: {
-            readonly background: "bg-[hsl(var(--tm-secondary))]/10";
-            readonly border: "border-[hsl(var(--tm-secondary))]/20";
-            readonly text: "text-[hsl(var(--tm-secondary-foreground))]";
-        };
-        readonly accent: {
-            readonly background: "bg-[hsl(var(--tm-accent))]/10";
-            readonly border: "border-[hsl(var(--tm-accent))]/20";
-            readonly text: "text-[hsl(var(--tm-accent-foreground))]";
-        };
-        readonly destructive: {
-            readonly background: "bg-[hsl(var(--tm-destructive))]/10";
-            readonly border: "border-[hsl(var(--tm-destructive))]/20";
-            readonly text: "text-[hsl(var(--tm-destructive-foreground))]";
-        };
-    };
-};
-
-/**
- * Button Component Tokens
- *
- * Component-level design tokens for Button component.
- * Maps foundation tokens (spacing, typography, radius, shadows, motion) to button-specific usage.
- *
- * @component Button
- * @see {@link ../PRIMITIVES/Button/Button.tsx} - Button component implementation
- * @see {@link ../PRIMITIVES/Button/Button.stories.tsx} - Storybook examples
- *
- * @example
- * // Basic usage
- * <Button>Click Me</Button>
- *
- * @example
- * // With variant
- * <Button variant="primary">Primary Button</Button>
- *
- * @example
- * // With size
- * <Button size="lg">Large Button</Button>
- *
- * @example
- * // With icons
- * <Button leftIcon={<IconSearch />} rightIcon={<IconArrowRight />}>
- *   Search
- * </Button>
- *
- * @example
- * // Icon-only button
- * <Button iconOnly size="md" aria-label="Search">
- *   <IconSearch />
- * </Button>
- *
- * @example
- * // Disabled state
- * <Button disabled>Disabled Button</Button>
- *
- * All values reference foundation tokens to ensure consistency across the design system.
- *
- * Authority Compliance:
- * - Motion Authority: Uses MOTION_TOKENS.transitionPreset.colors
- * - Radius Authority: References componentRadius.button.md
- * - Typography Authority: References fontSize tokens
- * - Spacing Authority: References semanticSpacing tokens
- * - State Authority: Uses State Matrix CSS variables
- * - Interaction Authority: Follows Interaction Authority Contract
- *
- * @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
- * @see docs/architecture/MOTION_AUTHORITY_CONTRACT.md
- * @see docs/architecture/RADIUS_AUTHORITY_CONTRACT.md
- * @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
- * @see docs/architecture/SPACING_AUTHORITY_CONTRACT.md
- */
-/**
- * Button Component Tokens
- *
- * Defines all spacing, sizing, typography, and visual tokens for Button component.
- * Values are mapped to Tailwind utility classes for direct use in component variants.
- */
-declare const BUTTON_TOKENS: {
-    /**
-     * Button heights by size
-     * Maps to Tailwind height utilities: h-8, h-9, h-10
-     *
-     * @example
-     * // Small size button (32px height)
-     * <Button size="sm">Small Button</Button>
-     *
-     * @example
-     * // Medium size button (36px height, default)
-     * <Button size="md">Medium Button</Button>
-     *
-     * @example
-     * // Large size button (40px height)
-     * <Button size="lg">Large Button</Button>
-     */
-    readonly height: {
-        readonly sm: "h-8";
-        readonly md: "h-9";
-        readonly lg: "h-10";
-    };
-    /**
-     * Button padding by size
-     * Horizontal and vertical padding values
-     *
-     * @example
-     * // Padding is automatically applied based on size prop
-     * <Button size="sm">Small Button</Button> // Uses px-sm py-xs
-     * <Button size="md">Medium Button</Button> // Uses px-md py-sm
-     * <Button size="lg">Large Button</Button> // Uses px-lg py-md
-     */
-    readonly padding: {
-        readonly horizontal: {
-            readonly sm: "px-sm";
-            readonly md: "px-md";
-            readonly lg: "px-lg";
-        };
-        readonly vertical: {
-            readonly sm: "py-xs";
-            readonly md: "py-sm";
-            readonly lg: "py-md";
-        };
-    };
-    /**
-     * Gap between icon and text by size
-     * Scales with button size for visual consistency
-     *
-     * @example
-     * // Gap is automatically applied between icon and text
-     * <Button size="sm" leftIcon={<IconSearch />}>Search</Button> // Uses gap-xs
-     * <Button size="md" leftIcon={<IconSearch />}>Search</Button> // Uses gap-sm
-     * <Button size="lg" leftIcon={<IconSearch />}>Search</Button> // Uses gap-md
-     */
-    readonly gap: {
-        readonly sm: "gap-xs";
-        readonly md: "gap-sm";
-        readonly lg: "gap-md";
-    };
-    /**
-     * 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
-     */
-    readonly radius: "rounded-md";
-    /**
-     * Icon size within buttons by button size
-     * Scales proportionally with button size for visual balance
-     * Contains full SVG selector classes for direct use in CVA
-     *
-     * @example
-     * // Icon size scales automatically with button size
-     * <Button size="sm" leftIcon={<IconSearch />}>Search</Button> // Icon: 14px
-     * <Button size="md" leftIcon={<IconSearch />}>Search</Button> // Icon: 16px
-     * <Button size="lg" leftIcon={<IconSearch />}>Search</Button> // Icon: 20px
-     */
-    readonly iconSize: {
-        readonly sm: "[&_svg]:w-3.5 [&_svg]:h-3.5";
-        readonly md: "[&_svg]:w-4 [&_svg]:h-4";
-        readonly lg: "[&_svg]:w-5 [&_svg]:h-5";
-    };
-    /**
-     * Width tokens
-     * Used for icon-only buttons (square buttons with equal width and height)
-     *
-     * @example
-     * // Width matches height for icon-only buttons
-     * <Button iconOnly size="sm" aria-label="Search"><IconSearch /></Button> // 32x32px
-     * <Button iconOnly size="md" aria-label="Search"><IconSearch /></Button> // 36x36px
-     * <Button iconOnly size="lg" aria-label="Search"><IconSearch /></Button> // 40x40px
-     */
-    readonly width: {
-        readonly sm: "w-8";
-        readonly md: "w-9";
-        readonly lg: "w-10";
-    };
-    /**
-     * Padding token for icon-only buttons
-     * Zero padding required for square dimensions (icon-only buttons have no text, so no padding needed)
-     * Uses p-0 which is a standard Tailwind class for zero spacing (spacing[0])
-     *
-     * @example
-     * // Icon-only buttons use zero padding for square dimensions
-     * <Button iconOnly size="md" aria-label="Search">
-     *   <IconSearch />
-     * </Button>
-     */
-    readonly paddingIconOnly: "p-0";
-    /**
-     * Font sizes by button size
-     * 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
-     *
-     * @example
-     * // Small font size (~12px)
-     * <Button size="sm">Small Text</Button>
-     *
-     * @example
-     * // Medium font size (~14px, default)
-     * <Button size="md">Medium Text</Button>
-     *
-     * @example
-     * // Large font size (~16px)
-     * <Button size="lg">Large Text</Button>
-     */
-    readonly fontSize: {
-        /** Small font size (~12px) */
-        readonly sm: "text-xs";
-        /** Medium font size (~14px, default) */
-        readonly md: "text-sm";
-        /** Large font size (~16px) */
-        readonly lg: "text-base";
-    };
-    /**
-     * Shadow tokens by variant
-     * Maps to foundation elevation shadow tokens
-     */
-    readonly shadow: {
-        readonly default: "shadow-sm";
-        readonly primary: "shadow";
-    };
-    /**
-     * 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
-     *
-     * @example
-     * // Primary variant - emphasized button with shadow (default)
-     * <Button variant="primary">Get Started</Button>
-     *
-     * @example
-     * // Secondary variant - secondary button style
-     * <Button variant="secondary">Learn More</Button>
-     *
-     * @example
-     * // Accent variant - accent color button
-     * <Button variant="accent">Explore Feature</Button>
-     *
-     * @example
-     * // Outline variant - bordered button
-     * <Button variant="outline">Cancel</Button>
-     *
-     * @example
-     * // Ghost variant - subtle background button
-     * <Button variant="ghost">Menu Item</Button>
-     *
-     * @example
-     * // Destructive variant - danger/delete actions
-     * <Button variant="destructive">Delete</Button>
-     *
-     * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
-     */
-    readonly variant: {
-        /**
-         * Primary variant - emphasized button with shadow (default variant)
-         * @example
-         * <Button variant="primary">Get Started</Button>
-         */
-        readonly primary: {
-            readonly background: "bg-[hsl(var(--button-primary-base-bg))]";
-            readonly text: "text-primary-foreground";
-            readonly hover: "hover:bg-[hsl(var(--button-primary-hover-bg))]";
-            readonly active: "active:bg-[hsl(var(--button-primary-active-bg))]";
-            readonly focus: "focus-visible:bg-[hsl(var(--button-primary-focus-bg))]";
-            readonly disabled: {
-                readonly background: "disabled:bg-[hsl(var(--button-primary-disabled-bg))]";
-                readonly text: "disabled:text-[hsl(var(--button-primary-disabled-text))]";
-            };
-            readonly loading: "bg-[hsl(var(--button-primary-loading-bg))]";
-        };
-        /**
-         * Secondary variant - secondary button style
-         * @example
-         * <Button variant="secondary">Learn More</Button>
-         */
-        readonly secondary: {
-            readonly background: "bg-secondary";
-            readonly text: "text-secondary-foreground";
-            readonly hover: "hover:bg-[hsl(var(--button-secondary-hover-bg))]";
-            readonly active: "active:bg-[hsl(var(--button-secondary-active-bg))]";
-            readonly disabled: {
-                readonly background: "disabled:bg-[hsl(var(--button-secondary-disabled-bg))]";
-                readonly text: "disabled:text-[hsl(var(--button-secondary-disabled-text))]";
-            };
-        };
-        /**
-         * Accent variant - accent color button
-         * @example
-         * <Button variant="accent">Explore Feature</Button>
-         */
-        readonly accent: {
-            readonly background: "bg-accent";
-            readonly text: "text-accent-foreground";
-            readonly hover: "hover:bg-[hsl(var(--button-accent-hover-bg))]";
-            readonly active: "active:bg-[hsl(var(--button-accent-active-bg))]";
-            readonly disabled: {
-                readonly background: "disabled:bg-[hsl(var(--button-accent-disabled-bg))]";
-                readonly text: "disabled:text-[hsl(var(--button-accent-disabled-text))]";
-            };
-        };
-        /**
-         * Outline variant - bordered button
-         * @example
-         * <Button variant="outline">Cancel</Button>
-         */
-        readonly outline: {
-            readonly border: "border border-input";
-            readonly background: "bg-background";
-            readonly text: "text-foreground";
-            readonly hover: {
-                readonly background: "hover:bg-[hsl(var(--button-outline-hover-bg))]";
-                readonly text: "hover:text-[hsl(var(--button-outline-hover-text))]";
-                readonly border: "hover:border-[hsl(var(--button-outline-hover-border))]";
-            };
-            readonly active: {
-                readonly background: "active:bg-[hsl(var(--button-outline-active-bg))]";
-                readonly text: "active:text-[hsl(var(--button-outline-active-text))]";
-                readonly border: "active:border-[hsl(var(--button-outline-active-border))]";
-            };
-            readonly disabled: {
-                readonly background: "disabled:bg-[hsl(var(--button-outline-disabled-bg))]";
-                readonly text: "disabled:text-[hsl(var(--button-outline-disabled-text))]";
-                readonly border: "disabled:border-[hsl(var(--button-outline-disabled-border))]";
-            };
-        };
-        /**
-         * Ghost variant - subtle background button
-         * @example
-         * <Button variant="ghost">Menu Item</Button>
-         */
-        readonly ghost: {
-            readonly background: "bg-muted/10";
-            readonly text: "text-foreground";
-            readonly hover: {
-                readonly background: "hover:bg-[hsl(var(--button-ghost-hover-bg))]";
-                readonly text: "hover:text-[hsl(var(--button-ghost-hover-text))]";
-            };
-            readonly active: {
-                readonly background: "active:bg-[hsl(var(--button-ghost-active-bg))]";
-                readonly text: "active:text-[hsl(var(--button-ghost-active-text))]";
-            };
-            readonly disabled: {
-                readonly background: "disabled:bg-[hsl(var(--button-ghost-disabled-bg))]";
-                readonly text: "disabled:text-[hsl(var(--button-ghost-disabled-text))]";
-            };
-        };
-        /**
-         * Destructive variant - danger/delete actions
-         * @example
-         * <Button variant="destructive">Delete</Button>
-         */
-        readonly destructive: {
-            readonly background: "bg-destructive";
-            readonly text: "text-destructive-foreground";
-            readonly hover: "hover:bg-[hsl(var(--button-destructive-hover-bg))]";
-            readonly active: "active:bg-[hsl(var(--button-destructive-active-bg))]";
-            readonly disabled: {
-                readonly background: "disabled:bg-[hsl(var(--button-destructive-disabled-bg))]";
-                readonly text: "disabled:text-[hsl(var(--button-destructive-disabled-text))]";
-            };
-        };
-    };
-    /**
-     * 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
-     */
-    readonly transition: {
-        readonly colors: "transition-colors duration-normal ease-out";
-    };
-    /**
-     * 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
-     */
-    readonly 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)
-         *
-         * @example
-         * // Disabled button with proper accessibility attributes
-         * <Button disabled>Disabled Button</Button>
-         *
-         * @example
-         * // Disabled button prevents all interactions (hover, active, focus)
-         * <Button disabled onClick={handleClick}>
-         *   Cannot Click
-         * </Button>
-         *
-         * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
-         */
-        readonly disabled: {
-            readonly cursor: "disabled:cursor-not-allowed";
-            readonly pointerEvents: "disabled:pointer-events-none";
-        };
-        /**
-         * 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
-         *
-         * @example
-         * // Focus ring appears automatically on keyboard navigation (Tab key)
-         * <Button>Focusable Button</Button>
-         *
-         * @example
-         * // Focus is disabled when button is disabled
-         * <Button disabled>Disabled Button</Button>
-         *
-         * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
-         */
-        readonly focus: {
-            readonly ring: "focus-visible:ring-1 focus-visible:ring-ring";
-            readonly outline: "focus-visible:outline-none";
-        };
-    };
-};
-/**
- * Type exports for Button tokens
- */
-type ButtonHeight = keyof typeof BUTTON_TOKENS.height;
-type ButtonPaddingHorizontal = keyof typeof BUTTON_TOKENS.padding.horizontal;
-type ButtonPaddingVertical = keyof typeof BUTTON_TOKENS.padding.vertical;
-type ButtonFontSize = keyof typeof BUTTON_TOKENS.fontSize;
-type ButtonShadow = keyof typeof BUTTON_TOKENS.shadow;
-
-/**
- * Card Component Tokens
- *
- * Component-level design tokens for Card component.
- * Maps foundation tokens (spacing, radius, shadows) to card-specific usage.
- *
- * Prepared for future size variants (sm, md, lg).
- */
-/**
- * Card Component Tokens
- *
- * Defines spacing, radius, and shadow tokens for Card component.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-declare const CARD_TOKENS: {
-    /**
-     * Padding for card sections (CardHeader, CardContent, CardFooter)
-     */
-    readonly padding: {
-        readonly sm: "p-sm";
-        readonly md: "p-lg";
-        readonly lg: "p-xl";
-    };
-    /**
-     * Border radius for cards
-     */
-    readonly radius: {
-        readonly sm: "rounded-md";
-        readonly md: "rounded-xl";
-        readonly lg: "rounded-2xl";
-    };
-    /**
-     * Vertical spacing within card sections
-     * Used for CardHeader spacing
-     */
-    readonly spacing: {
-        readonly vertical: {
-            readonly xs: "space-y-xs";
-            readonly sm: "space-y-sm";
-            readonly md: "space-y-md";
-        };
-    };
-    /**
-     * Shadow (elevation) for cards
-     * Maps to foundation elevation shadow tokens
-     */
-    readonly shadow: {
-        readonly default: "shadow";
-        readonly sm: "shadow-sm";
-        readonly md: "shadow-md";
-        readonly lg: "shadow-lg";
-    };
-    /**
-     * Size-based token structure
-     * Organized by size for easy access
-     */
-    readonly size: {
-        readonly sm: {
-            readonly padding: "p-sm";
-            readonly paddingValue: "sm";
-            readonly radius: "rounded-md";
-            readonly radiusValue: "md";
-            readonly shadow: "shadow-sm";
-            readonly shadowValue: "sm";
-            readonly spacing: {
-                readonly vertical: "space-y-xs";
-            };
-        };
-        readonly md: {
-            readonly padding: "p-lg";
-            readonly paddingValue: "lg";
-            readonly radius: "rounded-xl";
-            readonly radiusValue: "xl";
-            readonly shadow: "shadow";
-            readonly shadowValue: "xs";
-            readonly spacing: {
-                readonly vertical: "space-y-xs";
-            };
-        };
-        readonly lg: {
-            readonly padding: "p-xl";
-            readonly paddingValue: "xl";
-            readonly radius: "rounded-2xl";
-            readonly radiusValue: "2xl";
-            readonly shadow: "shadow-md";
-            readonly shadowValue: "md";
-            readonly spacing: {
-                readonly vertical: "space-y-sm";
-            };
-        };
-    };
-};
-/**
- * Type exports for Card tokens
- */
-type CardPadding = keyof typeof CARD_TOKENS.padding;
-type CardRadius = keyof typeof CARD_TOKENS.radius;
-type CardSpacingVertical = keyof typeof CARD_TOKENS.spacing.vertical;
-type CardShadow = keyof typeof CARD_TOKENS.shadow;
-type CardSize = keyof typeof CARD_TOKENS.size;
-
-/**
- * Artist Card Component Tokens
- *
- * Domain-specific design tokens for ArtistCard component.
- * Provides artist-specific styling tokens that complement DOMAIN_TOKENS.
- * All values reference foundation tokens or other component tokens.
- *
- * Foundation tokens referenced:
- * - DOMAIN_TOKENS: image, spacing, metadata, text from src/tokens/components/domain.ts
- * - Layout utilities: flex, positioning, sizing from Tailwind (allowed)
- */
-/**
- * Artist Card Component Tokens
- *
- * Defines artist-specific tokens for ArtistCard component.
- * Values reference DOMAIN_TOKENS and foundation tokens where possible.
- */
-declare const ARTIST_TOKENS: {
-    /**
-     * Image container tokens
-     * Layout classes for image container wrapper
-     */
-    readonly image: {
-        /**
-         * Container layout tokens
-         * Positioning and sizing for image container
-         */
-        readonly container: {
-            /**
-             * Base container layout
-             * Relative positioning, full width, overflow hidden
-             * Uses Tailwind layout utilities (allowed per architecture)
-             */
-            readonly layout: "relative w-full overflow-hidden";
-        };
-        /**
-         * Image sizing tokens
-         * Full width and height for images
-         */
-        readonly sizing: {
-            /**
-             * Full size image
-             * Uses Tailwind sizing utilities (allowed per architecture)
-             */
-            readonly full: "h-full w-full";
-        };
-        /**
-         * Placeholder container tokens
-         * Layout for placeholder icon container when no image is provided
-         */
-        readonly placeholder: {
-            /**
-             * Placeholder container layout
-             * Flex centering for placeholder icon
-             * Uses Tailwind layout utilities (allowed per architecture)
-             */
-            readonly container: "flex h-full w-full items-center justify-center";
-        };
-    };
-    /**
-     * Footer border tokens
-     * Border styling for card footer separator
-     */
-    readonly footer: {
-        /**
-         * Footer border tokens
-         * Top border separator for footer section
-         */
-        readonly border: {
-            /**
-             * Footer border top
-             * Uses semantic border color token
-             */
-            readonly top: "border-t border-border";
-        };
-    };
-};
-/**
- * Type exports for Artist Card tokens
- */
-type ArtistCardImageContainer = typeof ARTIST_TOKENS.image.container;
-type ArtistCardImageSizing = typeof ARTIST_TOKENS.image.sizing;
-type ArtistCardImagePlaceholder = typeof ARTIST_TOKENS.image.placeholder;
-type ArtistCardFooterBorder = typeof ARTIST_TOKENS.footer.border;
-
-/**
- * Domain Component Tokens
- *
- * Domain-specific design tokens for card components (EventCard, VenueCard, ArtistCard,
- * TicketCard, PromoCard, CategoryCard). These tokens provide a consistent foundation
- * for card surface styles, layout, images, metadata, badges, price/capacity displays,
- * hover/motion states, and skeleton loading states.
- *
- * All values reference foundation tokens or other component tokens.
- * Based on audit requirements from L3_CARD_AUDIT.md.
- *
- * Foundation tokens referenced:
- * - SPACING_TOKENS: semanticSpacing (xs, sm, md, lg, xl, 2xl, 3xl) from src/tokens/spacing.ts
- * - RADIUS_TOKENS: borderRadius (xs, sm, md, lg, xl, 2xl, full) from src/tokens/radius.ts
- * - TEXT_TOKENS: fontSize, fontWeight from src/tokens/components/text.ts
- * - ICON_TOKENS: sizes, colors from src/tokens/components/icon.ts
- * - SHADOW_TOKENS: elevationShadows (xs, sm, md, lg, xl, 2xl) from src/tokens/shadows.ts
- * - MOTION_TOKENS: transition, transitionPreset from src/tokens/components/motion.ts
- * - DATA_TOKENS: skeleton patterns from src/tokens/components/data.ts
- */
-/**
- * Domain Card Component Tokens
- *
- * Defines all tokens for domain-specific card components.
- * Values reference foundation tokens or other component tokens.
- */
-declare const DOMAIN_TOKENS: {
-    /**
-     * Surface tokens for card containers
-     * Defines background, border, radius, and shadow for card surfaces
-     */
-    readonly surface: {
-        /**
-         * Background colors
-         * Maps to semantic color tokens
-         */
-        readonly bg: {
-            readonly default: "bg-card";
-            readonly hover: "hover:bg-card/95";
-        };
-        /**
-         * Border styles
-         * Maps to semantic border tokens
-         */
-        readonly border: {
-            readonly default: "border border-border";
-            readonly hover: "hover:border-primary/20";
-        };
-        /**
-         * Border radius
-         * References borderRadius.xl (0.75rem / 12px)
-         * Using Tailwind class "rounded-xl" which maps to borderRadius.xl
-         */
-        readonly radius: {
-            readonly default: "rounded-xl";
-        };
-        /**
-         * Shadow (elevation) tokens
-         * References elevationShadows.md
-         * Using Tailwind class "shadow-md" which maps to elevationShadows.md
-         */
-        readonly shadow: {
-            readonly default: "shadow-md";
-        };
-        /**
-         * Elevation change on hover
-         * References elevationShadows.xl
-         * Using Tailwind class "hover:shadow-xl" which maps to elevationShadows.xl
-         */
-        readonly elevation: {
-            readonly hover: "hover:shadow-xl";
-        };
-    };
-    /**
-     * Spacing tokens for card component spacing
-     * References semanticSpacing tokens
-     * Note: Tailwind classes are used for component className application
-     */
-    readonly spacing: {
-        /**
-         * Section spacing - vertical spacing between card sections
-         */
-        readonly section: {
-            readonly titleToSubtitle: "mb-xs";
-            readonly subtitleToMetadata: "mb-sm";
-        };
-        /**
-         * Badge spacing offsets
-         */
-        readonly badges: {
-            readonly offsetX: "1rem";
-            readonly offsetY: "1rem";
-        };
-        /**
-         * Image spacing
-         */
-        readonly image: {
-            readonly bottomMargin: "0";
-        };
-        /**
-         * Card vertical gap
-         */
-        readonly card: {
-            readonly verticalGap: "1rem";
-        };
-        /**
-         * Metadata item gap
-         */
-        readonly metadata: {
-            readonly itemGap: "0.25rem";
-        };
-        /**
-         * Footer spacing
-         */
-        readonly footer: {
-            readonly paddingTopDefault: "pt-sm";
-            readonly paddingTopCompact: "pt-xs";
-        };
-        /**
-         * Button spacing
-         */
-        readonly button: {
-            readonly paddingDefault: "px-md py-xs";
-            readonly paddingCompact: "px-sm py-xs";
-            readonly iconMarginLeft: "ml-xs";
-        };
-    };
-    /**
-     * Layout tokens for card spacing and gaps
-     * References semanticSpacing tokens
-     * Note: Tailwind utilities are used for component className application
-     */
-    readonly layout: {
-        /**
-         * Padding tokens
-         * References semanticSpacing (md = 16px, sm = 8px)
-         * Note: "p-md" and "p-sm" are Tailwind utilities that apply semanticSpacing values
-         */
-        readonly padding: {
-            readonly default: "p-md";
-            readonly compact: "p-sm";
-        };
-        /**
-         * Gap tokens for spacing between card elements
-         * References semanticSpacing (md = 16px, xs = 4px)
-         * Note: "gap-md" and "gap-xs" are Tailwind utilities that apply semanticSpacing values
-         */
-        readonly gap: {
-            readonly default: "gap-md";
-            readonly compact: "gap-xs";
-        };
-    };
-    /**
-     * Image tokens for card media
-     * Defines aspect ratio, radius, overlay styles, and placeholder gradients
-     */
-    readonly image: {
-        /**
-         * Aspect ratio for card images
-         * Standard 16:9 aspect ratio for card images
-         */
-        readonly aspectRatio: "aspect-video";
-        /**
-         * Border radius for images
-         * References borderRadius.xl (0.75rem / 12px) for top corners only
-         * Using Tailwind class "rounded-t-xl" which maps to borderRadius.xl
-         */
-        readonly radius: "rounded-t-xl";
-        /**
-         * Overlay gradient tokens for image overlays
-         * Used for hover states and text readability
-         * References GRADIENT_TOKENS.overlay.dark
-         */
-        readonly overlay: {
-            readonly gradient: "bg-gradient-to-t from-black/60 via-transparent to-transparent";
-        };
-        /**
-         * Placeholder gradient tokens for image placeholders
-         * Used when no image URL is provided
-         * References GRADIENT_TOKENS.surface.muted
-         */
-        readonly placeholder: {
-            readonly gradient: "bg-gradient-to-br from-muted to-muted/50";
-        };
-    };
-    /**
-     * Text tokens for card text elements
-     * Defines hover states and line clamping for titles and descriptions
-     */
-    readonly text: {
-        /**
-         * Hover state tokens for text elements
-         * Used for interactive text elements like titles
-         */
-        readonly hover: {
-            readonly primary: "group-hover:text-primary";
-        };
-        /**
-         * Line clamp tokens for text truncation
-         * Used for limiting text to specific number of lines
-         */
-        readonly lineClamp: {
-            readonly one: "line-clamp-1";
-            readonly two: "line-clamp-2";
-            readonly three: "line-clamp-3";
-        };
-    };
-    /**
-     * Metadata tokens for card information displays
-     * Used for date/time, location, and other metadata patterns
-     * Maps to TEXT_TOKENS, ICON_TOKENS, and semanticSpacing
-     */
-    readonly metadata: {
-        /**
-         * Text color tokens
-         * Maps to semantic text color tokens
-         */
-        readonly text: {
-            readonly primary: "text-foreground";
-            readonly secondary: "text-[hsl(var(--tm-text-muted))]";
-        };
-        /**
-         * Icon tokens
-         * Maps to ICON_TOKENS for sizes and colors
-         */
-        readonly icon: {
-            readonly default: "text-[hsl(var(--tm-text-muted))]";
-            readonly sizeSm: "h-4 w-4";
-        };
-        /**
-         * Spacing tokens for metadata layouts
-         * References semanticSpacing (xs = 4px, sm = 8px)
-         * Using Tailwind classes which map to semanticSpacing values
-         */
-        readonly spacing: {
-            readonly vertical: "gap-xs";
-            readonly horizontal: "gap-sm";
-        };
-    };
-    /**
-     * Badge tokens for featured/popular badges
-     * References semanticSpacing, borderRadius, and elevationShadows
-     */
-    readonly badges: {
-        /**
-         * Badge size tokens (padding)
-         * References semanticSpacing for padding values
-         * Using Tailwind classes which map to semanticSpacing values
-         */
-        readonly size: {
-            readonly sm: "px-xs py-xs";
-            readonly md: "px-sm py-xs";
-        };
-        /**
-         * Badge positioning tokens
-         * References semanticSpacing for absolute positioning
-         * Using Tailwind classes which map to semanticSpacing values
-         */
-        readonly position: {
-            readonly default: "right-md top-md";
-            readonly compact: "right-sm top-sm";
-        };
-        /**
-         * Additional vertical positioning tokens for multi-badge scenarios
-         * References semanticSpacing for top positioning
-         * Using Tailwind classes which map to semanticSpacing values
-         */
-        readonly positionY: {
-            readonly xl: "top-xl";
-            readonly "2xl": "top-2xl";
-            readonly "3xl": "top-3xl";
-        };
-        /**
-         * Badge surface (background) tokens
-         * Maps to semantic color tokens
-         * References GRADIENT_TOKENS.brand.featured for featured badges
-         */
-        readonly surface: {
-            readonly default: "bg-primary";
-            readonly featured: "bg-gradient-to-r from-accent-500 to-primary-600";
-        };
-        /**
-         * Badge text color
-         * White for contrast on colored backgrounds
-         */
-        readonly text: {
-            readonly color: "text-white";
-        };
-        /**
-         * Badge border radius
-         * References borderRadius.full (pill shape)
-         * Using Tailwind class "rounded-full" which maps to borderRadius.full
-         */
-        readonly radius: "rounded-full";
-        /**
-         * Badge shadow
-         * References elevationShadows.lg
-         * Using Tailwind class "shadow-lg" which maps to elevationShadows.lg
-         */
-        readonly shadow: "shadow-lg";
-    };
-    /**
-     * Price/Capacity tokens for displaying price and capacity information
-     * Maps to semantic text color tokens and semanticSpacing
-     */
-    readonly priceCapacity: {
-        /**
-         * Text color tokens
-         * Maps to semantic text color tokens
-         */
-        readonly text: {
-            readonly primary: "text-foreground";
-            readonly secondary: "text-[hsl(var(--tm-text-muted))]";
-        };
-        /**
-         * Spacing between price and capacity elements
-         * References semanticSpacing.sm (8px)
-         * Using Tailwind class "gap-sm" which maps to semanticSpacing.sm
-         */
-        readonly spacing: "gap-sm";
-    };
-    /**
-     * Motion tokens for hover and interaction states
-     * References MOTION_TOKENS for transitions and animations
-     */
-    readonly motion: {
-        /**
-         * Hover state tokens
-         * References MOTION_TOKENS and elevationShadows
-         */
-        readonly hover: {
-            readonly transition: "transition-all duration-normal ease-in-out";
-            readonly scale: "hover:scale-110";
-            readonly elevation: "hover:shadow-xl";
-        };
-    };
-    /**
-     * Skeleton tokens for loading states
-     * References DATA_TOKENS.skeleton for skeleton patterns and semanticSpacing for dimensions
-     */
-    readonly skeleton: {
-        /**
-         * Base skeleton wrapper tokens
-         * Default styling for skeleton wrapper components
-         */
-        readonly base: {
-            /**
-             * Default border radius for skeleton wrapper
-             * References DATA_TOKENS.skeleton.radius.text
-             */
-            readonly radius: "rounded-sm";
-            /**
-             * Default animation for skeleton wrapper
-             * References DATA_TOKENS.skeleton.animation.pulse
-             */
-            readonly animation: "animate-pulse";
-            /**
-             * Default background for skeleton wrapper
-             * References DATA_TOKENS.skeleton.background.default
-             */
-            readonly background: "bg-muted";
-        };
-        /**
-         * Image skeleton height
-         * Domain-specific: card images need 192px (spacing[48] = 12rem)
-         * Note: DATA_TOKENS.skeleton.height.card is 128px, but card images need 192px
-         * Using Tailwind class "h-48" which maps to spacing[48] (12rem / 192px)
-         */
-        readonly image: {
-            readonly height: "h-48";
-        };
-        /**
-         * Content gap for skeleton elements
-         * References semanticSpacing.md (16px)
-         * Using Tailwind class "gap-md" which maps to semanticSpacing.md
-         */
-        readonly content: {
-            readonly gap: "gap-md";
-            /**
-             * Content width tokens for skeleton elements
-             * References DATA_TOKENS where available, uses Tailwind fraction classes for domain-specific values
-             */
-            readonly width: {
-                readonly full: "w-full";
-                readonly threeQuarters: "w-3/4";
-                readonly half: "w-1/2";
-            };
-        };
-        /**
-         * Badge skeleton dimensions
-         * Domain-specific values for badge skeleton sizing
-         * References spacing values via Tailwind classes
-         */
-        readonly badge: {
-            readonly width: "w-20";
-            readonly height: "h-6";
-        };
-    };
-    /**
-     * 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
-     */
-    readonly cta: {
-        /**
-         * CTA button styling tokens
-         * Used by PromoCard and other domain card components for CTA button elements
-         */
-        readonly button: {
-            /**
-             * Button heights by size
-             * Maps to Tailwind height utilities: h-8, h-9
-             */
-            readonly height: {
-                readonly sm: "h-8";
-                readonly md: "h-9";
-            };
-            /**
-             * Button padding by size
-             * Horizontal and vertical padding values
-             * References semanticSpacing tokens
-             */
-            readonly padding: {
-                readonly horizontal: {
-                    readonly sm: "px-sm";
-                    readonly md: "px-md";
-                };
-                readonly vertical: {
-                    readonly sm: "py-xs";
-                };
-            };
-            /**
-             * Border radius for CTA buttons
-             * References borderRadius.md (6px / 0.375rem)
-             * Using Tailwind class "rounded-md" which maps to borderRadius.md
-             */
-            readonly radius: "rounded-md";
-            /**
-             * Font sizes by button size
-             * Maps to foundation typography fontSize tokens
-             */
-            readonly fontSize: {
-                readonly sm: "text-xs";
-                readonly md: "text-sm";
-            };
-            /**
-             * Shadow tokens for CTA buttons
-             * Maps to foundation elevation shadow tokens
-             */
-            readonly shadow: {
-                readonly primary: "shadow";
-            };
-            /**
-             * Color tokens for CTA button variants
-             * Uses semantic color tokens that map to CSS variables
-             */
-            readonly variant: {
-                readonly primary: {
-                    readonly background: "bg-primary";
-                    readonly text: "text-primary-foreground";
-                    readonly hover: "hover:bg-primary/90";
-                };
-            };
-            /**
-             * Transition tokens for CTA buttons
-             * References MOTION_TOKENS for transitions
-             */
-            readonly transition: {
-                readonly colors: "transition-colors";
-            };
-        };
-    };
-};
-/**
- * Type exports for Domain Card tokens
- */
-type DomainCardSurface = typeof DOMAIN_TOKENS.surface;
-type DomainCardLayout = typeof DOMAIN_TOKENS.layout;
-type DomainCardImage = typeof DOMAIN_TOKENS.image;
-type DomainCardMetadata = typeof DOMAIN_TOKENS.metadata;
-type DomainCardBadge = typeof DOMAIN_TOKENS.badges;
-type DomainCardPriceCapacity = typeof DOMAIN_TOKENS.priceCapacity;
-type DomainCardMotion = typeof DOMAIN_TOKENS.motion;
-type DomainCardSkeleton = typeof DOMAIN_TOKENS.skeleton;
-type DomainCardSkeletonContentWidth = typeof DOMAIN_TOKENS.skeleton.content.width;
-
-/**
- * Input Component Tokens
- *
- * Component-level design tokens for Input component.
- * Maps foundation tokens (spacing, typography, radius, shadows) to input-specific usage.
- * All color values use CSS variables for theme-aware styling.
- *
- * @component Input
- * @see {@link ../PRIMITIVES/Input/Input.tsx} - Input component implementation
- * @see {@link ../PRIMITIVES/Input/Input.stories.tsx} - Storybook examples
- *
- * @example
- * // Basic usage
- * <Input placeholder="Enter text..." />
- *
- * @example
- * // With size
- * <Input size="sm" placeholder="Small input" />
- * <Input size="md" placeholder="Medium input" />
- * <Input size="lg" placeholder="Large input" />
- *
- * @example
- * // With invalid state
- * <Input invalid placeholder="Invalid input" aria-describedby="error-id" />
- *
- * @example
- * // Disabled state
- * <Input disabled placeholder="Disabled input" />
- *
- * @example
- * // Different input types
- * <Input type="email" placeholder="Email" />
- * <Input type="password" placeholder="Password" />
- * <Input type="number" placeholder="Number" />
- *
- * All values reference foundation tokens to ensure consistency across the design system.
- * Values are mapped to Tailwind utility classes for direct use in component variants.
- */
-declare const INPUT_TOKENS: {
-    /**
-     * Input heights by size
-     * Supports sm, md, lg sizes (canonical interactive size scale)
-     *
-     * @example
-     * // Small size input (32px height)
-     * <Input size="sm" placeholder="Small input" />
-     *
-     * @example
-     * // Medium size input (36px height, default)
-     * <Input size="md" placeholder="Medium input" />
-     *
-     * @example
-     * // Large size input (40px height)
-     * <Input size="lg" placeholder="Large input" />
-     */
-    readonly height: {
-        readonly sm: "h-8";
-        readonly md: "h-9";
-        readonly lg: "h-10";
-    };
-    /**
-     * Input padding by size
-     * Horizontal and vertical padding values
-     *
-     * @example
-     * // Padding is automatically applied based on size prop
-     * <Input size="sm" placeholder="Small" /> // Uses px-sm py-xs
-     * <Input size="md" placeholder="Medium" /> // Uses px-sm py-xs
-     * <Input size="lg" placeholder="Large" /> // Uses px-md py-sm
-     */
-    readonly padding: {
-        readonly horizontal: {
-            readonly sm: "px-sm";
-            readonly md: "px-sm";
-            readonly lg: "px-md";
-        };
-        readonly vertical: {
-            readonly sm: "py-xs";
-            readonly md: "py-xs";
-            readonly lg: "py-sm";
-        };
-    };
-    /**
-     * Border radius by size
-     *
-     * @example
-     * // All sizes use the same rounded-md radius (6px)
-     * <Input size="sm" placeholder="Small" />
-     * <Input size="md" placeholder="Medium" />
-     * <Input size="lg" placeholder="Large" />
-     */
-    readonly radius: {
-        readonly sm: "rounded-md";
-        readonly md: "rounded-md";
-        readonly lg: "rounded-md";
-    };
-    /**
-     * Font sizes by size variant
-     * Maps to foundation typography fontSize tokens
-     *
-     * @example
-     * // Small font size (~14px)
-     * <Input size="sm" placeholder="Small text" />
-     *
-     * @example
-     * // Medium font size (~16px, default)
-     * <Input size="md" placeholder="Medium text" />
-     *
-     * @example
-     * // Large font size (~18px)
-     * <Input size="lg" placeholder="Large text" />
-     */
-    readonly fontSize: {
-        /** Small font size (~14px) */
-        readonly sm: "text-sm";
-        /** Medium font size (~16px, default) */
-        readonly md: "text-base";
-        /** Large font size (~18px) */
-        readonly lg: "text-lg";
-    };
-    /**
-     * Responsive font size (md breakpoint)
-     */
-    readonly fontSizeResponsive: {
-        readonly md: "md:text-sm";
-    };
-    /**
-     * Shadow token
-     * Maps to foundation elevation shadow tokens
-     *
-     * @example
-     * // Shadow is automatically applied to inputs
-     * <Input placeholder="Input with shadow" />
-     */
-    readonly shadow: "shadow-sm";
-    /**
-     * File input tokens
-     * Styling for file input elements
-     */
-    readonly file: {
-        readonly text: "text-[hsl(var(--tm-text-primary))]";
-    };
-    /**
-     * Variant-based tokens
-     * Border, background, and text colors for different variants
-     * All use CSS variable references for theme support
-     *
-     * @example
-     * // Primary variant (if supported)
-     * // Uses primary color scheme with primary focus ring
-     *
-     * @example
-     * // Secondary variant (if supported)
-     * // Uses secondary color scheme with default focus ring
-     *
-     * @example
-     * // Outline variant (default appearance)
-     * // Transparent background with input border color
-     * <Input placeholder="Outline input" />
-     *
-     * @example
-     * // Ghost variant (if supported)
-     * // Fully transparent with no visible border
-     *
-     * @example
-     * // Destructive variant (if supported)
-     * // Uses destructive color scheme for error states
-     */
-    readonly variant: {
-        /** Primary variant tokens */
-        readonly primary: {
-            readonly border: "border-[hsl(var(--tm-primary))]";
-            readonly background: "bg-[hsl(var(--tm-primary))]";
-            readonly text: "text-[hsl(var(--tm-primary-foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-primary)]";
-        };
-        /** Secondary variant tokens */
-        readonly secondary: {
-            readonly border: "border-[hsl(var(--tm-secondary))]";
-            readonly background: "bg-[hsl(var(--tm-secondary))]";
-            readonly text: "text-[hsl(var(--tm-secondary-foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        /** Outline variant tokens (default) */
-        readonly outline: {
-            readonly border: "border-[hsl(var(--tm-surface-base))]";
-            readonly background: "bg-transparent";
-            readonly text: "text-[hsl(var(--tm-text-primary))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        /** Ghost variant tokens */
-        readonly ghost: {
-            readonly border: "border-transparent";
-            readonly background: "bg-transparent";
-            readonly text: "text-[hsl(var(--tm-text-primary))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        /** Destructive variant tokens */
-        readonly destructive: {
-            readonly border: "border-[hsl(var(--tm-destructive))]";
-            readonly background: "bg-[hsl(var(--tm-destructive))]";
-            readonly text: "text-[hsl(var(--tm-destructive-foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-    };
-    /**
-     * State-based tokens
-     * Border, background, and text colors for different states
-     * All use CSS variable references for theme support
-     *
-     * @example
-     * // Default state
-     * <Input placeholder="Enter text..." />
-     *
-     * @example
-     * // Focus state (automatic on focus)
-     * <Input placeholder="Click to focus" />
-     *
-     * @example
-     * // Error state (invalid prop)
-     * <Input invalid placeholder="Invalid input" aria-describedby="error-id" />
-     *
-     * @example
-     * // Success state (if supported)
-     * // Uses success border color
-     *
-     * @example
-     * // Disabled state
-     * <Input disabled placeholder="Disabled input" />
-     *
-     * @example
-     * // Placeholder styling
-     * <Input placeholder="Placeholder text" />
-     */
-    readonly state: {
-        readonly border: {
-            /** Default border color */
-            readonly default: "border-[hsl(var(--tm-surface-base))]";
-            /** Focus ring shadow */
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-            /** Error state border (when invalid prop is true) */
-            readonly error: "border-[hsl(var(--tm-destructive))]";
-            /** Success state border */
-            readonly success: "border-success";
-            /** Disabled state border */
-            readonly disabled: "border-[hsl(var(--tm-surface-base))]";
-        };
-        readonly background: {
-            /** Default transparent background */
-            readonly default: "bg-transparent";
-            /** Disabled background */
-            readonly disabled: "bg-transparent";
-        };
-        readonly text: {
-            /** Default text color */
-            readonly default: "text-[hsl(var(--tm-text-primary))]";
-            /** Placeholder text color */
-            readonly placeholder: "placeholder:text-[hsl(var(--tm-text-muted))]";
-            /** Disabled text opacity */
-            readonly disabled: "disabled:opacity-50";
-        };
-    };
-    /**
-     * Icon tokens
-     * Size, spacing, and color for icons within inputs
-     *
-     * @example
-     * // Icon size (16px)
-     * // Used for icons inside input fields
-     *
-     * @example
-     * // Icon gap (8px spacing)
-     * // Spacing between icon and input text
-     *
-     * @example
-     * // Icon padding
-     * // Extra padding when icon is present on left or right side
-     *
-     * @example
-     * // Icon color
-     * // Uses muted-foreground color for icons
-     */
-    readonly icon: {
-        /** Icon size (16px) */
-        readonly size: "size-4";
-        /** Gap between icon and text (8px) */
-        readonly gap: "gap-sm";
-        /** Left padding when icon on left (24px) */
-        readonly paddingLeft: "pl-lg";
-        /** Right padding when icon on right (24px) */
-        readonly paddingRight: "pr-lg";
-        /** Icon color (muted foreground) */
-        readonly color: "text-[hsl(var(--tm-text-muted))]";
-        readonly position: {
-            /** Left position */
-            readonly left: "left-0";
-            /** Right position */
-            readonly right: "right-0";
-            /** Top position */
-            readonly top: "top-0";
-        };
-    };
-    /**
-     * Label tokens
-     * Spacing and styling for labels
-     *
-     * @example
-     * // Label spacing (8px between label and input)
-     * <Label>Email</Label>
-     * <Input type="email" placeholder="Enter email" />
-     *
-     * @example
-     * // Required mark color (destructive color for asterisk)
-     * <Label>Email <span className="text-destructive">*</span></Label>
-     * <Input type="email" required />
-     */
-    readonly label: {
-        /** Spacing between label and input (8px) */
-        readonly spacing: "space-y-sm";
-        /** Required asterisk color (destructive) */
-        readonly requiredMark: "text-destructive";
-    };
-    /**
-     * Width tokens
-     * Common width utilities
-     *
-     * @example
-     * // Full width input (100% of container)
-     * <Input placeholder="Full width input" className="w-full" />
-     */
-    readonly width: {
-        /** Full width (100%) */
-        readonly full: "w-full";
-    };
-    /**
-     * Message tokens
-     * Spacing, positioning, and styling for helper text and error messages
-     *
-     * @example
-     * // Helper text spacing (8px below input)
-     * <Input placeholder="Enter text" />
-     * <Text size="sm" tone="muted">Helper text</Text>
-     *
-     * @example
-     * // Error message
-     * <Input invalid placeholder="Invalid input" aria-describedby="error-id" />
-     * <Text id="error-id" size="sm" tone="destructive">Error message</Text>
-     *
-     * @example
-     * // Success message
-     * <Input placeholder="Valid input" />
-     * <Text size="sm" tone="success">Success message</Text>
-     *
-     * @example
-     * // Character counter position
-     * // Positioned at bottom-right of input container
-     */
-    readonly message: {
-        /** Spacing between input and message (8px) */
-        readonly spacing: "space-y-sm";
-        readonly position: {
-            /** Bottom position for character counter (8px) */
-            readonly bottom: "bottom-sm";
-            /** Right position for character counter (8px) */
-            readonly right: "right-sm";
-        };
-        readonly color: {
-            /** Default helper text color (muted foreground) */
-            readonly default: "text-[hsl(var(--tm-text-muted))]";
-            /** Error message color (destructive) - uses semantic foreground token */
-            readonly error: "text-[hsl(var(--tm-destructive-foreground))]";
-            /** Success message color (semantic success) */
-            readonly success: "text-success";
-        };
-    };
-    /**
-     * Size-based token structure
-     * Organized by size for easy access
-     */
-    readonly size: {
-        readonly sm: {
-            readonly height: "h-8";
-            readonly padding: {
-                readonly horizontal: "px-sm";
-                readonly vertical: "py-xs";
-            };
-            readonly radius: "rounded-md";
-            readonly fontSize: "text-sm";
-            readonly shadow: "shadow-sm";
-        };
-        readonly md: {
-            readonly height: "h-9";
-            readonly padding: {
-                readonly horizontal: "px-sm";
-                readonly vertical: "py-xs";
-            };
-            readonly radius: "rounded-md";
-            readonly fontSize: "text-base";
-            readonly fontSizeResponsive: "md:text-sm";
-            readonly shadow: "shadow-sm";
-        };
-        readonly lg: {
-            readonly height: "h-10";
-            readonly padding: {
-                readonly horizontal: "px-md";
-                readonly vertical: "py-sm";
-            };
-            readonly radius: "rounded-md";
-            readonly fontSize: "text-lg";
-            readonly shadow: "shadow-sm";
-        };
-    };
-};
-/**
- * Type exports for Input tokens
- */
-type InputHeight = keyof typeof INPUT_TOKENS.height;
-type InputPaddingHorizontal = keyof typeof INPUT_TOKENS.padding.horizontal;
-type InputPaddingVertical = keyof typeof INPUT_TOKENS.padding.vertical;
-type InputRadius = keyof typeof INPUT_TOKENS.radius;
-type InputFontSize = keyof typeof INPUT_TOKENS.fontSize;
-type InputSize = keyof typeof INPUT_TOKENS.size;
-
-/**
- * Checkbox Component Tokens
- *
- * Component-level design tokens for Checkbox component.
- * Maps foundation tokens (spacing, typography, radius, shadows) to checkbox-specific usage.
- * All color values use CSS variables for theme-aware styling.
- */
-/**
- * Checkbox Component Tokens
- *
- * Defines spacing, sizing, typography, and visual tokens for Checkbox component.
- * All colors use CSS variable references (hsl(var(--token))) for theme-aware styling.
- * Checkbox sizes are typically smaller than input fields.
- */
-declare const CHECKBOX_TOKENS: {
-    /**
-     * Checkbox sizes by size variant
-     * Supports sm, md, lg sizes (canonical interactive scale)
-     * Checkboxes are typically square and smaller than input fields
-     *
-     * NOTE: Size scale restricted to sm|md|lg per canonical interactive size scale (FOUNDATION_LOCK.md).
-     * xs and xl sizes removed to comply with Button-defined canonical scale.
-     */
-    readonly size: {
-        readonly sm: {
-            readonly width: "w-4";
-            readonly height: "h-4";
-            readonly radius: "rounded-sm";
-            readonly iconSize: "size-3";
-        };
-        readonly md: {
-            readonly width: "w-4.5";
-            readonly height: "h-4.5";
-            readonly radius: "rounded-md";
-            readonly iconSize: "size-3.5";
-        };
-        readonly lg: {
-            readonly width: "w-5";
-            readonly height: "h-5";
-            readonly radius: "rounded-md";
-            readonly iconSize: "size-4";
-        };
-    };
-    /**
-     * Variant-based tokens
-     * Border, background, and text colors for different variants
-     * All use CSS variable references for theme support
-     */
-    readonly variant: {
-        readonly primary: {
-            readonly border: "border-[hsl(var(--tm-primary))]";
-            readonly background: "bg-[hsl(var(--tm-primary))]";
-            readonly text: "text-[hsl(var(--tm-primary-foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-primary)]";
-        };
-        readonly secondary: {
-            readonly border: "border-[hsl(var(--tm-secondary))]";
-            readonly background: "bg-[hsl(var(--tm-secondary))]";
-            readonly text: "text-[hsl(var(--tm-secondary-foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly outline: {
-            readonly border: "border-[hsl(var(--tm-surface-base))]";
-            readonly background: "bg-transparent";
-            readonly text: "text-[hsl(var(--tm-text-primary))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly ghost: {
-            readonly border: "border-transparent";
-            readonly background: "bg-transparent";
-            readonly text: "text-[hsl(var(--tm-text-primary))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly destructive: {
-            readonly border: "border-[hsl(var(--tm-destructive))]";
-            readonly background: "bg-[hsl(var(--tm-destructive))]";
-            readonly text: "text-[hsl(var(--tm-destructive-foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-    };
-    /**
-     * State-based tokens
-     * Border, background, and text colors for different states
-     * All use CSS variable references for theme support
-     */
-    readonly state: {
-        readonly border: {
-            readonly default: "border-[hsl(var(--tm-surface-base))]";
-            readonly checked: "border-[hsl(var(--tm-primary))]";
-            readonly indeterminate: "border-[hsl(var(--tm-primary))]";
-            readonly error: "border-[hsl(var(--tm-destructive))]";
-            readonly disabled: "border-[hsl(var(--tm-surface-base))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly background: {
-            readonly default: "bg-transparent";
-            readonly checked: "bg-[hsl(var(--tm-primary))]";
-            readonly indeterminate: "bg-[hsl(var(--tm-primary))]";
-            readonly disabled: "bg-transparent";
-            readonly disabledChecked: "bg-[hsl(var(--tm-muted))]";
-        };
-        readonly text: {
-            readonly default: "text-[hsl(var(--tm-text-primary))]";
-            readonly checked: "text-[hsl(var(--tm-primary-foreground))]";
-            readonly indeterminate: "text-[hsl(var(--tm-primary-foreground))]";
-            readonly disabled: "disabled:opacity-50";
-        };
-    };
-    /**
-     * Icon tokens
-     * Size and styling for checkmark icon within checkbox
-     * NOTE: Icon sizes restricted to sm|md|lg per canonical interactive size scale
-     */
-    readonly icon: {
-        readonly size: {
-            readonly sm: "size-3";
-            readonly md: "size-3.5";
-            readonly lg: "size-4";
-        };
-        readonly stroke: "stroke-2";
-        readonly color: {
-            readonly default: "text-[hsl(var(--tm-primary-foreground))]";
-            readonly disabled: "text-[hsl(var(--tm-text-muted))]";
-            readonly checkedOutline: "text-[hsl(var(--tm-primary))]";
-            readonly checkedGhost: "text-[hsl(var(--tm-primary))]";
-        };
-    };
-    /**
-     * Indeterminate indicator tokens
-     * Styling for indeterminate state (horizontal line)
-     */
-    readonly indeterminate: {
-        readonly width: "w-2";
-        readonly height: "h-0.5";
-        readonly color: "bg-[hsl(var(--tm-primary-foreground))]";
-        readonly colorOutline: "bg-[hsl(var(--tm-primary))]";
-        readonly colorGhost: "bg-[hsl(var(--tm-primary))]";
-    };
-    /**
-     * Shadow token
-     * Maps to foundation elevation shadow tokens
-     */
-    readonly shadow: "shadow-sm";
-    /**
-     * Transition tokens
-     * Smooth transitions for state changes
-     * Uses MOTION_TOKENS for canonical motion values
-     */
-    readonly transition: "transition-all duration-normal ease-in-out";
-};
-/**
- * Type exports for Checkbox tokens
- */
-type CheckboxSize = keyof typeof CHECKBOX_TOKENS.size;
-type CheckboxVariant = keyof typeof CHECKBOX_TOKENS.variant;
-type CheckboxState = keyof typeof CHECKBOX_TOKENS.state.border;
-
-/**
- * Switch Component Tokens
- *
- * Component-level design tokens for Switch component.
- * Maps foundation tokens (spacing, typography, radius, shadows, motion) to switch-specific usage.
- * All color values use CSS variables for theme-aware styling.
- *
- * Switch consists of a track (container) and handle (thumb) that slides within the track.
- */
-/**
- * Switch Component Tokens
- *
- * Defines spacing, sizing, and visual tokens for Switch component.
- * All colors use CSS variable references (hsl(var(--token))) for theme-aware styling.
- * Switch track is wider than tall, with a circular handle that slides within.
- */
-declare const SWITCH_TOKENS: {
-    /**
-     * Track sizes by size variant
-     * Supports xs, sm, md, lg, xl sizes
-     * Track is wider than tall (typical switch proportions)
-     */
-    readonly track: {
-        readonly xs: {
-            readonly width: "w-8";
-            readonly height: "h-4";
-            readonly radius: "rounded-full";
-        };
-        readonly sm: {
-            readonly width: "w-9";
-            readonly height: "h-5";
-            readonly radius: "rounded-full";
-        };
-        readonly md: {
-            readonly width: "w-11";
-            readonly height: "h-6";
-            readonly radius: "rounded-full";
-        };
-        readonly lg: {
-            readonly width: "w-14";
-            readonly height: "h-7";
-            readonly radius: "rounded-full";
-        };
-        readonly xl: {
-            readonly width: "w-16";
-            readonly height: "h-8";
-            readonly radius: "rounded-full";
-        };
-    };
-    /**
-     * Handle sizes by size variant
-     * Circular thumb that slides within the track
-     * Slightly smaller than track height to allow for padding
-     */
-    readonly handle: {
-        readonly xs: {
-            readonly width: "w-3";
-            readonly height: "h-3";
-            readonly radius: "rounded-full";
-            readonly translate: "translate-x-4";
-        };
-        readonly sm: {
-            readonly width: "w-4";
-            readonly height: "h-4";
-            readonly radius: "rounded-full";
-            readonly translate: "translate-x-4";
-        };
-        readonly md: {
-            readonly width: "w-5";
-            readonly height: "h-5";
-            readonly radius: "rounded-full";
-            readonly translate: "translate-x-5";
-        };
-        readonly lg: {
-            readonly width: "w-6";
-            readonly height: "h-6";
-            readonly radius: "rounded-full";
-            readonly translate: "translate-x-7";
-        };
-        readonly xl: {
-            readonly width: "w-7";
-            readonly height: "h-7";
-            readonly radius: "rounded-full";
-            readonly translate: "translate-x-8";
-        };
-        /**
-         * Handle positioning tokens
-         * For absolute positioning within the track
-         */
-        readonly position: {
-            readonly left: "left-xs";
-            readonly top: "top-1/2";
-            readonly center: "-translate-y-1/2";
-        };
-    };
-    /**
-     * Variant-based tokens
-     * Track and handle colors for different variants
-     * All use CSS variable references for theme support
-     */
-    readonly variant: {
-        readonly primary: {
-            readonly track: {
-                readonly unchecked: "bg-[hsl(var(--tm-surface-base))]";
-                readonly checked: "bg-[hsl(var(--tm-primary))]";
-            };
-            readonly handle: {
-                readonly unchecked: "bg-[hsl(var(--tm-muted))]";
-                readonly checked: "bg-[hsl(var(--tm-primary-foreground))]";
-            };
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-primary)]";
-        };
-        readonly secondary: {
-            readonly track: {
-                readonly unchecked: "bg-[hsl(var(--tm-surface-base))]";
-                readonly checked: "bg-[hsl(var(--tm-secondary))]";
-            };
-            readonly handle: {
-                readonly unchecked: "bg-[hsl(var(--tm-muted))]";
-                readonly checked: "bg-[hsl(var(--tm-secondary-foreground))]";
-            };
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly outline: {
-            readonly track: {
-                readonly unchecked: "bg-[hsl(var(--tm-surface-base))]";
-                readonly checked: "bg-[hsl(var(--tm-primary))]";
-            };
-            readonly handle: {
-                readonly unchecked: "bg-[hsl(var(--tm-muted))]";
-                readonly checked: "bg-[hsl(var(--tm-primary-foreground))]";
-            };
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly ghost: {
-            readonly track: {
-                readonly unchecked: "bg-[hsl(var(--tm-muted))]";
-                readonly checked: "bg-[hsl(var(--tm-primary))]";
-            };
-            readonly handle: {
-                readonly unchecked: "bg-[hsl(var(--tm-text-muted))]";
-                readonly checked: "bg-[hsl(var(--tm-primary-foreground))]";
-            };
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly destructive: {
-            readonly track: {
-                readonly unchecked: "bg-[hsl(var(--tm-surface-base))]";
-                readonly checked: "bg-[hsl(var(--tm-destructive))]";
-            };
-            readonly handle: {
-                readonly unchecked: "bg-[hsl(var(--tm-muted))]";
-                readonly checked: "bg-[hsl(var(--tm-destructive-foreground))]";
-            };
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-    };
-    /**
-     * State-based tokens
-     * Track and handle colors for different states
-     * All use CSS variable references for theme support
-     */
-    readonly state: {
-        readonly track: {
-            readonly default: "bg-[hsl(var(--tm-surface-base))]";
-            readonly checked: "bg-[hsl(var(--tm-primary))]";
-            readonly disabled: "bg-[hsl(var(--tm-disabled))]";
-            readonly disabledChecked: "bg-[hsl(var(--tm-disabled))]";
-            readonly error: "bg-[hsl(var(--tm-destructive))]";
-        };
-        readonly handle: {
-            readonly default: "bg-[hsl(var(--tm-text-muted))]";
-            readonly checked: "bg-[hsl(var(--tm-primary-foreground))]";
-            readonly disabled: "bg-[hsl(var(--tm-disabled-foreground))]";
-            readonly disabledChecked: "bg-[hsl(var(--tm-disabled-foreground))]";
-            readonly error: "bg-[hsl(var(--tm-destructive-foreground))]";
-        };
-        readonly opacity: {
-            readonly disabled: "opacity-50";
-        };
-    };
-    /**
-     * Transition tokens
-     * Smooth transitions for handle animation and state changes
-     * Uses MOTION_TOKENS for canonical motion values
-     */
-    readonly transition: {
-        readonly handle: "transition-transform duration-normal ease-in-out";
-        readonly track: "transition-colors duration-normal ease-in-out";
-        readonly combined: "transition-all duration-normal ease-in-out";
-    };
-    /**
-     * Shadow token
-     * Maps to foundation elevation shadow tokens
-     */
-    readonly shadow: "shadow-sm";
-    /**
-     * Padding token
-     * Space between track edge and handle
-     */
-    readonly padding: "p-0.5";
-};
-/**
- * Type exports for Switch tokens
- */
-type SwitchSize = keyof typeof SWITCH_TOKENS.track;
-type SwitchVariant = keyof typeof SWITCH_TOKENS.variant;
-type SwitchState = keyof typeof SWITCH_TOKENS.state.track;
-
-/**
- * Radio Component Tokens
- *
- * Component-level design tokens for Radio component.
- * Maps foundation tokens (spacing, typography, radius, shadows) to radio-specific usage.
- * All color values use CSS variables for theme-aware styling.
- */
-/**
- * Radio Component Tokens
- *
- * Defines spacing, sizing, typography, and visual tokens for Radio component.
- * All colors use CSS variable references (hsl(var(--token))) for theme-aware styling.
- * Radio sizes are typically smaller than input fields.
- */
-declare const RADIO_TOKENS: {
-    /**
-     * Radio sizes by size variant
-     * Supports xs, sm, md, lg, xl sizes
-     * Radios are typically circular and smaller than input fields
-     */
-    readonly size: {
-        readonly xs: {
-            readonly width: "w-3.5";
-            readonly height: "h-3.5";
-            readonly radius: "rounded-full";
-            readonly dotSize: "size-1.5";
-        };
-        readonly sm: {
-            readonly width: "w-4";
-            readonly height: "h-4";
-            readonly radius: "rounded-full";
-            readonly dotSize: "size-2";
-        };
-        readonly md: {
-            readonly width: "w-4.5";
-            readonly height: "h-4.5";
-            readonly radius: "rounded-full";
-            readonly dotSize: "size-2.5";
-        };
-        readonly lg: {
-            readonly width: "w-5";
-            readonly height: "h-5";
-            readonly radius: "rounded-full";
-            readonly dotSize: "size-3";
-        };
-        readonly xl: {
-            readonly width: "w-6";
-            readonly height: "h-6";
-            readonly radius: "rounded-full";
-            readonly dotSize: "size-3.5";
-        };
-    };
-    /**
-     * Variant-based tokens
-     * Border, background, and text colors for different variants
-     * All use CSS variable references for theme support
-     */
-    readonly variant: {
-        readonly primary: {
-            readonly border: "border-[hsl(var(--tm-primary))]";
-            readonly background: "bg-[hsl(var(--tm-primary))]";
-            readonly text: "text-[hsl(var(--tm-primary-foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-primary)]";
-        };
-        readonly secondary: {
-            readonly border: "border-[hsl(var(--tm-secondary))]";
-            readonly background: "bg-[hsl(var(--tm-secondary))]";
-            readonly text: "text-[hsl(var(--tm-secondary-foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly outline: {
-            readonly border: "border-[hsl(var(--tm-surface-base))]";
-            readonly background: "bg-transparent";
-            readonly text: "text-[hsl(var(--tm-text-primary))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly ghost: {
-            readonly border: "border-transparent";
-            readonly background: "bg-transparent";
-            readonly text: "text-[hsl(var(--tm-text-primary))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly destructive: {
-            readonly border: "border-[hsl(var(--tm-destructive))]";
-            readonly background: "bg-[hsl(var(--tm-destructive))]";
-            readonly text: "text-[hsl(var(--tm-destructive-foreground))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-    };
-    /**
-     * State-based tokens
-     * Border, background, and text colors for different states
-     * All use CSS variable references for theme support
-     */
-    readonly state: {
-        readonly border: {
-            readonly default: "border-[hsl(var(--tm-surface-base))]";
-            readonly checked: "border-[hsl(var(--tm-primary))]";
-            readonly error: "border-[hsl(var(--tm-destructive))]";
-            readonly disabled: "border-[hsl(var(--tm-surface-base))]";
-            readonly focus: "focus-visible:shadow-[var(--focus-ring-default)]";
-        };
-        readonly background: {
-            readonly default: "bg-transparent";
-            readonly checked: "bg-[hsl(var(--tm-primary))]";
-            readonly disabled: "bg-transparent";
-            readonly disabledChecked: "bg-[hsl(var(--tm-muted))]";
-        };
-        readonly text: {
-            readonly default: "text-[hsl(var(--tm-text-primary))]";
-            readonly checked: "text-[hsl(var(--tm-primary-foreground))]";
-            readonly disabled: "disabled:opacity-50";
-        };
-    };
-    /**
-     * Dot tokens (inner filled circle indicator)
-     * Size and styling for radio dot within radio button
-     */
-    readonly dot: {
-        readonly size: {
-            readonly xs: "size-1.5";
-            readonly sm: "size-2";
-            readonly md: "size-2.5";
-            readonly lg: "size-3";
-            readonly xl: "size-3.5";
-        };
-        readonly color: {
-            readonly default: "bg-[hsl(var(--tm-primary-foreground))]";
-            readonly disabled: "bg-[hsl(var(--tm-text-muted))]";
-        };
-        readonly radius: "rounded-full";
-    };
-    /**
-     * Shadow token
-     * Maps to foundation elevation shadow tokens
-     */
-    readonly shadow: "shadow-sm";
-    /**
-     * Transition tokens
-     * Smooth transitions for state changes
-     * Uses MOTION_TOKENS for canonical motion values
-     */
-    readonly transition: "transition-all duration-normal ease-in-out";
-};
-/**
- * Type exports for Radio tokens
- */
-type RadioSize = keyof typeof RADIO_TOKENS.size;
-type RadioVariant = keyof typeof RADIO_TOKENS.variant;
-type RadioState = keyof typeof RADIO_TOKENS.state.border;
-
-/**
- * Surface Component Tokens
- *
- * Component-level design tokens for Surface component.
- * Maps foundation tokens (spacing, radius, shadows) to surface-specific usage.
- *
- * Defines tokens for canonical SurfaceVariant names: default, elevated, outlined, filled, subtle.
- * @see docs/architecture/VARIANTS_SIZE_CANON.md for canonical variant dictionary
- */
-/**
- * Surface Component Tokens
- *
- * Defines spacing, radius, and shadow tokens for Surface component variants.
- * Values are mapped to Tailwind utility classes for direct use.
- * Uses canonical SurfaceVariant dictionary: default, elevated, outlined, filled, subtle.
- */
-declare const SURFACE_TOKENS: {
-    /**
-     * Padding values for surface variants
-     * Can be customized per variant if needed
-     */
-    readonly padding: {
-        readonly default: "p-md";
-        readonly sm: "p-sm";
-        readonly md: "p-md";
-        readonly lg: "p-lg";
-    };
-    /**
-     * Border radius for surfaces
-     */
-    readonly radius: {
-        readonly default: "rounded-md";
-        readonly sm: "rounded-sm";
-        readonly md: "rounded-md";
-        readonly lg: "rounded-lg";
-    };
-    /**
-     * Shadow tokens by surface variant
-     * Maps to foundation elevation shadow tokens
-     * Uses canonical SurfaceVariant names
-     */
-    readonly shadow: {
-        readonly default: "shadow-none";
-        readonly elevated: "shadow-sm";
-        readonly outlined: "shadow-none";
-        readonly filled: "shadow-none";
-        readonly subtle: "shadow-none";
-    };
-    /**
-     * Variant-based token structure
-     * Organized by variant for easy access
-     * Uses canonical SurfaceVariant names: default, elevated, outlined, filled, subtle
-     */
-    readonly variant: {
-        readonly default: {
-            readonly padding: "p-md";
-            readonly radius: "rounded-md";
-            readonly shadow: "shadow-none";
-            readonly bg: "bg-background";
-            readonly border: "border border-border";
-        };
-        readonly elevated: {
-            readonly padding: "p-md";
-            readonly radius: "rounded-md";
-            readonly shadow: "shadow-sm";
-            readonly bg: "bg-card";
-            readonly border: "border border-border";
-        };
-        readonly outlined: {
-            readonly padding: "p-md";
-            readonly radius: "rounded-md";
-            readonly shadow: "shadow-none";
-            readonly bg: "bg-transparent";
-            readonly border: "border-2 border-border";
-        };
-        readonly filled: {
-            readonly padding: "p-md";
-            readonly radius: "rounded-md";
-            readonly shadow: "shadow-none";
-            readonly bg: "bg-muted";
-            readonly border: "border border-border";
-        };
-        readonly subtle: {
-            readonly padding: "p-md";
-            readonly radius: "rounded-md";
-            readonly shadow: "shadow-none";
-            readonly bg: "bg-muted/30";
-            readonly border: "border border-border/50";
-        };
-    };
-};
-/**
- * Type exports for Surface tokens
- */
-type SurfacePadding = keyof typeof SURFACE_TOKENS.padding;
-type SurfaceRadius = keyof typeof SURFACE_TOKENS.radius;
-type SurfaceShadow = keyof typeof SURFACE_TOKENS.shadow;
-type SurfaceVariant = keyof typeof SURFACE_TOKENS.variant;
-
-/**
- * Panel Component Tokens
- *
- * Component-level design tokens for Panel component.
- * Maps foundation tokens (spacing, radius, shadows) to panel-specific usage.
- *
- * Panel is a lightweight structural surface container that sits between Box and Card
- * in semantic hierarchy. Panel provides surface styling without interactivity.
- *
- * Panel tokens are designed to be lighter than Card tokens (lower elevation, subtler styling).
- */
-/**
- * Panel Component Tokens
- *
- * Defines spacing, radius, tone, background, border, and shadow tokens for Panel component.
- * Values are mapped to Tailwind utility classes for direct use.
- * Uses surface tone variants: default, muted, subtle.
- */
-declare const PANEL_TOKENS: {
-    /**
-     * Padding values for panels
-     * Maps to semantic spacing tokens
-     */
-    readonly padding: {
-        readonly sm: "p-sm";
-        readonly md: "p-md";
-        readonly lg: "p-lg";
-    };
-    /**
-     * Border radius for panels
-     * Maps to borderRadius scale
-     */
-    readonly radius: {
-        readonly sm: "rounded-sm";
-        readonly md: "rounded-md";
-        readonly lg: "rounded-lg";
-        readonly xl: "rounded-xl";
-    };
-    /**
-     * Shadow tokens for panels
-     * Panel shadows are minimal or none (below Card elevation)
-     * Card uses shadow/shadow-sm/shadow-md, Panel uses shadow-none or shadow-xs
-     */
-    readonly shadow: {
-        readonly none: "shadow-none";
-        readonly xs: "shadow-xs";
-    };
-    /**
-     * Tone-based token structure
-     * Organized by tone for easy access
-     * Uses surface tone variants: default, muted, subtle
-     */
-    readonly tone: {
-        readonly default: {
-            readonly padding: "p-md";
-            readonly paddingValue: "md";
-            readonly radius: "rounded-md";
-            readonly radiusValue: "md";
-            readonly shadow: "shadow-none";
-            readonly bg: "bg-[hsl(var(--tm-surface-base))]";
-            readonly border: "border border-[hsl(var(--tm-border-default))]";
-        };
-        readonly muted: {
-            readonly padding: "p-md";
-            readonly paddingValue: "md";
-            readonly radius: "rounded-md";
-            readonly radiusValue: "md";
-            readonly shadow: "shadow-none";
-            readonly bg: "bg-[hsl(var(--tm-muted))]";
-            readonly border: "border border-[hsl(var(--tm-border-default))]";
-        };
-        readonly subtle: {
-            readonly padding: "p-md";
-            readonly paddingValue: "md";
-            readonly radius: "rounded-md";
-            readonly radiusValue: "md";
-            readonly shadow: "shadow-none";
-            readonly bg: "bg-[hsl(var(--tm-muted))]/50";
-            readonly border: "border border-[hsl(var(--tm-border-default))]/50";
-        };
-    };
-};
-/**
- * Type exports for Panel tokens
- */
-type PanelPadding = keyof typeof PANEL_TOKENS.padding;
-type PanelRadius = keyof typeof PANEL_TOKENS.radius;
-type PanelShadow = keyof typeof PANEL_TOKENS.shadow;
-type PanelTone = keyof typeof PANEL_TOKENS.tone;
-
-/**
- * Text Component Tokens
- *
- * Component-level design tokens for Text component.
- * Maps foundation typography tokens to text-specific usage patterns.
- *
- * These tokens serve as second-level abstractions that reference foundation
- * typography tokens (fontSize, fontWeight, lineHeight, letterSpacing).
- */
-/**
- * Text Component Tokens
- *
- * Defines typography tokens for Text component.
- * All values reference foundation typography tokens to ensure consistency.
- */
-declare const TEXT_TOKENS: {
-    /**
-     * Font sizes by text size variant
-     * Maps to foundation fontSize tokens
-     */
-    readonly fontSize: {
-        readonly xs: "text-xs";
-        readonly sm: "text-sm";
-        readonly md: "text-base";
-        readonly lg: "text-lg";
-        readonly xl: "text-xl";
-        readonly "2xl": "text-2xl";
-        readonly "3xl": "text-3xl";
-        readonly "4xl": "text-4xl";
-        readonly "5xl": "text-5xl";
-    };
-    /**
-     * Font weights by weight variant
-     * Maps to foundation fontWeight tokens
-     */
-    readonly fontWeight: {
-        readonly normal: "font-normal";
-        readonly medium: "font-medium";
-        readonly semibold: "font-semibold";
-        readonly bold: "font-bold";
-    };
-    /**
-     * Line heights (if component-specific)
-     * Maps to foundation lineHeight tokens
-     */
-    readonly lineHeight: {
-        readonly none: "leading-none";
-        readonly tight: "leading-tight";
-        readonly snug: "leading-snug";
-        readonly normal: "leading-normal";
-        readonly relaxed: "leading-relaxed";
-        readonly loose: "leading-loose";
-    };
-    /**
-     * Letter spacing (tracking) values
-     * Maps to foundation letterSpacing tokens
-     */
-    readonly letterSpacing: {
-        readonly tighter: "tracking-tighter";
-        readonly tight: "tracking-tight";
-        readonly normal: "tracking-normal";
-        readonly wide: "tracking-wide";
-        readonly wider: "tracking-wider";
-        readonly widest: "tracking-widest";
-    };
-};
-/**
- * Type exports for Text tokens
- */
-type TextFontSize = keyof typeof TEXT_TOKENS.fontSize;
-type TextFontWeight = keyof typeof TEXT_TOKENS.fontWeight;
-type TextLineHeight = keyof typeof TEXT_TOKENS.lineHeight;
-type TextLetterSpacing = keyof typeof TEXT_TOKENS.letterSpacing;
-
-/**
- * Section Component Tokens
- *
- * Component-level design tokens for Section component.
- * Maps foundation tokens (spacing) to section-specific usage for page/landing layout composition.
- *
- * Defines tokens for vertical padding and content spacing within sections.
- */
-/**
- * Section Component Tokens
- *
- * Defines padding and spacing tokens for Section component.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-declare const SECTION_TOKENS: {
-    /**
-     * Vertical padding for sections
-     * Used for spacing between major page sections
-     */
-    readonly padding: {
-        readonly sm: "py-md";
-        readonly md: "py-xl";
-        readonly lg: "py-2xl";
-        readonly xl: "py-3xl";
-    };
-    /**
-     * Gap spacing for content blocks within sections
-     * Used for spacing between content elements in a section
-     */
-    readonly spacing: {
-        readonly sm: "gap-sm";
-        readonly md: "gap-md";
-        readonly lg: "gap-lg";
-        readonly xl: "gap-xl";
-    };
-};
-/**
- * Type exports for Section tokens
- */
-type SectionPadding = keyof typeof SECTION_TOKENS.padding;
-type SectionGap = keyof typeof SECTION_TOKENS.spacing;
-
-/**
- * Overlay Component Tokens
- *
- * Component-level design tokens for Overlay components (Modal, Dialog, Backdrop).
- * Maps foundation tokens (spacing, radius, shadows, motion) to overlay-specific usage.
- *
- * All values use Tailwind utility classes that map to foundation tokens.
- */
-/**
- * Overlay Component Tokens
- *
- * Defines tokens for backdrop variants, modal sizes, and animations.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-declare const OVERLAY_TOKENS: {
-    /**
-     * Backdrop tokens by variant
-     * Maps to SURFACE_TOKENS for background colors
-     */
-    readonly backdrop: {
-        readonly default: {
-            readonly bg: "bg-black/50";
-            readonly opacity: "opacity-100";
-        };
-        readonly blurred: {
-            readonly bg: "bg-black/50";
-            readonly opacity: "opacity-100";
-            readonly backdropFilter: "backdrop-blur-sm";
-        };
-        readonly transparent: {
-            readonly bg: "bg-transparent";
-            readonly opacity: "opacity-0";
-        };
-    };
-    /**
-     * Modal tokens by size variant
-     * Maps to foundation tokens for spacing, radius, and shadows
-     */
-    readonly modal: {
-        readonly radius: {
-            readonly sm: "rounded-md";
-            readonly md: "rounded-lg";
-            readonly lg: "rounded-xl";
-            readonly xl: "rounded-2xl";
-            readonly fullscreen: "rounded-none";
-        };
-        readonly padding: {
-            readonly sm: "p-md";
-            readonly md: "p-lg";
-            readonly lg: "p-xl";
-            readonly xl: "p-xl";
-        };
-        readonly shadow: {
-            readonly sm: "shadow-md";
-            readonly md: "shadow-lg";
-            readonly lg: "shadow-xl";
-            readonly xl: "shadow-xl";
-        };
-        readonly maxWidth: {
-            readonly sm: "max-w-md";
-            readonly md: "max-w-lg";
-            readonly lg: "max-w-2xl";
-            readonly xl: "max-w-4xl";
-            readonly fullscreen: "max-w-full";
-        };
-        /**
-         * Modal surface tokens by variant
-         * Token-based styling for all modal surface variants
-         */
-        readonly surface: {
-            readonly primary: {
-                readonly bg: "bg-background";
-                readonly border: "border border-border";
-            };
-            readonly secondary: {
-                readonly bg: "bg-card";
-                readonly border: "border border-border";
-                readonly shadow: "shadow-sm";
-            };
-            readonly tinted: {
-                readonly bg: "bg-muted/50";
-                readonly border: "border border-border/50";
-            };
-            readonly bare: {
-                readonly bg: "bg-transparent";
-                readonly border: "border-none";
-                readonly shadow: "shadow-none";
-            };
-        };
-        /**
-         * Modal container tokens
-         * For backdrop container positioning and layout
-         */
-        readonly container: {
-            readonly layout: "fixed inset-0 z-40 flex items-center justify-center";
-        };
-        /**
-         * Modal position tokens
-         * For centering and positioning modal content
-         */
-        readonly position: {
-            readonly center: "left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2";
-        };
-        /**
-         * Modal transition tokens
-         * Maps to motion tokens for appear/disappear animations
-         */
-        readonly transition: {
-            readonly appear: "tm-motion-fade-scale";
-            readonly disappear: "tm-motion-fade-scale-out";
-        };
-        /**
-         * Modal section spacing tokens
-         * For header, body, and footer spacing
-         */
-        readonly spacing: {
-            readonly header: {
-                readonly marginBottom: "mb-md";
-                readonly gap: "gap-xs";
-            };
-            readonly body: {
-                readonly layout: "flex-1";
-            };
-            readonly footer: {
-                readonly marginTop: "mt-md";
-                readonly gap: "gap-sm";
-            };
-        };
-    };
-    /**
-     * Animation tokens for overlay enter/exit animations
-     * Maps to Motion utility classes
-     * Uses CSS-only animations from motion.ts
-     */
-    readonly animation: {
-        readonly enter: {
-            readonly duration: "duration-normal";
-            readonly easing: "ease-out";
-            readonly keyframes: "tm-motion-fade-in";
-            readonly scale: "tm-motion-scale-in";
-            readonly combined: "tm-motion-fade-scale";
-        };
-        readonly exit: {
-            readonly duration: "duration-fast";
-            readonly easing: "ease-in";
-            readonly keyframes: "tm-motion-fade-out";
-            readonly scale: "tm-motion-scale-out";
-            readonly combined: "tm-motion-fade-scale-out";
-        };
-    };
-    /**
-     * Drawer tokens by size variant
-     * Maps to foundation tokens for spacing, radius, and shadows
-     */
-    readonly drawer: {
-        readonly width: {
-            readonly sm: "w-64";
-            readonly md: "w-80";
-            readonly lg: "w-96";
-        };
-        readonly height: {
-            readonly sm: "h-64";
-            readonly md: "h-80";
-            readonly lg: "h-96";
-        };
-        readonly radius: {
-            readonly left: {
-                readonly sm: "rounded-r-md";
-                readonly md: "rounded-r-lg";
-                readonly lg: "rounded-r-xl";
-            };
-            readonly right: {
-                readonly sm: "rounded-l-md";
-                readonly md: "rounded-l-lg";
-                readonly lg: "rounded-l-xl";
-            };
-            readonly bottom: {
-                readonly sm: "rounded-t-md";
-                readonly md: "rounded-t-lg";
-                readonly lg: "rounded-t-xl";
-            };
-        };
-        readonly padding: {
-            readonly sm: "p-md";
-            readonly md: "p-lg";
-            readonly lg: "p-xl";
-        };
-        readonly shadow: {
-            readonly sm: "shadow-md";
-            readonly md: "shadow-lg";
-            readonly lg: "shadow-xl";
-        };
-        readonly animation: {
-            readonly left: {
-                readonly enter: "tm-motion-slide-right-in";
-                readonly exit: "tm-motion-slide-right-out";
-            };
-            readonly right: {
-                readonly enter: "tm-motion-slide-left-in";
-                readonly exit: "tm-motion-slide-left-out";
-            };
-            readonly bottom: {
-                readonly enter: "tm-motion-slide-up-in";
-                readonly exit: "tm-motion-slide-up-out";
-            };
-        };
-        /**
-         * Drawer section spacing tokens
-         * For header, body, and footer spacing
-         */
-        readonly spacing: {
-            readonly header: {
-                readonly marginBottom: "mb-md";
-                readonly gap: "gap-xs";
-            };
-            readonly footer: {
-                readonly marginTop: "mt-md";
-                readonly gap: "gap-sm";
-            };
-        };
-    };
-};
-/**
- * Type exports for Overlay tokens
- */
-type OverlayBackdropVariant = keyof typeof OVERLAY_TOKENS.backdrop;
-type OverlayModalSize = keyof typeof OVERLAY_TOKENS.modal.radius;
-
-/**
- * Toast Component Tokens
- *
- * Component-level design tokens for Toast components.
- * Maps foundation tokens (spacing, radius, shadows, motion) to toast-specific usage.
- *
- * All values use Tailwind utility classes that map to foundation tokens.
- */
-/**
- * Toast Component Tokens
- *
- * Defines tokens for toast spacing, radius, shadow, surface variants, and animations.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-declare const TOAST_TOKENS: {
-    /**
-     * Spacing tokens for toast layout
-     * Maps to semanticSpacing tokens
-     */
-    readonly spacing: {
-        readonly gap: "gap-sm";
-        readonly padding: "p-md";
-        readonly paddingHorizontal: "px-md";
-        readonly paddingVertical: "py-md";
-    };
-    /**
-     * Width tokens for toast layout
-     * Maps to width utilities
-     */
-    readonly width: {
-        readonly full: "w-full";
-    };
-    /**
-     * Border radius for toasts
-     * Maps to componentRadius.toast
-     */
-    readonly radius: {
-        readonly default: "rounded-lg";
-    };
-    /**
-     * Shadow for toasts
-     * Maps to elevationShadows
-     */
-    readonly shadow: {
-        readonly default: "shadow-lg";
-    };
-    /**
-     * Surface tokens for toast variants
-     * Maps to SURFACE_TOKENS for background colors
-     */
-    readonly surface: {
-        readonly success: "bg-success/10 border-success/20 text-success-foreground";
-        readonly info: "bg-info/10 border-info/20 text-info-foreground";
-        readonly warning: "bg-warning/10 border-warning/20 text-warning-foreground";
-        readonly danger: "bg-destructive/10 border-destructive/20 text-destructive-foreground";
-        readonly default: "bg-[hsl(var(--tm-surface-base))] border border-[hsl(var(--tm-border-default))] text-[hsl(var(--tm-text-primary))]";
-    };
-    /**
-     * Animation tokens for toast enter/exit animations
-     * Maps to Motion utility classes and Radix data attributes
-     * Uses CSS-only animations from motion.ts
-     * Radix Toast provides data-[state=open] and data-[state=closed] attributes
-     */
-    readonly animation: {
-        readonly enter: {
-            readonly slideUp: "tm-motion-fade-slide-up";
-            readonly fadeIn: "tm-motion-fade-in";
-            readonly combined: "tm-motion-fade-slide-right";
-        };
-        readonly exit: {
-            readonly slideOutRight: "tm-motion-fade-slide-left-out";
-            readonly fadeOut: "tm-motion-fade-out";
-            readonly combined: "tm-motion-fade-slide-left-out";
-        };
-        /**
-         * Radix Toast data attribute classes
-         * These are applied automatically by Radix based on toast state
-         */
-        readonly radix: {
-            /**
-             * Base classes for Radix Toast Root
-             * Includes swipe handling and state-based animations
-             */
-            readonly root: "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out";
-            /**
-             * State-based animation classes
-             */
-            readonly state: {
-                readonly open: "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full";
-                readonly closed: "data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full";
-            };
-        };
-    };
-    /**
-     * Position tokens for toast viewport
-     * Maps to spacing tokens for positioning
-     */
-    readonly position: {
-        readonly spacing: {
-            readonly top: "top-md";
-            readonly right: "right-md";
-            readonly bottom: "bottom-md";
-            readonly left: "left-md";
-        };
-    };
-    /**
-     * Content layout tokens
-     * For toast content container
-     */
-    readonly content: {
-        readonly layout: "flex flex-1 items-start";
-        readonly gap: "gap-sm";
-        readonly verticalSpacing: "space-y-xs";
-    };
-    /**
-     * Title typography tokens
-     * Maps to TEXT_TOKENS for font sizing and weight
-     */
-    readonly title: {
-        readonly fontSize: "text-sm";
-        readonly fontWeight: "font-semibold";
-    };
-    /**
-     * Description typography tokens
-     * Maps to TEXT_TOKENS for font sizing
-     */
-    readonly description: {
-        readonly fontSize: "text-sm";
-        readonly opacity: "opacity-90";
-    };
-    /**
-     * Action button tokens
-     * For toast action button sizing
-     */
-    readonly action: {
-        readonly height: "h-8";
-        readonly padding: "px-xs";
-        readonly fontSize: "text-xs";
-    };
-    /**
-     * Dismiss button tokens
-     * For toast dismiss button styling
-     */
-    readonly dismiss: {
-        readonly position: "absolute right-xs top-xs";
-        readonly size: "h-6 w-6";
-        readonly radius: "rounded-md";
-        readonly padding: "p-xs";
-        readonly transition: "transition-opacity";
-        readonly colors: {
-            readonly default: "text-[hsl(var(--tm-text-primary))]/50";
-            readonly hover: "hover:text-[hsl(var(--tm-text-primary))]";
-        };
-        readonly states: {
-            readonly default: "opacity-0";
-            readonly groupHover: "group-hover:opacity-100";
-            readonly focus: "focus-visible:opacity-100";
-            readonly focusRing: "focus-visible:outline-none focus-visible:ring-1";
-        };
-    };
-};
-/**
- * Type exports for Toast tokens
- */
-type ToastVariant = keyof typeof TOAST_TOKENS.surface;
-
-/**
- * Notification Component Tokens
- *
- * Component-level design tokens for Notification Center components.
- * Maps foundation tokens (spacing, radius, shadows, motion) to notification-specific usage.
- * Extends toast tokens with additional tokens for panel, grouping, and timeline features.
- *
- * All values use Tailwind utility classes that map to foundation tokens.
- */
-/**
- * Notification Component Tokens
- *
- * Defines tokens for notification spacing, radius, shadow, surface variants, animations,
- * panel configuration, item styling, and timeline features.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-declare const NOTIFICATION_TOKENS: {
-    /**
-     * Spacing tokens for notification layout
-     * Maps to semanticSpacing tokens
-     */
-    readonly spacing: {
-        readonly gap: "gap-sm";
-        readonly padding: "p-md";
-        readonly paddingHorizontal: "px-md";
-        readonly paddingVertical: "py-md";
-        readonly itemPadding: "p-sm";
-        readonly panelPadding: "p-lg";
-    };
-    /**
-     * Border radius for notifications
-     * Maps to componentRadius.notification
-     */
-    readonly radius: {
-        readonly item: "rounded-md";
-        readonly panel: "rounded-lg";
-        readonly default: "rounded-lg";
-    };
-    /**
-     * Shadow for notifications
-     * Maps to elevationShadows
-     */
-    readonly shadow: {
-        readonly item: "shadow-sm";
-        readonly panel: "shadow-xl";
-        readonly default: "shadow-lg";
-    };
-    /**
-     * Width tokens for notifications
-     * Maps to spacing tokens for width constraints
-     */
-    readonly width: {
-        readonly item: "w-full";
-        readonly itemMax: "max-w-md";
-        readonly panel: "w-full";
-        readonly panelSm: "w-sm";
-        readonly panelMd: "w-md";
-        readonly panelLg: "w-lg";
-        readonly panelMaxHeight: "max-h-[calc(100vh-2rem)]";
-    };
-    /**
-     * Item-specific tokens
-     * For individual notification items in lists
-     */
-    readonly item: {
-        readonly padding: "p-sm";
-        readonly gap: "gap-sm";
-        readonly iconSize: "h-5 w-5";
-        readonly radius: "rounded-md";
-        readonly minHeight: "min-h-[3rem]";
-    };
-    /**
-     * Surface tokens for notification variants
-     * Extends toast variants with system and log
-     * Maps to SURFACE_TOKENS for background colors
-     */
-    readonly surface: {
-        readonly success: "bg-success/10 border-success/20 text-success-foreground";
-        readonly info: "bg-info/10 border-info/20 text-info-foreground";
-        readonly warning: "bg-warning/10 border-warning/20 text-warning-foreground";
-        readonly danger: "bg-destructive/10 border-destructive/20 text-destructive-foreground";
-        readonly system: "bg-[hsl(var(--tm-muted))] border-[hsl(var(--tm-border-default))] text-[hsl(var(--tm-text-primary))]";
-        readonly log: "bg-[hsl(var(--tm-surface-base))] border-[hsl(var(--tm-border-default))]/50 text-[hsl(var(--tm-text-muted))]";
-        readonly default: "bg-[hsl(var(--tm-surface-base))] border border-[hsl(var(--tm-border-default))] text-[hsl(var(--tm-text-primary))]";
-    };
-    /**
-     * Timeline tokens for grouped notifications
-     * Visual timeline indicators for grouped items
-     */
-    readonly timeline: {
-        readonly dotSize: "h-2 w-2";
-        readonly lineWidth: "w-0.5";
-        readonly gap: "gap-xs";
-    };
-    /**
-     * Animation tokens for notification enter/exit animations
-     * Maps to Motion utility classes
-     * Uses CSS-only animations from motion.ts
-     */
-    readonly animation: {
-        readonly enter: {
-            readonly slideInRight: "tm-motion-fade-slide-right";
-            readonly fadeIn: "tm-motion-fade-in";
-            readonly combined: "tm-motion-fade-slide-right";
-        };
-        readonly exit: {
-            readonly slideOutRight: "tm-motion-fade-slide-right-out";
-            readonly fadeOut: "tm-motion-fade-out";
-            readonly combined: "tm-motion-fade-slide-right-out";
-        };
-        readonly panel: {
-            readonly enter: {
-                readonly slideInRight: "tm-motion-fade-slide-right";
-                readonly fadeIn: "tm-motion-fade-in";
-                readonly combined: "tm-motion-fade-slide-right";
-            };
-            readonly exit: {
-                readonly slideOutRight: "tm-motion-fade-slide-right-out";
-                readonly fadeOut: "tm-motion-fade-out";
-                readonly combined: "tm-motion-fade-slide-right-out";
-            };
-        };
-    };
-    /**
-     * Panel-specific tokens
-     * For the side drawer notification panel
-     */
-    readonly panel: {
-        readonly width: {
-            readonly default: "w-md";
-            readonly sm: "w-sm";
-            readonly md: "w-md";
-            readonly lg: "w-lg";
-        };
-        readonly maxHeight: "max-h-[calc(100vh-2rem)]";
-        readonly spacing: {
-            readonly gap: "gap-md";
-            readonly padding: "p-lg";
-            readonly headerPadding: "px-lg py-md";
-        };
-        readonly radius: {
-            readonly default: "rounded-lg";
-            readonly topLeft: "rounded-tl-lg";
-            readonly topRight: "rounded-tr-lg";
-        };
-        readonly shadow: {
-            readonly default: "shadow-xl";
-        };
-        readonly backdrop: {
-            readonly bg: "bg-black/50";
-            readonly blur: "backdrop-blur-sm";
-        };
-    };
-};
-/**
- * Type exports for Notification tokens
- */
-type NotificationVariant = keyof typeof NOTIFICATION_TOKENS.surface;
-type NotificationPanelWidth = keyof typeof NOTIFICATION_TOKENS.panel.width;
-
-/**
- * Navigation Component Tokens
- *
- * Component-level design tokens for Navigation components (Tabs, SegmentedControl, Breadcrumbs, Pagination, Stepper).
- * Maps foundation tokens (spacing, typography, radius, shadows) to navigation-specific usage.
- *
- * All values reference foundation tokens to ensure consistency across the design system.
- */
-/**
- * Navigation Component Tokens
- *
- * Defines all spacing, sizing, typography, and visual tokens for Navigation components.
- * Values are mapped to Tailwind utility classes for direct use in component variants.
- */
-declare const NAVIGATION_TOKENS: {
-    /**
-     * Navigation item heights by size
-     * Maps to Tailwind height utilities: h-8, h-9, h-10
-     */
-    readonly sizes: {
-        readonly sm: {
-            readonly height: "h-8";
-            readonly width: "w-8";
-            readonly padding: {
-                readonly horizontal: "px-sm";
-                readonly vertical: "py-xs";
-            };
-            readonly fontSize: "text-xs";
-            readonly gap: "gap-xs";
-        };
-        readonly md: {
-            readonly height: "h-9";
-            readonly padding: {
-                readonly horizontal: "px-md";
-                readonly vertical: "py-sm";
-            };
-            readonly fontSize: "text-sm";
-            readonly gap: "gap-sm";
-        };
-        readonly lg: {
-            readonly height: "h-10";
-            readonly padding: {
-                readonly horizontal: "px-lg";
-                readonly vertical: "py-sm";
-            };
-            readonly fontSize: "text-base";
-            readonly gap: "gap-sm";
-        };
-    };
-    /**
-     * Border radius for navigation items
-     */
-    readonly radius: {
-        readonly default: "rounded-md";
-        readonly sm: "rounded-sm";
-        readonly md: "rounded-md";
-        readonly lg: "rounded-lg";
-        readonly full: "rounded-full";
-    };
-    /**
-     * Spacing tokens for navigation components
-     */
-    readonly spacing: {
-        readonly itemPadding: {
-            readonly sm: "px-sm py-xs";
-            readonly md: "px-md py-sm";
-            readonly lg: "px-lg py-sm";
-        };
-        readonly listGap: {
-            readonly xs: "gap-xs";
-            readonly sm: "gap-sm";
-            readonly md: "gap-md";
-            readonly lg: "gap-lg";
-        };
-        readonly content: {
-            readonly marginTop: "mt-md";
-        };
-    };
-    /**
-     * Typography tokens for navigation components
-     */
-    readonly typography: {
-        readonly default: "text-sm";
-        readonly sm: "text-xs";
-        readonly md: "text-sm";
-        readonly lg: "text-base";
-        readonly fontWeight: {
-            readonly default: "font-medium";
-            readonly normal: "font-normal";
-            readonly medium: "font-medium";
-            readonly semibold: "font-semibold";
-        };
-    };
-    /**
-     * State-based tokens for navigation items
-     * Colors, backgrounds, and borders for different states
-     */
-    readonly states: {
-        readonly default: {
-            readonly background: "bg-transparent";
-            readonly text: "text-[hsl(var(--tm-text-primary))]";
-            readonly border: "border-transparent";
-        };
-        readonly hover: {
-            readonly background: "hover:bg-accent";
-            readonly text: "hover:text-accent-foreground";
-            readonly border: "hover:border-accent";
-        };
-        readonly active: {
-            readonly background: "bg-accent";
-            readonly text: "text-accent-foreground";
-            readonly border: "border-accent";
-        };
-        readonly selected: {
-            readonly background: "bg-primary";
-            readonly text: "text-primary-foreground";
-            readonly border: "border-primary";
-        };
-        readonly disabled: {
-            readonly background: "bg-transparent";
-            readonly text: "text-[hsl(var(--tm-text-muted))] disabled:opacity-50";
-            readonly border: "border-transparent";
-            readonly cursor: "disabled:cursor-not-allowed";
-        };
-    };
-    /**
-     * Indicator tokens for Tabs component
-     * Used for underline/indicator animation
-     */
-    readonly indicator: {
-        readonly height: "h-0.5";
-        readonly radius: "rounded-full";
-        readonly transition: "transition-all duration-normal ease-out";
-        readonly background: "bg-primary";
-        readonly position: "absolute bottom-0 left-0 right-0";
-    };
-    /**
-     * Shadow tokens for navigation components
-     */
-    readonly shadow: {
-        readonly none: "shadow-none";
-        readonly sm: "shadow-sm";
-        readonly default: "shadow-sm";
-        readonly md: "shadow";
-    };
-    /**
-     * Focus ring tokens for accessibility
-     */
-    readonly focus: {
-        readonly ring: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2";
-        readonly ringOffset: "focus-visible:ring-offset-2";
-    };
-    /**
-     * Container background tokens
-     * For segmented control and tab container backgrounds
-     */
-    readonly container: {
-        readonly background: {
-            readonly muted: "bg-muted";
-        };
-        readonly padding: {
-            readonly xs: "p-xs";
-            readonly sm: "p-sm";
-        };
-    };
-    /**
-     * Border color tokens
-     */
-    readonly border: {
-        readonly muted: "border-muted-foreground";
-    };
-};
-/**
- * Type exports for Navigation tokens
- */
-type NavigationSize = keyof typeof NAVIGATION_TOKENS.sizes;
-type NavigationRadius = keyof typeof NAVIGATION_TOKENS.radius;
-type NavigationState = keyof typeof NAVIGATION_TOKENS.states;
-type NavigationShadow = keyof typeof NAVIGATION_TOKENS.shadow;
-type NavigationListGap = keyof typeof NAVIGATION_TOKENS.spacing.listGap;
-type NavigationItemPadding = keyof typeof NAVIGATION_TOKENS.spacing.itemPadding;
-
-/**
- * Menu Component Tokens
- *
- * Component-level design tokens for Menu components (ContextMenu).
- * Maps foundation tokens (spacing, radius, shadows, typography, motion) to menu-specific usage.
- *
- * All values use Tailwind utility classes that map to foundation tokens.
- */
-/**
- * Menu Component Tokens
- *
- * Defines tokens for menu items, content, separators, labels, and indicators.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-declare const MENU_TOKENS: {
-    /**
-     * Menu item tokens by size
-     * Maps to foundation spacing and radius tokens
-     */
-    readonly item: {
-        readonly padding: {
-            readonly xs: "px-xs py-xs";
-            readonly sm: "px-sm py-sm";
-            readonly md: "px-md py-sm";
-        };
-        readonly radius: {
-            readonly sm: "rounded-sm";
-            readonly md: "rounded-md";
-        };
-        readonly gap: {
-            readonly xs: "gap-xs";
-            readonly sm: "gap-sm";
-        };
-        readonly height: {
-            readonly sm: "h-8";
-            readonly md: "h-10";
-            readonly lg: "h-12";
-        };
-        readonly focus: {
-            readonly background: "focus-visible:bg-accent/10";
-            readonly text: "focus-visible:text-accent-foreground";
-        };
-    };
-    /**
-     * Menu content tokens by size
-     * Maps to foundation spacing, radius, and shadow tokens
-     */
-    readonly content: {
-        readonly padding: {
-            readonly sm: "p-sm";
-            readonly md: "p-md";
-        };
-        readonly radius: {
-            readonly sm: "rounded-md";
-            readonly md: "rounded-lg";
-        };
-        readonly shadow: {
-            readonly sm: "shadow-md";
-            readonly md: "shadow-lg";
-        };
-        readonly minWidth: {
-            readonly sm: "min-w-32";
-            readonly md: "min-w-48";
-        };
-    };
-    /**
-     * Menu separator tokens
-     * Maps to foundation spacing and color tokens
-     */
-    readonly separator: {
-        readonly margin: {
-            readonly sm: "my-xs";
-            readonly md: "my-sm";
-        };
-        readonly height: "h-px";
-        readonly color: "bg-border";
-    };
-    /**
-     * Menu label tokens
-     * Maps to foundation spacing and typography tokens
-     */
-    readonly label: {
-        readonly padding: {
-            readonly sm: "px-sm py-xs";
-            readonly md: "px-md py-sm";
-        };
-        readonly textStyle: "text-sm font-semibold";
-        readonly textColor: "text-[hsl(var(--tm-muted-foreground))]";
-    };
-    /**
-     * Menu indicator tokens (for checkboxes, radio buttons)
-     * Maps to foundation spacing tokens
-     */
-    readonly indicator: {
-        readonly size: {
-            readonly sm: "w-4 h-4";
-            readonly md: "w-5 h-5";
-        };
-        readonly offset: {
-            readonly sm: "left-xs";
-            readonly md: "left-sm";
-        };
-    };
-};
-/**
- * Type exports for Menu tokens
- */
-type MenuItemPadding = keyof typeof MENU_TOKENS.item.padding;
-type MenuItemRadius = keyof typeof MENU_TOKENS.item.radius;
-type MenuItemGap = keyof typeof MENU_TOKENS.item.gap;
-type MenuItemHeight = keyof typeof MENU_TOKENS.item.height;
-type MenuContentPadding = keyof typeof MENU_TOKENS.content.padding;
-type MenuContentRadius = keyof typeof MENU_TOKENS.content.radius;
-type MenuContentShadow = keyof typeof MENU_TOKENS.content.shadow;
-type MenuContentMinWidth = keyof typeof MENU_TOKENS.content.minWidth;
-type MenuSeparatorMargin = keyof typeof MENU_TOKENS.separator.margin;
-type MenuLabelPadding = keyof typeof MENU_TOKENS.label.padding;
-type MenuIndicatorSize = keyof typeof MENU_TOKENS.indicator.size;
-type MenuIndicatorOffset = keyof typeof MENU_TOKENS.indicator.offset;
-
-/**
- * Popover Component Tokens
- *
- * Component-level design tokens for Popover component.
- * Maps foundation tokens (spacing, radius, shadows, motion) to popover-specific usage.
- *
- * All values use Tailwind utility classes that map to foundation tokens.
- */
-/**
- * Popover Component Tokens
- *
- * Defines tokens for popover content, arrow, and animations.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-declare const POPOVER_TOKENS: {
-    /**
-     * Popover content tokens by size
-     * Maps to foundation spacing, radius, and shadow tokens
-     */
-    readonly content: {
-        readonly border: {
-            readonly default: "border";
-            readonly color: "border-border";
-        };
-        readonly background: {
-            readonly default: "bg-popover";
-        };
-        readonly text: {
-            readonly default: "text-foreground";
-        };
-        readonly padding: {
-            readonly sm: "p-sm";
-            readonly md: "p-md";
-            readonly lg: "p-lg";
-        };
-        readonly radius: {
-            readonly sm: "rounded-md";
-            readonly md: "rounded-lg";
-        };
-        readonly shadow: {
-            readonly sm: "shadow-md";
-            readonly md: "shadow-lg";
-        };
-        readonly width: {
-            readonly xs: "w-40";
-            readonly sm: "w-48";
-            readonly md: "w-72";
-            readonly lg: "w-96";
-            readonly xl: "w-[32rem]";
-        };
-    };
-    /**
-     * Popover arrow tokens
-     * Maps to foundation spacing tokens
-     */
-    readonly arrow: {
-        readonly size: {
-            readonly sm: "w-2 h-2";
-            readonly md: "w-3 h-3";
-        };
-        readonly offset: {
-            readonly sm: "-translate-x-1/2";
-            readonly md: "-translate-x-1/2";
-        };
-    };
-    /**
-     * Animation tokens for popover enter/exit animations
-     * Maps to Motion utility classes
-     * Uses CSS-only animations from motion.ts
-     */
-    readonly animation: {
-        readonly enter: "tm-motion-fade-scale";
-        readonly exit: "tm-motion-fade-scale-out";
-    };
-};
-/**
- * Type exports for Popover tokens
- */
-type PopoverContentPadding = keyof typeof POPOVER_TOKENS.content.padding;
-type PopoverContentRadius = keyof typeof POPOVER_TOKENS.content.radius;
-type PopoverContentShadow = keyof typeof POPOVER_TOKENS.content.shadow;
-type PopoverContentWidth = keyof typeof POPOVER_TOKENS.content.width;
-type PopoverArrowSize = keyof typeof POPOVER_TOKENS.arrow.size;
-type PopoverArrowOffset = keyof typeof POPOVER_TOKENS.arrow.offset;
-
-/**
- * Tooltip Component Tokens
- *
- * Component-level design tokens for Tooltip component.
- * Maps foundation tokens (spacing, radius, shadows, typography) to tooltip-specific usage.
- *
- * All values use Tailwind utility classes that map to foundation tokens.
- */
-/**
- * Tooltip Component Tokens
- *
- * Defines tokens for tooltip content styling.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-declare const TOOLTIP_TOKENS: {
-    /**
-     * Tooltip content tokens
-     * Maps to foundation spacing, radius, shadow, and typography tokens
-     */
-    readonly content: {
-        readonly border: {
-            readonly default: "border";
-            readonly color: "border-border";
-        };
-        readonly background: {
-            readonly default: "bg-popover";
-        };
-        readonly text: {
-            readonly default: "text-foreground";
-        };
-        readonly padding: {
-            readonly horizontal: "px-sm";
-            readonly vertical: "py-xs";
-        };
-        readonly radius: {
-            readonly sm: "rounded-sm";
-            readonly md: "rounded-md";
-        };
-        readonly shadow: {
-            readonly sm: "shadow-sm";
-            readonly md: "shadow-md";
-        };
-        readonly fontSize: {
-            readonly sm: "text-sm";
-        };
-    };
-};
-/**
- * Type exports for Tooltip tokens
- */
-type TooltipContentRadius = keyof typeof TOOLTIP_TOKENS.content.radius;
-type TooltipContentShadow = keyof typeof TOOLTIP_TOKENS.content.shadow;
-
-/**
- * Data Component Tokens
- *
- * Component-level design tokens for Skeleton component only.
- *
- * Note: Other data components (Table, DataList, EmptyState, Pagination) have their own
- * isolated token domains:
- * - TABLE_TOKENS (src/tokens/components/table.ts)
- * - DATA_LIST_TOKENS (src/tokens/components/data-list.ts)
- * - EMPTY_STATE_TOKENS (src/tokens/components/empty-state.ts)
- * - PAGINATION_TOKENS (src/tokens/components/pagination.ts)
- *
- * Maps foundation tokens (spacing, typography, radius, shadows) to skeleton-specific usage.
- * All values reference foundation tokens to ensure consistency across the design system.
- */
-/**
- * Data Component Tokens (Skeleton Only)
- *
- * Defines all spacing, sizing, typography, and visual tokens for Skeleton component.
- * Values are mapped to Tailwind utility classes for direct use in component variants.
- */
-declare const DATA_TOKENS: {
-    /**
-     * Skeleton Component Tokens
-     */
-    readonly skeleton: {
-        /**
-         * Skeleton heights by variant
-         * Maps to Tailwind height utilities
-         */
-        readonly height: {
-            readonly text: "h-4";
-            readonly circle: "h-10 w-10";
-            readonly block: "h-20";
-            readonly card: "h-32";
-            readonly inline: "h-4";
-        };
-        /**
-         * Border radius by variant
-         * Maps to foundation borderRadius tokens
-         */
-        readonly radius: {
-            readonly text: "rounded-sm";
-            readonly circle: "rounded-full";
-            readonly block: "rounded-md";
-            readonly card: "rounded-xl";
-            readonly inline: "rounded-sm";
-        };
-        /**
-         * Animation tokens
-         * Uses motion tokens for animations
-         */
-        readonly animation: {
-            readonly pulse: "animate-pulse";
-            readonly fade: "animate-pulse";
-        };
-        /**
-         * Background color tokens
-         * Uses semantic color tokens
-         */
-        readonly background: {
-            readonly default: "bg-muted";
-            readonly subtle: "bg-muted/50";
-        };
-        /**
-         * Width tokens for skeleton variants
-         */
-        readonly width: {
-            readonly full: "w-full";
-            readonly inline: "inline-block";
-        };
-    };
-};
-/**
- * Type exports for Data tokens (Skeleton only)
- */
-type SkeletonVariant = keyof typeof DATA_TOKENS.skeleton.height;
-type SkeletonAnimation = keyof typeof DATA_TOKENS.skeleton.animation;
-type SkeletonBackground = keyof typeof DATA_TOKENS.skeleton.background;
-
-/**
- * Table Component Tokens
- *
- * Component-level design tokens for Table component.
- * Maps foundation tokens (spacing, typography, radius, shadows) to table-specific usage.
- *
- * All values reference foundation tokens to ensure consistency across the design system.
- *
- * This is an isolated token domain - tokens are specific to Table component only.
- * No other components should import or use TABLE_TOKENS.
- */
-/**
- * Table Component Tokens
- *
- * Defines all spacing, sizing, typography, and visual tokens for Table component.
- * Values are mapped to Tailwind utility classes for direct use in component variants.
- */
-declare const TABLE_TOKENS: {
-    /**
-     * Table row heights by size
-     * Maps to Tailwind height utilities
-     */
-    readonly rowHeight: {
-        readonly sm: "h-8";
-        readonly md: "h-10";
-        readonly lg: "h-12";
-    };
-    /**
-     * Table cell and header padding by size
-     * Maps to semantic spacing tokens
-     */
-    readonly padding: {
-        readonly cell: {
-            readonly sm: "p-xs";
-            readonly md: "p-sm";
-            readonly lg: "p-md";
-        };
-        readonly header: {
-            readonly sm: "px-xs py-sm";
-            readonly md: "px-sm py-md";
-            readonly lg: "px-md py-lg";
-        };
-    };
-    /**
-     * Gap between table cells (horizontal spacing)
-     */
-    readonly gap: {
-        readonly sm: "gap-xs";
-        readonly md: "gap-sm";
-    };
-    /**
-     * Border radius for table
-     */
-    readonly radius: {
-        readonly default: "rounded-md";
-    };
-    /**
-     * Shadow tokens for table
-     * Maps to foundation elevation shadow tokens
-     */
-    readonly shadow: {
-        readonly none: "shadow-none";
-        readonly subtle: "shadow-sm";
-    };
-    /**
-     * Typography tokens for table headers and cells
-     * Maps to foundation typography fontSize tokens
-     */
-    readonly typography: {
-        readonly header: {
-            readonly fontSize: "text-sm";
-            readonly fontWeight: "font-semibold";
-        };
-        readonly cell: {
-            readonly fontSize: "text-sm";
-            readonly fontWeight: "font-normal";
-        };
-    };
-    /**
-     * Color tokens for table states
-     * Uses semantic color tokens
-     */
-    readonly colors: {
-        readonly border: "border-[hsl(var(--tm-border-default))]";
-        readonly rowHover: "hover:bg-muted/50";
-        readonly rowSelected: "bg-muted";
-    };
-    /**
-     * Border tokens for table
-     */
-    readonly border: {
-        readonly bottom: "border-b";
-    };
-    /**
-     * Layout tokens for table container and base styles
-     */
-    readonly layout: {
-        readonly overflow: "overflow-x-auto";
-        readonly table: "w-full border-collapse";
-    };
-    /**
-     * Sticky header tokens
-     * For sticky header positioning and styling
-     */
-    readonly sticky: {
-        readonly header: "sticky top-0 z-10 bg-[hsl(var(--tm-surface-base))]";
-    };
-    /**
-     * Expandable row tokens
-     * For expandable content styling
-     */
-    readonly expandable: {
-        readonly padding: "p-md";
-        readonly container: "p-0";
-        readonly transition: "overflow-hidden transition-all duration-normal ease-in-out";
-        readonly expanded: "max-h-[100vh] opacity-100";
-        readonly collapsed: "max-h-0 opacity-0";
-        readonly cursor: "cursor-pointer";
-        readonly content: {
-            readonly expanded: "block";
-            readonly collapsed: "hidden";
-        };
-    };
-    /**
-     * Loading state tokens
-     * For loading state cell styling
-     */
-    readonly loading: {
-        readonly cellPadding: "p-sm";
-        readonly skeletonWidth: "w-full";
-    };
-    /**
-     * Empty state tokens
-     * For empty state cell styling
-     */
-    readonly empty: {
-        readonly padding: "p-8";
-    };
-    /**
-     * Sortable header tokens
-     * For sortable header styling and interactions
-     */
-    readonly sortable: {
-        readonly hover: "hover:bg-muted/50";
-        readonly gap: "gap-2";
-        readonly cursor: "cursor-pointer select-none";
-        readonly container: "flex items-center";
-        readonly icon: {
-            readonly base: "inline-flex size-4 items-center text-[hsl(var(--tm-text-muted))] transition-transform";
-            readonly rotated: "rotate-180";
-            readonly inactive: "opacity-30";
-        };
-    };
-};
-/**
- * Type exports for Table tokens
- */
-type TableRowHeight = keyof typeof TABLE_TOKENS.rowHeight;
-type TableCellPadding = keyof typeof TABLE_TOKENS.padding.cell;
-type TableHeaderPadding = keyof typeof TABLE_TOKENS.padding.header;
-type TableGap = keyof typeof TABLE_TOKENS.gap;
-type TableShadow = keyof typeof TABLE_TOKENS.shadow;
-
-/**
- * SimpleTable Component Tokens
- *
- * Component-level design tokens for SimpleTable component.
- * Maps foundation tokens (spacing, typography, radius) to simple-table-specific usage.
- *
- * All values use Tailwind utility classes that map to foundation tokens.
- */
-/**
- * SimpleTable Component Tokens
- *
- * Defines tokens for simple table spacing, typography, and layout by size.
- * Values are mapped to Tailwind utility classes for direct use.
- */
-declare const SIMPLETABLE_TOKENS: {
-    /**
-     * Cell padding by size
-     * Maps to semanticSpacing tokens
-     */
-    readonly padding: {
-        readonly cell: {
-            readonly sm: "p-xs";
-            readonly md: "p-sm";
-            readonly lg: "p-md";
-        };
-        readonly header: {
-            readonly sm: "px-xs py-xs";
-            readonly md: "px-sm py-sm";
-            readonly lg: "px-md py-md";
-        };
-    };
-    /**
-     * Typography tokens for table headers and cells by size
-     * Maps to fontSize and fontWeight tokens
-     */
-    readonly typography: {
-        readonly header: {
-            readonly sm: "text-xs font-medium text-[hsl(var(--tm-text-muted))]";
-            readonly md: "text-sm font-medium text-[hsl(var(--tm-text-muted))]";
-            readonly lg: "text-base font-medium text-[hsl(var(--tm-text-muted))]";
-        };
-        readonly cell: {
-            readonly sm: "text-xs";
-            readonly md: "text-sm";
-            readonly lg: "text-base";
-        };
-    };
-    /**
-     * Layout tokens for table container and base styles
-     */
-    readonly layout: {
-        readonly overflow: "overflow-x-auto";
-        readonly table: "w-full border-collapse";
-    };
-    /**
-     * Border tokens for table
-     */
-    readonly border: {
-        readonly bottom: "border-b";
-        readonly color: "border-[hsl(var(--tm-border-default))]";
-    };
-    /**
-     * State tokens for table rows
-     */
-    readonly state: {
-        readonly rowHover: "hover:bg-muted/50";
-    };
-    /**
-     * Text alignment tokens
-     */
-    readonly alignment: {
-        readonly left: "text-left";
-    };
-};
-
-/**
- * DataList Component Tokens
- *
- * Component-level design tokens for DataList component.
- * Maps foundation tokens (spacing, typography) to data-list-specific usage.
- *
- * All values reference foundation tokens to ensure consistency across the design system.
- *
- * This is an isolated token domain - tokens are specific to DataList component only.
- * No other components should import or use DATA_LIST_TOKENS.
- */
-/**
- * DataList Component Tokens
- *
- * Defines all spacing, sizing, typography, and visual tokens for DataList component.
- * Values are mapped to Tailwind utility classes for direct use in component variants.
- */
-declare const DATA_LIST_TOKENS: {
-    /**
-     * Spacing tokens for DataList
-     * Maps to semantic spacing tokens
-     */
-    readonly spacing: {
-        readonly gap: "gap-md";
-        readonly padding: "p-md";
-    };
-    /**
-     * Label width tokens (for desktop horizontal layout)
-     * Maps to Tailwind width utilities
-     */
-    readonly labelWidth: {
-        readonly sm: "w-24";
-        readonly md: "w-32";
-        readonly lg: "w-40";
-    };
-    /**
-     * Row padding tokens
-     * Maps to semantic spacing tokens
-     */
-    readonly rowPadding: {
-        readonly sm: "py-xs";
-        readonly md: "py-sm";
-        readonly lg: "py-md";
-    };
-    /**
-     * Item tokens
-     * For individual DataList item styling
-     */
-    readonly item: {
-        /**
-         * Border tokens for items
-         */
-        readonly border: "border-b border-border last:border-0";
-        /**
-         * Responsive layout tokens
-         */
-        readonly layout: {
-            readonly mobile: "flex flex-col";
-            readonly desktop: "md:flex-row md:items-center";
-        };
-    };
-    /**
-     * Label tokens
-     * For DataList label styling
-     */
-    readonly label: {
-        readonly mobile: "mb-1 font-semibold text-foreground";
-        readonly desktop: "md:mb-0";
-    };
-    /**
-     * Value tokens
-     * For DataList value styling
-     */
-    readonly value: {
-        readonly color: "text-[hsl(var(--tm-text-muted))]";
-        readonly flex: "flex-1";
-    };
-};
-/**
- * Type exports for DataList tokens
- */
-type DataListLabelWidth = keyof typeof DATA_LIST_TOKENS.labelWidth;
-type DataListRowPadding = keyof typeof DATA_LIST_TOKENS.rowPadding;
-
-/**
- * EmptyState Component Tokens
- *
- * Component-level design tokens for EmptyState component.
- * Maps foundation tokens (spacing, typography, radius) to empty-state-specific usage.
- *
- * All values reference foundation tokens to ensure consistency across the design system.
- *
- * This is an isolated token domain - tokens are specific to EmptyState component only.
- * No other components should import or use EMPTY_STATE_TOKENS.
- */
-/**
- * EmptyState Component Tokens
- *
- * Defines all spacing, sizing, typography, and visual tokens for EmptyState component.
- * Values are mapped to Tailwind utility classes for direct use in component variants.
- */
-declare const EMPTY_STATE_TOKENS: {
-    /**
-     * Spacing tokens for EmptyState
-     * Maps to semantic spacing tokens
-     */
-    readonly spacing: {
-        readonly gap: "gap-md";
-        readonly padding: "p-lg";
-        readonly action: "mt-2";
-    };
-    /**
-     * Border radius for EmptyState container
-     */
-    readonly radius: {
-        readonly default: "rounded-xl";
-    };
-    /**
-     * Icon sizes by variant
-     * Maps to Tailwind size utilities
-     */
-    readonly icon: {
-        readonly size: {
-            readonly sm: "size-8";
-            readonly md: "size-12";
-            readonly lg: "size-16";
-        };
-        readonly container: "flex items-center justify-center text-[hsl(var(--tm-text-muted))]";
-    };
-    /**
-     * Typography tokens for EmptyState
-     * Maps to foundation typography tokens
-     */
-    readonly typography: {
-        readonly title: {
-            readonly fontSize: "text-lg";
-            readonly fontWeight: "font-semibold";
-            readonly color: "text-foreground";
-        };
-        readonly description: {
-            readonly fontSize: "text-sm";
-            readonly fontWeight: "font-normal";
-            readonly color: "text-[hsl(var(--tm-text-muted))]";
-            readonly maxWidth: "max-w-md";
-        };
-    };
-    /**
-     * Alignment tokens
-     * For text alignment in EmptyState
-     */
-    readonly alignment: {
-        readonly center: "text-center";
-        readonly left: "text-left";
-        readonly right: "text-right";
-    };
-};
-/**
- * Type exports for EmptyState tokens
- */
-type EmptyStateIconSize = keyof typeof EMPTY_STATE_TOKENS.icon.size;
-
-/**
- * Icon Component Tokens
- *
- * Component-level design tokens for Icon component.
- * Maps foundation tokens (spacing, colors) to icon-specific usage.
- *
- * All values reference foundation tokens to ensure consistency across the design system.
- */
-/**
- * Icon Component Tokens
- *
- * Defines all sizing, stroke, and color tokens for Icon component.
- * Values are mapped to Tailwind utility classes for direct use in component variants.
- */
-declare const ICON_TOKENS: {
-    /**
-     * Icon sizes
-     * Maps to Tailwind size utilities for consistent icon sizing
-     */
-    readonly sizes: {
-        readonly xs: "h-2.5 w-2.5";
-        readonly sm: "h-3 w-3";
-        readonly md: "h-4 w-4";
-        readonly lg: "h-5 w-5";
-        readonly xl: "h-6 w-6";
-        readonly "2xl": "h-8 w-8";
-        readonly "3xl": "h-10 w-10";
-        readonly "4xl": "h-12 w-12";
-    };
-    /**
-     * Stroke width variants
-     * Maps to Tailwind stroke-width utilities
-     */
-    readonly stroke: {
-        readonly thin: "stroke-[1px]";
-        readonly normal: "stroke-[1.5px]";
-        readonly bold: "stroke-2";
-    };
-    /**
-     * Color variants
-     * Maps to semantic text color tokens
-     */
-    readonly colors: {
-        readonly default: "text-[hsl(var(--tm-text-primary))]";
-        readonly muted: "text-[hsl(var(--tm-text-muted))]";
-        readonly success: "text-success";
-        readonly warning: "text-warning";
-        readonly danger: "text-destructive";
-        readonly info: "text-info";
-    };
-};
-/**
- * Type exports for Icon tokens
- */
-type IconSize = keyof typeof ICON_TOKENS.sizes;
-type IconStroke = keyof typeof ICON_TOKENS.stroke;
-type IconColor = keyof typeof ICON_TOKENS.colors;
-
-/**
- * Motion Component Tokens
- *
- * Component-level design tokens for Motion/Animation utilities.
- * Maps foundation motion tokens (durations, easings, transitions) to Tailwind utility classes.
- *
- * All values use Tailwind utility classes that map to foundation motion tokens.
- */
-/**
- * Motion Component Tokens
- *
- * Defines transition, duration, and easing tokens for component usage.
- * Values are mapped to Tailwind utility classes for direct use in components.
- */
-declare const MOTION_TOKENS: {
-    /**
-     * Transition property tokens
-     * Maps to Tailwind transition utilities
-     */
-    readonly transition: {
-        readonly all: "transition-all";
-        readonly colors: "transition-colors";
-        readonly opacity: "transition-opacity";
-        readonly transform: "transition-transform";
-        readonly shadow: "transition-shadow";
-        readonly none: "transition-none";
-    };
-    /**
-     * Duration tokens
-     * Maps to foundation motion duration tokens via Tailwind
-     */
-    readonly duration: {
-        readonly instant: "duration-0";
-        readonly fast: "duration-fast";
-        readonly normal: "duration-normal";
-        readonly slow: "duration-slow";
-        readonly slower: "duration-slower";
-        readonly slowest: "duration-slowest";
-        readonly "75": "duration-75";
-        readonly "100": "duration-100";
-        readonly "200": "duration-200";
-        readonly "250": "duration-250";
-        readonly "300": "duration-300";
-        readonly "400": "duration-400";
-        readonly "500": "duration-500";
-        readonly "600": "duration-600";
-        readonly "700": "duration-700";
-        readonly "800": "duration-800";
-        readonly "1000": "duration-1000";
-    };
-    /**
-     * Easing tokens
-     * Maps to foundation motion easing tokens via Tailwind
-     */
-    readonly easing: {
-        readonly linear: "ease-linear";
-        readonly in: "ease-in";
-        readonly out: "ease-out";
-        readonly "in-out": "ease-in-out";
-        readonly bounce: "ease-bounce";
-        readonly elastic: "ease-elastic";
-    };
-    /**
-     * Pre-configured transition tokens
-     * Combines duration and easing for common use cases
-     */
-    readonly transitionPreset: {
-        readonly fast: "transition-all duration-fast ease-out";
-        readonly normal: "transition-all duration-normal ease-in-out";
-        readonly slow: "transition-all duration-slow ease-in-out";
-        readonly colors: "transition-colors duration-normal ease-out";
-        readonly transform: "transition-transform duration-normal ease-out";
-        readonly opacity: "transition-opacity duration-fast ease-out";
-    };
-    /**
-     * Animation tokens
-     * Maps to foundation motion animation tokens via Tailwind
-     */
-    readonly animation: {
-        readonly none: "animate-none";
-        readonly spin: "animate-spin";
-        readonly pulse: "animate-pulse";
-        readonly bounce: "animate-bounce";
-        readonly ping: "animate-ping";
-        readonly shake: "animate-shake";
-        readonly fadeIn: "animate-fadeIn";
-        readonly fadeOut: "animate-fadeOut";
-        readonly slideInUp: "animate-slideInUp";
-        readonly slideInDown: "animate-slideInDown";
-        readonly slideInLeft: "animate-slideInLeft";
-        readonly slideInRight: "animate-slideInRight";
-        readonly scaleIn: "animate-scaleIn";
-        readonly scaleOut: "animate-scaleOut";
-    };
-};
-/**
- * Type exports for Motion tokens
- */
-type MotionTransition = keyof typeof MOTION_TOKENS.transition;
-type MotionDuration = keyof typeof MOTION_TOKENS.duration;
-type MotionEasing = keyof typeof MOTION_TOKENS.easing;
-type MotionTransitionPreset = keyof typeof MOTION_TOKENS.transitionPreset;
-type MotionAnimation = keyof typeof MOTION_TOKENS.animation;
-
-/**
- * CSS Variables Generator
- *
- * Merges all CSS custom properties from all token systems.
- * This file aggregates all CSS variables for injection into the theme system.
- */
-/**
- * All CSS Variables from Tokens
- * Merges all token CSS variables into a single object
- */
-declare const allCSSVariables: {
-    readonly "--tm-z-base": "0";
-    readonly "--tm-z-dropdown": "1000";
-    readonly "--tm-z-sticky": "1100";
-    readonly "--tm-z-overlay": "1200";
-    readonly "--tm-z-modal": "1300";
-    readonly "--tm-z-toast": "1400";
-    readonly "--tm-z-tooltip": "1500";
-    readonly "--tm-motion-duration-fast": "250ms";
-    readonly "--tm-motion-duration-normal": "450ms";
-    readonly "--tm-motion-duration-slow": "650ms";
-    readonly "--tm-motion-duration-reduced": "0ms";
-    readonly "--tm-motion-easing-soft": "cubic-bezier(0.22, 1, 0.36, 1)";
-    readonly "--tm-motion-easing-standard": "cubic-bezier(0.4, 0, 0.2, 1)";
-    readonly "--tm-motion-easing-emphasized": "cubic-bezier(0.2, 0, 0, 1)";
-    readonly "--tm-motion-transition-fast": "250ms cubic-bezier(0.4, 0, 0.2, 1)";
-    readonly "--tm-motion-transition-normal": "450ms cubic-bezier(0.4, 0, 0.2, 1)";
-    readonly "--tm-motion-transition-slow": "650ms cubic-bezier(0.2, 0, 0, 1)";
-    readonly "--tm-motion-transition-soft": "450ms cubic-bezier(0.22, 1, 0.36, 1)";
-    readonly "--tm-motion-transition-reduced": "0ms linear";
-    readonly "--radius-none": "0";
-    readonly "--radius-xs": "0.125rem";
-    readonly "--radius-sm": "0.25rem";
-    readonly "--radius-base": "0.25rem";
-    readonly "--radius-md": "0.375rem";
-    readonly "--radius-lg": "0.5rem";
-    readonly "--radius-xl": "0.75rem";
-    readonly "--radius-2xl": "1rem";
-    readonly "--radius-3xl": "1.5rem";
-    readonly "--radius-full": "9999px";
-    readonly "--radius": "0.375rem";
-    readonly "--radius-button": "0.375rem";
-    readonly "--radius-card": "0.375rem";
-    readonly "--radius-input": "0.375rem";
-    readonly "--radius-badge": "0.25rem";
-    readonly "--radius-modal": "0.5rem";
-    readonly "--radius-tooltip": "0.25rem";
-    readonly "--radius-toast": "0.5rem";
-    readonly "--radius-chip": "0.25rem";
-    readonly "--radius-image": "0.375rem";
-    readonly "--shadow-none": "none";
-    readonly "--shadow-xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-    readonly "--shadow-sm": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
-    readonly "--shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-    readonly "--shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-    readonly "--shadow-xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
-    readonly "--shadow-2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)";
-    readonly "--shadow-primary-xs": "0 1px 2px 0 hsl(var(--primary-500) / 0.15)";
-    readonly "--shadow-primary-sm": "0 2px 4px 0 hsl(var(--primary-500) / 0.2)";
-    readonly "--shadow-primary-md": "0 4px 8px 0 hsl(var(--primary-500) / 0.3)";
-    readonly "--shadow-primary-lg": "0 8px 16px 0 hsl(var(--primary-500) / 0.4)";
-    readonly "--shadow-primary-xl": "0 12px 24px 0 hsl(var(--primary-500) / 0.5)";
-    readonly "--shadow-primary-2xl": "0 16px 32px 0 hsl(var(--primary-500) / 0.6)";
-    readonly "--shadow-accent-xs": "0 1px 2px 0 hsl(var(--accent-500) / 0.15)";
-    readonly "--shadow-accent-sm": "0 2px 4px 0 hsl(var(--accent-500) / 0.2)";
-    readonly "--shadow-accent-md": "0 4px 8px 0 hsl(var(--accent-500) / 0.3)";
-    readonly "--shadow-accent-lg": "0 8px 16px 0 hsl(var(--accent-500) / 0.4)";
-    readonly "--shadow-accent-xl": "0 12px 24px 0 hsl(var(--accent-500) / 0.5)";
-    readonly "--shadow-accent-2xl": "0 16px 32px 0 hsl(var(--accent-500) / 0.6)";
-    readonly "--glow-primary": "0 0 20px 0 hsl(var(--primary-500) / 0.5), 0 0 40px 0 hsl(var(--primary-500) / 0.3)";
-    readonly "--glow-primary-subtle": "0 0 8px 0 hsl(var(--primary-500) / 0.3)";
-    readonly "--glow-primary-medium": "0 0 16px 0 hsl(var(--primary-500) / 0.5)";
-    readonly "--glow-primary-strong": "0 0 24px 0 hsl(var(--primary-500) / 0.6)";
-    readonly "--glow-accent": "0 0 20px 0 hsl(var(--accent-500) / 0.5), 0 0 40px 0 hsl(var(--accent-500) / 0.3)";
-    readonly "--glow-accent-subtle": "0 0 8px 0 hsl(var(--accent-500) / 0.3)";
-    readonly "--glow-accent-medium": "0 0 16px 0 hsl(var(--accent-500) / 0.5)";
-    readonly "--glow-accent-strong": "0 0 24px 0 hsl(var(--accent-500) / 0.6)";
-    readonly "--focus-ring-default": "0 0 0 3px hsl(var(--tm-focus-ring) / 0.5)";
-    readonly "--focus-ring-primary": "0 0 0 3px hsl(var(--primary-500) / 0.3)";
-    readonly "--focus-ring-accent": "0 0 0 3px hsl(var(--accent-500) / 0.3)";
-    readonly "--focus-primary": "0 0 0 3px hsl(var(--primary-500) / 0.3)";
-    readonly "--focus-accent": "0 0 0 3px hsl(var(--accent-500) / 0.3)";
-    readonly "--spacing-0": "0";
-    readonly "--spacing-px": "1px";
-    readonly "--spacing-0-5": "0.125rem";
-    readonly "--spacing-1": "0.25rem";
-    readonly "--spacing-1-5": "0.375rem";
-    readonly "--spacing-2": "0.5rem";
-    readonly "--spacing-2-5": "0.625rem";
-    readonly "--spacing-3": "0.75rem";
-    readonly "--spacing-3-5": "0.875rem";
-    readonly "--spacing-4": "1rem";
-    readonly "--spacing-5": "1.25rem";
-    readonly "--spacing-6": "1.5rem";
-    readonly "--spacing-7": "1.75rem";
-    readonly "--spacing-8": "2rem";
-    readonly "--spacing-9": "2.25rem";
-    readonly "--spacing-10": "2.5rem";
-    readonly "--spacing-11": "2.75rem";
-    readonly "--spacing-12": "3rem";
-    readonly "--spacing-14": "3.5rem";
-    readonly "--spacing-16": "4rem";
-    readonly "--spacing-20": "5rem";
-    readonly "--spacing-24": "6rem";
-    readonly "--spacing-xs": "0.25rem";
-    readonly "--spacing-sm": "0.5rem";
-    readonly "--spacing-md": "1rem";
-    readonly "--spacing-lg": "1.5rem";
-    readonly "--spacing-xl": "2rem";
-    readonly "--spacing-2xl": "3rem";
-    readonly "--spacing-3xl": "4rem";
-    readonly "--spacing-4xl": "5rem";
-    readonly "--spacing-5xl": "6rem";
-    readonly "--spacing-none": "0";
-    readonly "--layout-section-xs": "1.5rem";
-    readonly "--layout-section-sm": "2rem";
-    readonly "--layout-section-md": "3rem";
-    readonly "--layout-section-lg": "4rem";
-    readonly "--layout-section-xl": "5rem";
-    readonly "--layout-section-2xl": "6rem";
-    readonly "--layout-container-xs": "0.5rem";
-    readonly "--layout-container-sm": "1rem";
-    readonly "--layout-container-md": "1.5rem";
-    readonly "--layout-container-lg": "2rem";
-    readonly "--layout-container-xl": "3rem";
-    readonly "--layout-grid-xs": "0.5rem";
-    readonly "--layout-grid-sm": "1rem";
-    readonly "--layout-grid-md": "1.5rem";
-    readonly "--layout-grid-lg": "2rem";
-    readonly "--layout-grid-xl": "3rem";
-    readonly "--layout-stack-xs": "0.25rem";
-    readonly "--layout-stack-sm": "0.5rem";
-    readonly "--layout-stack-md": "1rem";
-    readonly "--layout-stack-lg": "1.5rem";
-    readonly "--layout-stack-xl": "2rem";
-    readonly "--layout-component-xs": "0.25rem";
-    readonly "--layout-component-sm": "0.5rem";
-    readonly "--layout-component-md": "1rem";
-    readonly "--layout-component-lg": "1.5rem";
-    readonly "--layout-component-xl": "2rem";
-    readonly "--font-sans": string;
-    readonly "--font-satoshi": string;
-    readonly "--font-display": string;
-    readonly "--font-serif": string;
-    readonly "--font-mono": string;
-    readonly "--font-size-xs": "clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem)";
-    readonly "--font-size-sm": "clamp(0.875rem, 0.8rem + 0.25vw, 1rem)";
-    readonly "--font-size-base": "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)";
-    readonly "--font-size-lg": "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)";
-    readonly "--font-size-xl": "clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)";
-    readonly "--font-size-2xl": "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)";
-    readonly "--font-size-3xl": "clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem)";
-    readonly "--font-size-4xl": "clamp(2.25rem, 1.75rem + 2.5vw, 3rem)";
-    readonly "--font-size-5xl": "clamp(3rem, 2rem + 5vw, 4rem)";
-    readonly "--font-size-6xl": "clamp(3.75rem, 2.5rem + 6.25vw, 5rem)";
-    readonly "--font-weight-thin": "100";
-    readonly "--font-weight-extralight": "200";
-    readonly "--font-weight-light": "300";
-    readonly "--font-weight-normal": "400";
-    readonly "--font-weight-medium": "500";
-    readonly "--font-weight-semibold": "600";
-    readonly "--font-weight-bold": "700";
-    readonly "--font-weight-extrabold": "800";
-    readonly "--font-weight-black": "900";
-    readonly "--line-height-none": "1";
-    readonly "--line-height-tight": "1.25";
-    readonly "--line-height-snug": "1.375";
-    readonly "--line-height-normal": "1.5";
-    readonly "--line-height-relaxed": "1.625";
-    readonly "--line-height-loose": "2";
-    readonly "--letter-spacing-tighter": "-0.05em";
-    readonly "--letter-spacing-tight": "-0.025em";
-    readonly "--letter-spacing-normal": "0em";
-    readonly "--letter-spacing-wide": "0.025em";
-    readonly "--letter-spacing-wider": "0.05em";
-    readonly "--letter-spacing-widest": "0.1em";
-    readonly "--tm-border-width-none": "0";
-    readonly "--tm-border-width-thin": "1px";
-    readonly "--tm-border-width-default": "2px";
-    readonly "--tm-border-width-thick": "4px";
-    readonly "--primary-50": string;
-    readonly "--primary-100": string;
-    readonly "--primary-200": string;
-    readonly "--primary-300": string;
-    readonly "--primary-400": string;
-    readonly "--primary-500": string;
-    readonly "--primary-600": string;
-    readonly "--primary-700": string;
-    readonly "--primary-800": string;
-    readonly "--primary-900": string;
-    readonly "--primary-950": string;
-    readonly "--accent-50": string;
-    readonly "--accent-100": string;
-    readonly "--accent-200": string;
-    readonly "--accent-300": string;
-    readonly "--accent-400": string;
-    readonly "--accent-500": string;
-    readonly "--accent-600": string;
-    readonly "--accent-700": string;
-    readonly "--accent-800": string;
-    readonly "--accent-900": string;
-    readonly "--accent-950": string;
-    readonly "--secondary-50": string;
-    readonly "--secondary-100": string;
-    readonly "--secondary-200": string;
-    readonly "--secondary-300": string;
-    readonly "--secondary-400": string;
-    readonly "--secondary-500": string;
-    readonly "--secondary-600": string;
-    readonly "--secondary-700": string;
-    readonly "--secondary-800": string;
-    readonly "--secondary-900": string;
-    readonly "--secondary-950": string;
-};
-/**
- * Generate CSS string from CSS variables
- * Converts CSS variables object to CSS :root block
- */
-declare function generateCSSVariablesCSS(variables: Record<string, string>): string;
-/**
- * All CSS Variables as CSS string
- * Ready for injection into CSS files
- */
-declare const allCSSVariablesCSS: string;
-/**
- * Token System Summary
- * Lists all token systems and their variable counts
- */
-declare const tokenSystemSummary: {
-    readonly colors: number;
-    readonly borderWidth: number;
-    readonly typography: number;
-    readonly spacing: number;
-    readonly shadows: number;
-    readonly radius: number;
-    readonly motion: number;
-    readonly zIndex: number;
-    readonly total: number;
-};
-
-/**
- * Border Width System Tokens
- *
- * Canonical border thickness scale for token-driven UI surfaces.
- */
-/**
- * Border Width Scale
- */
-declare const borderWidth: {
-    readonly none: "0";
-    readonly thin: "1px";
-    readonly default: "2px";
-    readonly thick: "4px";
-};
-/**
- * CSS Custom Properties for Border Width
- * These are injected into runtime theme variables.
- */
-declare const borderWidthCSSVariables: {
-    readonly "--tm-border-width-none": "0";
-    readonly "--tm-border-width-thin": "1px";
-    readonly "--tm-border-width-default": "2px";
-    readonly "--tm-border-width-thick": "4px";
-};
-/**
- * Type Exports
- */
-type BorderWidthToken = keyof typeof borderWidth;
-type BorderWidthValue = (typeof borderWidth)[BorderWidthToken];
-
-/**
- * Z-Index System Tokens
- *
- * Canonical stacking layers for overlays and positioned UI.
- * Values use a 1000+ scale to avoid collisions with app-level local stacking contexts.
- */
-/**
- * Z-Index Scale
- * Layer ordering: base < dropdown < sticky < overlay < modal < toast < tooltip
- */
-declare const zIndex: {
-    readonly base: 0;
-    readonly dropdown: 1000;
-    readonly sticky: 1100;
-    readonly overlay: 1200;
-    readonly modal: 1300;
-    readonly toast: 1400;
-    readonly tooltip: 1500;
-};
-/**
- * CSS Custom Properties for Z-Index
- * These are injected into runtime theme variables.
- */
-declare const zIndexCSSVariables: {
-    readonly "--tm-z-base": "0";
-    readonly "--tm-z-dropdown": "1000";
-    readonly "--tm-z-sticky": "1100";
-    readonly "--tm-z-overlay": "1200";
-    readonly "--tm-z-modal": "1300";
-    readonly "--tm-z-toast": "1400";
-    readonly "--tm-z-tooltip": "1500";
-};
-/**
- * Type Exports
- */
-type ZIndexLayer = keyof typeof zIndex;
-type ZIndexValue = (typeof zIndex)[ZIndexLayer];
-
-/**
- * Theme Tokens
- *
- * Central export for UI color tokens.
- * Provides UI_COLORS object for use in components and theme system.
- */
-/**
- * UI Color Tokens
- * Complete color token system for Tenerife UI
- * All values are token-based, not raw Tailwind colors
- */
-declare const UI_COLORS: {
-    readonly background: "hsl(var(--tm-surface-base))";
-    readonly foreground: "hsl(var(--tm-text-primary))";
-    readonly card: {
-        readonly DEFAULT: "hsl(var(--tm-surface-raised))";
-        readonly foreground: "hsl(var(--tm-text-primary))";
-    };
-    readonly popover: {
-        readonly DEFAULT: "hsl(var(--tm-surface-overlay))";
-        readonly foreground: "hsl(var(--tm-text-primary))";
-    };
-    readonly primary: {
-        readonly DEFAULT: "hsl(var(--tm-primary))";
-        readonly foreground: "hsl(var(--tm-primary-foreground))";
-        readonly 50: "hsl(var(--primary-50))";
-        readonly 100: "hsl(var(--primary-100))";
-        readonly 200: "hsl(var(--primary-200))";
-        readonly 300: "hsl(var(--primary-300))";
-        readonly 400: "hsl(var(--primary-400))";
-        readonly 500: "hsl(var(--primary-500))";
-        readonly 600: "hsl(var(--primary-600))";
-        readonly 700: "hsl(var(--primary-700))";
-        readonly 800: "hsl(var(--primary-800))";
-        readonly 900: "hsl(var(--primary-900))";
-        readonly 950: "hsl(var(--primary-950))";
-    };
-    readonly secondary: {
-        readonly DEFAULT: "hsl(var(--tm-secondary))";
-        readonly foreground: "hsl(var(--tm-secondary-foreground))";
-        readonly 50: "hsl(var(--secondary-50))";
-        readonly 100: "hsl(var(--secondary-100))";
-        readonly 200: "hsl(var(--secondary-200))";
-        readonly 300: "hsl(var(--secondary-300))";
-        readonly 400: "hsl(var(--secondary-400))";
-        readonly 500: "hsl(var(--secondary-500))";
-        readonly 600: "hsl(var(--secondary-600))";
-        readonly 700: "hsl(var(--secondary-700))";
-        readonly 800: "hsl(var(--secondary-800))";
-        readonly 900: "hsl(var(--secondary-900))";
-        readonly 950: "hsl(var(--secondary-950))";
-    };
-    readonly accent: {
-        readonly DEFAULT: "hsl(var(--tm-accent))";
-        readonly foreground: "hsl(var(--tm-accent-foreground))";
-        readonly 50: "hsl(var(--accent-50))";
-        readonly 100: "hsl(var(--accent-100))";
-        readonly 200: "hsl(var(--accent-200))";
-        readonly 300: "hsl(var(--accent-300))";
-        readonly 400: "hsl(var(--accent-400))";
-        readonly 500: "hsl(var(--accent-500))";
-        readonly 600: "hsl(var(--accent-600))";
-        readonly 700: "hsl(var(--accent-700))";
-        readonly 800: "hsl(var(--accent-800))";
-        readonly 900: "hsl(var(--accent-900))";
-        readonly 950: "hsl(var(--accent-950))";
-    };
-    readonly muted: {
-        readonly DEFAULT: "hsl(var(--tm-muted))";
-        readonly foreground: "hsl(var(--tm-muted-foreground))";
-    };
-    readonly disabled: {
-        readonly DEFAULT: "hsl(var(--tm-disabled))";
-        readonly foreground: "hsl(var(--tm-disabled-foreground))";
-    };
-    readonly destructive: {
-        readonly DEFAULT: "hsl(var(--tm-destructive))";
-        readonly foreground: "hsl(var(--tm-destructive-foreground))";
-    };
-    readonly success: {
-        readonly DEFAULT: "hsl(var(--tm-status-success))";
-        readonly foreground: "hsl(var(--tm-status-success-foreground))";
-    };
-    readonly error: {
-        readonly DEFAULT: "hsl(var(--tm-status-error))";
-        readonly foreground: "hsl(var(--tm-status-error-foreground))";
-    };
-    readonly warning: {
-        readonly DEFAULT: "hsl(var(--tm-status-warning))";
-        readonly foreground: "hsl(var(--tm-status-warning-foreground))";
-    };
-    readonly info: {
-        readonly DEFAULT: "hsl(var(--tm-status-info))";
-        readonly foreground: "hsl(var(--tm-status-info-foreground))";
-    };
-    readonly surface: {
-        readonly base: "hsl(var(--tm-surface-base))";
-        readonly elevated1: "hsl(var(--tm-surface-raised))";
-        readonly elevated2: "hsl(var(--tm-surface-raised))";
-        readonly elevated3: "hsl(var(--tm-surface-raised))";
-        readonly overlay: "hsl(var(--tm-surface-overlay))";
-        readonly glass: "hsl(var(--tm-surface-overlay))";
-    };
-    readonly text: {
-        readonly primary: "hsl(var(--tm-text-primary))";
-        readonly secondary: "hsl(var(--tm-text-secondary))";
-        readonly tertiary: "hsl(var(--tm-text-muted))";
-        readonly muted: "hsl(var(--tm-text-muted))";
-        readonly destructive: "hsl(var(--tm-destructive))";
-        readonly accent: "hsl(var(--tm-accent))";
-        readonly inverse: "hsl(var(--tm-text-inverse))";
-    };
-    readonly border: "hsl(var(--tm-border-default))";
-    readonly input: "hsl(var(--tm-border-default))";
-    readonly ring: "hsl(var(--tm-focus-ring))";
-    readonly chart: {
-        readonly 1: "hsl(var(--chart-1))";
-        readonly 2: "hsl(var(--chart-2))";
-        readonly 3: "hsl(var(--chart-3))";
-        readonly 4: "hsl(var(--chart-4))";
-        readonly 5: "hsl(var(--chart-5))";
-    };
-};
-
-export { type NavigationState as $, ALERT_TOKENS as A, BUTTON_TOKENS as B, CARD_TOKENS as C, DATA_TOKENS as D, type EmptyStateIconSize as E, type MenuContentRadius as F, type MenuContentShadow as G, type MenuIndicatorOffset as H, type IconColor as I, type MenuIndicatorSize as J, type MenuItemGap as K, type MenuItemHeight as L, MENU_TOKENS as M, type MenuItemPadding as N, type MenuItemRadius as O, type PanelTone as P, type MenuLabelPadding as Q, type MenuSeparatorMargin as R, MOTION_TOKENS as S, type MotionAnimation as T, type MotionTransitionPreset as U, NAVIGATION_TOKENS as V, type NavigationItemPadding as W, type NavigationListGap as X, type NavigationRadius as Y, type NavigationShadow as Z, type NavigationSize as _, type IconStroke as a, zIndexCSSVariables as a$, NOTIFICATION_TOKENS as a0, type NotificationPanelWidth as a1, type NotificationVariant as a2, OVERLAY_TOKENS as a3, type OverlayBackdropVariant as a4, type OverlayModalSize as a5, PANEL_TOKENS as a6, type PanelPadding as a7, type PanelRadius as a8, type PanelShadow as a9, type TableGap as aA, type TableHeaderPadding as aB, type TableRowHeight as aC, type TableShadow as aD, TEXT_TOKENS as aE, type TextFontSize as aF, type TextFontWeight as aG, type TextLetterSpacing as aH, type TextLineHeight as aI, TOAST_TOKENS as aJ, type ToastVariant as aK, TOOLTIP_TOKENS as aL, type TooltipContentRadius as aM, type TooltipContentShadow as aN, ICON_TOKENS as aO, type IconSize as aP, allCSSVariables as aQ, allCSSVariablesCSS as aR, generateCSSVariablesCSS as aS, tokenSystemSummary as aT, type BorderWidthToken as aU, type BorderWidthValue as aV, borderWidth as aW, borderWidthCSSVariables as aX, type ZIndexLayer as aY, type ZIndexValue as aZ, zIndex as a_, POPOVER_TOKENS as aa, type PopoverArrowOffset as ab, type PopoverArrowSize as ac, type PopoverContentPadding as ad, type PopoverContentRadius as ae, type PopoverContentShadow as af, type PopoverContentWidth as ag, RADIO_TOKENS as ah, type RadioSize as ai, type RadioState as aj, type RadioVariant as ak, SECTION_TOKENS as al, type SectionGap as am, type SectionPadding as an, type SkeletonAnimation as ao, type SkeletonBackground as ap, SURFACE_TOKENS as aq, type SurfacePadding as ar, type SurfaceRadius as as, type SurfaceShadow as at, type SurfaceVariant as au, SWITCH_TOKENS as av, type SwitchSize as aw, type SwitchState as ax, type SwitchVariant as ay, type TableCellPadding as az, type ButtonFontSize as b, UI_COLORS as b0, ARTIST_TOKENS as b1, DATA_LIST_TOKENS as b2, DOMAIN_TOKENS as b3, EMPTY_STATE_TOKENS as b4, SIMPLETABLE_TOKENS as b5, TABLE_TOKENS as b6, type ArtistCardFooterBorder as b7, type ArtistCardImageContainer as b8, type ArtistCardImagePlaceholder as b9, type ArtistCardImageSizing as ba, type DomainCardBadge as bb, type DomainCardImage as bc, type DomainCardLayout as bd, type DomainCardMetadata as be, type DomainCardMotion as bf, type DomainCardPriceCapacity as bg, type DomainCardSkeleton as bh, type DomainCardSkeletonContentWidth as bi, type DomainCardSurface as bj, type MotionDuration as bk, type MotionEasing as bl, type MotionTransition as bm, type SkeletonVariant as bn, type ButtonHeight as c, type ButtonPaddingHorizontal as d, type ButtonPaddingVertical as e, type ButtonShadow as f, type CardPadding as g, type CardRadius as h, type CardShadow as i, type CardSize as j, type CardSpacingVertical as k, CHECKBOX_TOKENS as l, type CheckboxSize as m, type CheckboxState as n, type CheckboxVariant as o, type DataListLabelWidth as p, type DataListRowPadding as q, INPUT_TOKENS as r, type InputFontSize as s, type InputHeight as t, type InputPaddingHorizontal as u, type InputPaddingVertical as v, type InputRadius as w, type InputSize as x, type MenuContentMinWidth as y, type MenuContentPadding as z };