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/components/atoms/Card/Card.tsx

@@ -9,8 +9,10 @@ import CardContent from '@mui/material/CardContent';
 export interface CardProps extends Omit<MuiCardProps, 'raised' | 'variant'> {
   /** Visual style: "elevated" uses shadow, "outlined" uses border */
   variant?: 'elevated' | 'outlined';
-  /** Adds hover shadow lift and pointer cursor for clickable cards */
+  /** Adds hover background fill, shadow lift, and pointer cursor for clickable cards */
   interactive?: boolean;
+  /** Highlights the card as selected — brand border + warm background tint */
+  selected?: boolean;
   /** Padding preset: "default" (24px), "compact" (16px), "none" (no wrapper) */
   padding?: 'default' | 'compact' | 'none';
   /** Content to render inside the card */
@@ -23,14 +25,17 @@ export interface CardProps extends Omit<MuiCardProps, 'raised' | 'variant'> {
  * Content container for the FA design system.
  *
  * Wraps MUI Card with FA brand tokens, two visual variants (elevated/outlined),
- * optional hover interactivity, and padding presets.
+ * optional hover interactivity, selected state, and padding presets.
  *
  * Variant mapping from design:
  * - `elevated` (default) — shadow.md resting, white background
  * - `outlined` — neutral border, no shadow, white background
  *
  * Use `interactive` for clickable cards (PriceCard, ServiceOption) —
- * adds shadow.lg hover lift and cursor pointer.
+ * adds background fill on hover, shadow lift, and cursor pointer.
+ *
+ * Use `selected` for option-select patterns — applies brand border
+ * (warm gold) and warm background tint (brand.50).
  *
  * Use `padding="none"` when composing with CardMedia or custom layouts
  * that need full-bleed content.
@@ -40,6 +45,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
     {
       variant = 'elevated',
       interactive = false,
+      selected = false,
       padding = 'default',
       children,
       sx,
@@ -56,11 +62,21 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
         variant={muiVariant}
         elevation={0}
         sx={[
-          // Interactive: hover lift + pointer
+          // Selected state: brand border + warm background
+          selected && {
+            borderColor: 'var(--fa-card-border-selected)',
+            borderWidth: '2px',
+            borderStyle: 'solid',
+            backgroundColor: 'var(--fa-card-background-selected)',
+          },
+          // Interactive: hover fill + shadow lift + pointer
           interactive && {
             cursor: 'pointer',
             '&:hover': {
-              boxShadow: 'var(--fa-card-shadow-hover)',
+              backgroundColor: selected
+                ? 'var(--fa-card-background-selected)'
+                : 'var(--fa-card-background-hover)',
+              boxShadow: variant === 'elevated' ? 'var(--fa-card-shadow-hover)' : undefined,
             },
           },
           // Focus-visible for keyboard accessibility on interactive cards