Add VenueCard molecule — venue listing card for service venue select screen

- 3 component tokens (image.height, content.padding, content.gap)
- Composes Card (interactive) + Typography, consistent with ProviderCard patterns
- Hero image with role="img" aria-label for screen readers
- Meta row: location (pin icon) + capacity with "guests" suffix for clarity
- Price with "From" qualifier for transparency (split typography like ProviderCard)
- 6 Storybook stories: Default, ListLayout, EdgeCases, Responsive, OnDifferentBackgrounds, InteractiveDemo
- Critique score: 33/40 (Good) — P2 fixes applied (capacity label, price context, image a11y)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/theme/generated/tokens.css

@@ -33,6 +33,7 @@
   --fa-switch-track-width: 44px; /** Track width — slightly narrower than Figma 52px for better proportion with 44px touch target */
   --fa-switch-track-height: 24px; /** Track height */
   --fa-switch-thumb-size: 18px; /** Thumb diameter — sits inside the track with 3px inset */
+  --fa-venue-card-image-height: 180px; /** Fixed image height — matches ProviderCard for consistent list layout when both card types appear in search results */
   --fa-color-brand-50: #fef9f5; /** Lightest warm tint — warm section backgrounds */
   --fa-color-brand-100: #f7ecdf; /** Light warm — hover backgrounds, subtle fills */
   --fa-color-brand-200: #ebdac8; /** Warm light — secondary backgrounds, divider tones */
@@ -271,6 +272,8 @@
   --fa-provider-card-content-padding: var(--fa-spacing-3); /** 12px content padding — tight to keep card compact in listing layout */
   --fa-provider-card-content-gap: var(--fa-spacing-1); /** 4px vertical gap between content rows — tight for compact listing cards */
   --fa-switch-track-border-radius: var(--fa-border-radius-full); /** Pill shape */
+  --fa-venue-card-content-padding: var(--fa-spacing-3); /** 12px content padding — matches ProviderCard for visual consistency */
+  --fa-venue-card-content-gap: var(--fa-spacing-1); /** 4px vertical gap between content rows — tight for compact listing cards */
   --fa-color-text-primary: var(--fa-color-neutral-800); /** Primary text — body content, headings. Cool charcoal (#2C2E35) for comfortable extended reading */
   --fa-color-text-secondary: var(--fa-color-neutral-600); /** Secondary text — helper text, descriptions, metadata, less prominent content */
   --fa-color-text-tertiary: var(--fa-color-neutral-500); /** Tertiary text — placeholders, timestamps, attribution, meta information */

src/theme/generated/tokens.js

@@ -83,6 +83,9 @@ export const SwitchTrackWidth = "44px"; // Track width — slightly narrower tha
 export const SwitchTrackHeight = "24px"; // Track height
 export const SwitchTrackBorderRadius = "9999px"; // Pill shape
 export const SwitchThumbSize = "18px"; // Thumb diameter — sits inside the track with 3px inset
+export const VenueCardImageHeight = "180px"; // Fixed image height — matches ProviderCard for consistent list layout when both card types appear in search results
+export const VenueCardContentPadding = "12px"; // 12px content padding — matches ProviderCard for visual consistency
+export const VenueCardContentGap = "4px"; // 4px vertical gap between content rows — tight for compact listing cards
 export const ColorBrand50 = "#fef9f5"; // Lightest warm tint — warm section backgrounds
 export const ColorBrand100 = "#f7ecdf"; // Light warm — hover backgrounds, subtle fills
 export const ColorBrand200 = "#ebdac8"; // Warm light — secondary backgrounds, divider tones