@tenerife.music/ui 1.0.16 → 1.1.1

package/dist/tokens/index.d.ts

@@ -1,5 +1,5 @@
 export { B as BaseColorTokens, C as ChartColors, a as ColorScale, b as ColorTokens, M as Mode, S as SemanticColors, c as SurfaceColors, T as TextColors, d as accentColors, e as baseColors, f as chartColors, g as colorCSSVariables, h as cssVariableColorTokens, p as primaryColors, s as secondaryColors, i as semanticColors, j as surfaceColors, t as tailwindThemeColors, k as textColors } from '../colors-BrFmCQv-.js';
-export { A as ALERT_TOKENS, l as AlertVariant, cG as AlignOffsetToken, bo as Animation, cH as AnimationPresetToken, cI as AspectRatioToken, B as BUTTON_TOKENS, bR as BorderRadius, m as ButtonFontSize, n as ButtonHeight, o as ButtonPaddingHorizontal, p as ButtonPaddingVertical, q as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, cm as CanonicalFontSize, cn as CanonicalFontWeight, co as CanonicalLetterSpacing, cp as CanonicalLineHeight, cq as CanonicalTextColor, r as CardPadding, s as CardRadius, t as CardShadow, u as CardSize, v as CardSpacingVertical, w as CheckboxSize, x as CheckboxState, y as CheckboxVariant, cJ as ColorToken, bX as ColoredShadow, bS as ComponentRadius, c9 as ComponentSpacing, cK as ContainerMaxWidthToken, cL as ContainerPaddingToken, ca as ContainerSpacing, D as DATA_TOKENS, b as DOMAIN_TOKENS, c as DROPDOWN_TOKENS, z as DataListLabelWidth, E as DataListRowPadding, cM as DelayToken, F as DomainCardBadge, G as DomainCardImage, H as DomainCardLayout, J as DomainCardMetadata, K as DomainCardMotion, L as DomainCardPriceCapacity, Q as DomainCardSkeleton, U as DomainCardSkeletonContentWidth, V as DomainCardSurface, W as DropdownItemSize, X as DropdownMenuSize, Y as DropdownTriggerSize, Z as DropdownVariant, bp as Duration, bq as Easing, bY as ElevationShadow, _ as EmptyStateIconSize, cN as FlexBasisToken, bZ as FocusRing, cr as FontFamily, cs as FontSize, ct as FontWeight, b_ as GlowEffect, cb as GridSpacing, I as ICON_TOKENS, d as INPUT_TOKENS, $ as IconColor, a0 as IconSize, a1 as IconStroke, a2 as InputFontSize, a3 as InputHeight, a4 as InputPaddingHorizontal, a5 as InputPaddingVertical, a6 as InputRadius, a7 as InputSize, br as Keyframe, cO as LayoutSpaceToken, cu as LetterSpacing, cv as LineHeight, M as MENU_TOKENS, e as MOTION_TOKENS, a8 as MenuContentMinWidth, a9 as MenuContentPadding, aa as MenuContentRadius, ab as MenuContentShadow, ac as MenuIndicatorOffset, ad as MenuIndicatorSize, ae as MenuItemGap, af as MenuItemHeight, ag as MenuItemPadding, ah as MenuItemRadius, ai as MenuLabelPadding, aj as MenuSeparatorMargin, cP as ModalFooterAlignToken, cQ as ModalHeightToken, cR as ModalSizeToken, cS as ModalWidthToken, ak as MotionAnimation, al as MotionDuration, cT as MotionDurationToken, am as MotionEasing, cU as MotionEasingToken, cV as MotionToken, an as MotionTransition, ao as MotionTransitionPreset, cW as MotionTransitionToken, bD as MotionV2CombinedType, bE as MotionV2Duration, bF as MotionV2Easing, bG as MotionV2SlideDirection, bH as MotionV2Transition, N as NAVIGATION_TOKENS, f as NOTIFICATION_TOKENS, ap as NavigationItemPadding, aq as NavigationListGap, ar as NavigationRadius, as as NavigationShadow, at as NavigationSize, au as NavigationState, av as NotificationPanelWidth, aw as NotificationVariant, O as OVERLAY_TOKENS, ax as OverlayBackdropVariant, ay as OverlayModalSize, P as POPOVER_TOKENS, az as PopoverArrowOffset, aA as PopoverArrowSize, aB as PopoverContentPadding, aC as PopoverContentRadius, aD as PopoverContentShadow, aE as PopoverContentWidth, R as RADIO_TOKENS, aF as RadioSize, aG as RadioState, aH as RadioVariant, cX as RadiusToken, cY as ResponsiveAlignOffset, cZ as ResponsiveAnimationPreset, c_ as ResponsiveAspectRatio, c$ as ResponsiveColor, d0 as ResponsiveContainerMaxWidth, d1 as ResponsiveContainerPadding, d2 as ResponsiveDelay, d3 as ResponsiveFlexBasis, d4 as ResponsiveModalHeight, d5 as ResponsiveModalSize, d6 as ResponsiveModalWidth, d7 as ResponsiveMotion, d8 as ResponsiveRadius, d9 as ResponsiveSelectSize, da as ResponsiveSelectWidth, db as ResponsiveShadow, dc as ResponsiveSideOffset, dd as ResponsiveSpace, de as ResponsiveSurface, df as ResponsiveTextLineHeight, dg as ResponsiveTextSize, dh as ResponsiveTextWeight, S as SECTION_TOKENS, g as SELECT_TOKENS, h as SURFACE_TOKENS, i as SWITCH_TOKENS, aI as SectionGap, aJ as SectionPadding, cc as SectionSpacing, aK as SelectContentPadding, aL as SelectContentRadius, aM as SelectItemFontSize, aN as SelectItemPaddingHorizontal, aO as SelectItemPaddingVertical, aP as SelectItemRadius, aQ as SelectLabelFontSize, aR as SelectLabelPaddingHorizontal, aS as SelectLabelPaddingVertical, aT as SelectSeparatorMarginHorizontal, aU as SelectSeparatorMarginVertical, di as SelectSizeToken, dj as SelectStateToken, aV as SelectTriggerFontSize, aW as SelectTriggerHeight, aX as SelectTriggerPaddingHorizontal, aY as SelectTriggerPaddingVertical, aZ as SelectTriggerRadius, dk as SelectVariantToken, dl as SelectWidthToken, cd as SemanticSpacing, dm as ShadowToken, dn as SideOffsetToken, a_ as SkeletonAnimation, a$ as SkeletonBackground, b0 as SkeletonVariant, dp as SpaceToken, ce as Spacing, dq as SpacingToken, bs as Spring, cf as StackSpacing, b1 as SurfacePadding, b2 as SurfaceRadius, b3 as SurfaceShadow, dr as SurfaceToken, b4 as SurfaceVariant, b5 as SwitchSize, b6 as SwitchState, b7 as SwitchVariant, T as TEXT_TOKENS, j as TOAST_TOKENS, k as TOOLTIP_TOKENS, b8 as TableCellPadding, b9 as TableGap, ba as TableHeaderPadding, bb as TableRowHeight, bc as TableShadow, bd as TextFontSize, be as TextFontWeight, bf as TextLetterSpacing, ds as TextLetterSpacingToken, bg as TextLineHeight, dt as TextLineHeightToken, du as TextSizeToken, cw as TextStyle, dv as TextWeightToken, bh as ToastVariant, bi as TooltipContentRadius, bj as TooltipContentShadow, bt as Transition, cl as UI_COLORS, b$ as accentColoredShadows, bk as allCSSVariables, bl as allCSSVariablesCSS, bu as animations, bT as borderRadius, bU as componentRadius, c0 as componentShadowMapping, bv as durations, bw as easings, c1 as elevationShadows, c2 as focusRings, cx as fontFamily, cy as fontSize, cz as fontSizeWithMd, cA as fontWeight, bm as generateCSSVariablesCSS, c3 as glowEffects, bx as keyframes, cg as layoutSpacing, cB as letterSpacing, cC as lineHeight, by as motionCSSVariables, bI as motionV2CSSVariables, bJ as motionV2Combined, bK as motionV2Durations, bL as motionV2Easings, bM as motionV2Fade, bN as motionV2Scale, bO as motionV2Slide, bP as motionV2TailwindConfig, bQ as motionV2Transitions, c4 as primaryColoredShadows, bV as radiusCSSVariables, bz as reducedMotion, ch as semanticSpacing, c5 as shadowBase, c6 as shadowCSSVariables, c7 as shadowOpacity, ci as spacing, cj as spacingCSSVariables, bA as springs, bB as tailwindMotionConfig, bW as tailwindRadiusConfig, c8 as tailwindShadowConfig, ck as tailwindSpacingConfig, cD as tailwindTypographyConfig, cE as textStyles, bn as tokenSystemSummary, bC as transitions, cF as typographyCSSVariables } from '../index-DPWxsWs3.js';
+export { A as ALERT_TOKENS, j as AlertVariant, cr as AlignOffsetToken, b9 as Animation, cs as AnimationPresetToken, ct as AspectRatioToken, B as BUTTON_TOKENS, bC as BorderRadius, k as ButtonFontSize, l as ButtonHeight, m as ButtonPaddingHorizontal, n as ButtonPaddingVertical, o as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, c7 as CanonicalFontSize, c8 as CanonicalFontWeight, c9 as CanonicalLetterSpacing, ca as CanonicalLineHeight, cb as CanonicalTextColor, p as CardPadding, q as CardRadius, r as CardShadow, s as CardSize, t as CardSpacingVertical, u as CheckboxSize, v as CheckboxState, w as CheckboxVariant, cu as ColorToken, bI as ColoredShadow, bD as ComponentRadius, bW as ComponentSpacing, cv as ContainerMaxWidthToken, cw as ContainerPaddingToken, bX as ContainerSpacing, D as DATA_TOKENS, x as DataListLabelWidth, y as DataListRowPadding, cx as DelayToken, ba as Duration, bb as Easing, bJ as ElevationShadow, E as EmptyStateIconSize, cy as FlexBasisToken, bK as FocusRing, cc as FontFamily, cd as FontSize, ce as FontWeight, bL as GlowEffect, bY as GridSpacing, I as ICON_TOKENS, b as INPUT_TOKENS, z as IconColor, F as IconSize, G as IconStroke, H as InputFontSize, J as InputHeight, K as InputPaddingHorizontal, L as InputPaddingVertical, Q as InputRadius, U as InputSize, bc as Keyframe, cz as LayoutSpaceToken, cf as LetterSpacing, cg as LineHeight, M as MENU_TOKENS, c as MOTION_TOKENS, V as MenuContentMinWidth, W as MenuContentPadding, X as MenuContentRadius, Y as MenuContentShadow, Z as MenuIndicatorOffset, _ as MenuIndicatorSize, $ as MenuItemGap, a0 as MenuItemHeight, a1 as MenuItemPadding, a2 as MenuItemRadius, a3 as MenuLabelPadding, a4 as MenuSeparatorMargin, cA as ModalFooterAlignToken, cB as ModalHeightToken, cC as ModalSizeToken, cD as ModalWidthToken, a5 as MotionAnimation, a6 as MotionDuration, cE as MotionDurationToken, a7 as MotionEasing, cF as MotionEasingToken, cG as MotionToken, a8 as MotionTransition, a9 as MotionTransitionPreset, cH as MotionTransitionToken, bo as MotionV2CombinedType, bp as MotionV2Duration, bq as MotionV2Easing, br as MotionV2SlideDirection, bs as MotionV2Transition, N as NAVIGATION_TOKENS, d as NOTIFICATION_TOKENS, aa as NavigationItemPadding, ab as NavigationListGap, ac as NavigationRadius, ad as NavigationShadow, ae as NavigationSize, af as NavigationState, ag as NotificationPanelWidth, ah as NotificationVariant, O as OVERLAY_TOKENS, ai as OverlayBackdropVariant, aj as OverlayModalSize, P as POPOVER_TOKENS, ak as PopoverArrowOffset, al as PopoverArrowSize, am as PopoverContentPadding, an as PopoverContentRadius, ao as PopoverContentShadow, ap as PopoverContentWidth, R as RADIO_TOKENS, aq as RadioSize, ar as RadioState, as as RadioVariant, cI as RadiusToken, cJ as ResponsiveAlignOffset, cK as ResponsiveAnimationPreset, cL as ResponsiveAspectRatio, cM as ResponsiveColor, cN as ResponsiveContainerMaxWidth, cO as ResponsiveContainerPadding, cP as ResponsiveDelay, cQ as ResponsiveFlexBasis, cR as ResponsiveModalHeight, cS as ResponsiveModalSize, cT as ResponsiveModalWidth, cU as ResponsiveMotion, cV as ResponsiveRadius, cW as ResponsiveSelectSize, cX as ResponsiveSelectWidth, cY as ResponsiveShadow, cZ as ResponsiveSideOffset, c_ as ResponsiveSpace, c$ as ResponsiveSurface, d0 as ResponsiveTextLineHeight, d1 as ResponsiveTextSize, d2 as ResponsiveTextWeight, S as SECTION_TOKENS, e as SELECT_TOKENS, f as SURFACE_TOKENS, g as SWITCH_TOKENS, at as SectionGap, au as SectionPadding, bZ as SectionSpacing, av as SelectContentPadding, aw as SelectContentRadius, ax as SelectItemFontSize, ay as SelectItemPaddingHorizontal, az as SelectItemPaddingVertical, aA as SelectItemRadius, aB as SelectLabelFontSize, aC as SelectLabelPaddingHorizontal, aD as SelectLabelPaddingVertical, aE as SelectSeparatorMarginHorizontal, aF as SelectSeparatorMarginVertical, d3 as SelectSizeToken, d4 as SelectStateToken, aG as SelectTriggerFontSize, aH as SelectTriggerHeight, aI as SelectTriggerPaddingHorizontal, aJ as SelectTriggerPaddingVertical, aK as SelectTriggerRadius, d5 as SelectVariantToken, d6 as SelectWidthToken, b_ as SemanticSpacing, d7 as ShadowToken, d8 as SideOffsetToken, aL as SkeletonAnimation, aM as SkeletonBackground, aN as SkeletonVariant, d9 as SpaceToken, b$ as Spacing, da as SpacingToken, bd as Spring, c0 as StackSpacing, aO as SurfacePadding, aP as SurfaceRadius, aQ as SurfaceShadow, db as SurfaceToken, aR as SurfaceVariant, aS as SwitchSize, aT as SwitchState, aU as SwitchVariant, T as TEXT_TOKENS, h as TOAST_TOKENS, i as TOOLTIP_TOKENS, aV as TableCellPadding, aW as TableGap, aX as TableHeaderPadding, aY as TableRowHeight, aZ as TableShadow, a_ as TextFontSize, a$ as TextFontWeight, b0 as TextLetterSpacing, dc as TextLetterSpacingToken, b1 as TextLineHeight, dd as TextLineHeightToken, de as TextSizeToken, ch as TextStyle, df as TextWeightToken, b2 as ToastVariant, b3 as TooltipContentRadius, b4 as TooltipContentShadow, be as Transition, c6 as UI_COLORS, bM as accentColoredShadows, b5 as allCSSVariables, b6 as allCSSVariablesCSS, bf as animations, bE as borderRadius, bF as componentRadius, bN as componentShadowMapping, bg as durations, bh as easings, bO as elevationShadows, bP as focusRings, ci as fontFamily, cj as fontSize, ck as fontSizeWithMd, cl as fontWeight, b7 as generateCSSVariablesCSS, bQ as glowEffects, bi as keyframes, c1 as layoutSpacing, cm as letterSpacing, cn as lineHeight, bj as motionCSSVariables, bt as motionV2CSSVariables, bu as motionV2Combined, bv as motionV2Durations, bw as motionV2Easings, bx as motionV2Fade, by as motionV2Scale, bz as motionV2Slide, bA as motionV2TailwindConfig, bB as motionV2Transitions, bR as primaryColoredShadows, bG as radiusCSSVariables, bk as reducedMotion, c2 as semanticSpacing, bS as shadowBase, bT as shadowCSSVariables, bU as shadowOpacity, c3 as spacing, c4 as spacingCSSVariables, bl as springs, bm as tailwindMotionConfig, bH as tailwindRadiusConfig, bV as tailwindShadowConfig, c5 as tailwindSpacingConfig, co as tailwindTypographyConfig, cp as textStyles, b8 as tokenSystemSummary, bn as transitions, cq as typographyCSSVariables } from '../index-DInIMlaR.js';
 
 /**
  * Artist Card Component Tokens
@@ -86,4 +86,488 @@ type ArtistCardImageSizing = typeof ARTIST_TOKENS.image.sizing;
 type ArtistCardImagePlaceholder = typeof ARTIST_TOKENS.image.placeholder;
 type ArtistCardFooterBorder = typeof ARTIST_TOKENS.footer.border;
 
-export { ARTIST_TOKENS, type ArtistCardFooterBorder, type ArtistCardImageContainer, type ArtistCardImagePlaceholder, type ArtistCardImageSizing };
+/**
+ * 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
+         */
+        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
+         */
+        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-muted-foreground";
+        };
+        /**
+         * Icon tokens
+         * Maps to ICON_TOKENS for sizes and colors
+         */
+        readonly icon: {
+            readonly default: "text-muted-foreground";
+            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
+         */
+        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-muted-foreground";
+        };
+        /**
+         * 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;
+
+export { ARTIST_TOKENS, type ArtistCardFooterBorder, type ArtistCardImageContainer, type ArtistCardImagePlaceholder, type ArtistCardImageSizing, DOMAIN_TOKENS, type DomainCardBadge, type DomainCardImage, type DomainCardLayout, type DomainCardMetadata, type DomainCardMotion, type DomainCardPriceCapacity, type DomainCardSkeleton, type DomainCardSkeletonContentWidth, type DomainCardSurface };