Update memory files for Card atom

- Component registry: Card → review with full details
- Session log: Add session 2026-03-25f entry
- Token registry: Add card component tokens

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

docs/memory/component-registry.md

@@ -25,7 +25,7 @@ duplicates) and MUST update it after completing one.
 | Avatar | planned | image, initials, icon × small, medium, large | | User/entity representation |
 | Divider | planned | horizontal, vertical | | Visual separator |
 | Chip | planned | filled, outlined × deletable, clickable | | Tags and filters |
-| Card | planned | elevated, outlined | | Content container |
+| Card | review | elevated, outlined × default, compact, none padding × interactive | card.borderRadius/padding/shadow/border/background, color.surface.raised, color.border.default, shadow.md/lg | Content container. Elevated (shadow) or outlined (border). Interactive adds hover lift. Three padding presets. |
 | Link | planned | default, subtle | | Navigation text |
 
 ## Molecules

docs/memory/session-log.md

@@ -285,6 +285,42 @@ Each entry follows this structure:
 - Should we add a character count feature? (Useful for textarea fields like special instructions)
 
 **Next steps:**
-- User to review Input in Storybook
-- Build next atom (Card, Badge, or Chip recommended)
+- ~~User to review Input in Storybook~~ ✓
+- ~~Build next atom (Card, Badge, or Chip recommended)~~ ✓ Card done
 - Consider whether FormField molecule is still needed given Input's built-in label/helperText
+
+### Session 2026-03-25f — Card atom
+
+**Agent(s):** Claude Opus (via conversation)
+
+**Work completed:**
+- Created card component tokens (`tokens/component/card.json`): borderRadius, padding (default 24px / compact 16px), shadow (default md / hover lg), border, background — 7 tokens total
+- Rebuilt token pipeline — 7 new card tokens generated across CSS/JS/JSON outputs
+- Updated MUI theme (`src/theme/index.ts`) with MuiCard overrides:
+  - Root: card token border radius, background, resting shadow (shadow.md), smooth transition
+  - Outlined variant: no shadow, card border colour
+- Created Card component (`src/components/atoms/Card/Card.tsx`):
+  - Two visual variants: elevated (shadow, default) and outlined (border)
+  - `interactive` prop: hover shadow lift (shadow.lg), pointer cursor, focus-visible outline
+  - `padding` prop: "default" (24px), "compact" (16px), "none" (raw children for full-bleed)
+  - Uses CardContent internally for padded variants; raw children when none
+  - Thin wrapper pattern consistent with Button and Typography
+- Created barrel export (`src/components/atoms/Card/index.ts`)
+- Created 8 Storybook stories: Default, Variants, Interactive, PaddingPresets, PriceCardPreview, ServiceOptionPreview, WithImage, RichContent
+- Preflight passed all 5 checks
+- Committed and pushed to Gitea
+
+**Decisions made:**
+- Card uses MUI spacing units (p: 4/6) for padding presets rather than CSS variables — consistent with MUI-first approach
+- Elevation set to 0 on MuiCard; box-shadow applied directly from card tokens for precise control
+- Interactive hover uses CSS variable (`var(--fa-card-shadow-hover)`) for shadow.lg
+- No new design decisions needed — Card follows existing token/design conventions from design-system.md
+
+**Open questions:**
+- Should interactive cards have a subtle border-colour change on hover in addition to shadow lift?
+- Should we add a "selected" state for ServiceOption-style cards (e.g., brand border + brand.50 background)?
+
+**Next steps:**
+- User to review Card in Storybook
+- Build Badge or Chip atom next
+- Begin PriceCard or ServiceOption molecule once Card is approved

docs/memory/token-registry.md

@@ -191,3 +191,17 @@ the correct token for any design property.
 | button.iconSize.xs–lg | 14–20px | Button | Icon dimensions per size |
 | button.iconGap.xs–lg | → spacing.1–2 (4–8px) | Button | Icon-to-text gap per size |
 | button.borderRadius.default | → borderRadius.md (8px) | Button | Button corner radius |
+
+### Card
+
+`tokens/component/card.json`
+
+| Token path | Value / Reference | Used by | Description |
+|-----------|-----------|---------|-------------|
+| card.borderRadius.default | → borderRadius.md (8px) | Card | Card corner radius |
+| card.padding.default | → spacing.6 (24px) | Card | Standard card padding (desktop) |
+| card.padding.compact | → spacing.4 (16px) | Card | Compact card padding (mobile, tight layouts) |
+| card.shadow.default | → shadow.md | Card | Resting elevation — medium shadow |
+| card.shadow.hover | → shadow.lg | Card | Hover elevation — interactive cards |
+| card.border.default | → color.border.default (#E8E8E8) | Card | Outlined card border colour |
+| card.background.default | → color.surface.raised (#FFFFFF) | Card | Card background (raised surface) |