Add selected state and hover background to Card

- Add `selected` prop: brand border (warm gold) + warm background tint (brand.50)
- Add hover background fill (neutral.50) for interactive cards
- Add 3 new card tokens: border.selected, background.hover, background.selected
- Add stories: Selected, OptionSelect (single-select), MultiSelect (toggle),
  OnDifferentBackgrounds (white vs grey surface comparison)
- Informed by FA 1.0 Figma ListItemPurchaseOption pattern (node 2349:39505)

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

src/theme/generated/tokens.js

@@ -33,7 +33,10 @@ export const CardPaddingCompact = "16px"; // 16px — compact card padding (mobi
 export const CardShadowDefault = "0 4px 6px rgba(0,0,0,0.07)"; // Medium shadow — resting elevated card
 export const CardShadowHover = "0 10px 15px rgba(0,0,0,0.1)"; // High shadow — interactive card on hover
 export const CardBorderDefault = "#e8e8e8"; // Neutral border for outlined cards
+export const CardBorderSelected = "#ba834e"; // Brand border for selected/active cards — warm gold accent
 export const CardBackgroundDefault = "#ffffff"; // White — standard card background (raised surface)
+export const CardBackgroundHover = "#fafafa"; // Subtle grey fill on hover — neutral.50 for soft interactive feedback
+export const CardBackgroundSelected = "#fef9f5"; // Warm tint for selected cards — brand.50 reinforces active state
 export const InputHeightSm = "40px"; // Small — compact forms, admin layouts, matches Button medium height
 export const InputHeightMd = "48px"; // Medium (default) — standard forms, matches Button large for alignment
 export const InputPaddingXDefault = "12px"; // 12px — inner horizontal padding matching Figma design