Add Chip atom component

- Interactive tag for filtering, selection, and dismissible labels
- Wraps MUI Chip with FA tokens: 12 component tokens (height, padding, font, icon sizes)
- Two variants (filled/outlined) × two colours (default/primary) × two sizes (sm/md)
- Custom `selected` prop promotes to brand colour with warm bg (outlined)
- MUI theme overrides: soft tonal fills, branded outlines, hover/focus states
- 10 Storybook stories including interactive filter and removable tag demos
- Preflight passed all 5 checks

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

src/theme/generated/tokens.css

@@ -17,6 +17,12 @@
   --fa-button-icon-size-sm: 16px; /** 16px icons in small buttons */
   --fa-button-icon-size-md: 18px; /** 18px icons in medium buttons */
   --fa-button-icon-size-lg: 20px; /** 20px icons in large buttons */
+  --fa-chip-height-sm: 28px; /** Small — compact inline tags, tight layouts */
+  --fa-chip-height-md: 32px; /** Medium — default interactive chips, filter tags */
+  --fa-chip-icon-size-sm: 16px; /** 16px icons in small chips */
+  --fa-chip-icon-size-md: 18px; /** 18px icons in medium chips */
+  --fa-chip-delete-icon-size-sm: 14px; /** 14px delete icon in small chips */
+  --fa-chip-delete-icon-size-md: 16px; /** 16px delete icon in medium chips */
   --fa-input-height-sm: 40px; /** Small — compact forms, admin layouts, matches Button medium height */
   --fa-input-height-md: 48px; /** Medium (default) — standard forms, matches Button large for alignment */
   --fa-input-icon-size-default: 20px; /** 20px — icon size inside input field, matches Figma trailing icon */
@@ -242,6 +248,12 @@
   --fa-card-padding-compact: var(--fa-spacing-4); /** 16px — compact card padding (mobile, tight layouts) */
   --fa-card-shadow-default: var(--fa-shadow-md); /** Medium shadow — resting elevated card */
   --fa-card-shadow-hover: var(--fa-shadow-lg); /** High shadow — interactive card on hover */
+  --fa-chip-padding-x-sm: var(--fa-spacing-2); /** 8px — compact horizontal padding */
+  --fa-chip-padding-x-md: var(--fa-spacing-3); /** 12px — default horizontal padding */
+  --fa-chip-font-size-sm: var(--fa-font-size-xs); /** 12px — small chip text */
+  --fa-chip-font-size-md: var(--fa-font-size-sm); /** 14px — default chip text */
+  --fa-chip-icon-gap-default: var(--fa-spacing-1); /** 4px icon-text gap */
+  --fa-chip-border-radius-default: var(--fa-border-radius-full); /** Pill shape — fully rounded */
   --fa-input-padding-x-default: var(--fa-spacing-3); /** 12px — inner horizontal padding matching Figma design */
   --fa-input-padding-y-sm: var(--fa-spacing-2); /** 8px — compact vertical padding for small size */
   --fa-input-padding-y-md: var(--fa-spacing-3); /** 12px — standard vertical padding for medium size */

src/theme/generated/tokens.js

@@ -51,6 +51,18 @@ export const CardBorderSelected = "#ba834e"; // Brand border for selected/active
 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 ChipHeightSm = "28px"; // Small — compact inline tags, tight layouts
+export const ChipHeightMd = "32px"; // Medium — default interactive chips, filter tags
+export const ChipPaddingXSm = "8px"; // 8px — compact horizontal padding
+export const ChipPaddingXMd = "12px"; // 12px — default horizontal padding
+export const ChipFontSizeSm = "0.75rem"; // 12px — small chip text
+export const ChipFontSizeMd = "0.875rem"; // 14px — default chip text
+export const ChipIconSizeSm = "16px"; // 16px icons in small chips
+export const ChipIconSizeMd = "18px"; // 18px icons in medium chips
+export const ChipDeleteIconSizeSm = "14px"; // 14px delete icon in small chips
+export const ChipDeleteIconSizeMd = "16px"; // 16px delete icon in medium chips
+export const ChipIconGapDefault = "4px"; // 4px icon-text gap
+export const ChipBorderRadiusDefault = "9999px"; // Pill shape — fully rounded
 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