Add Badge atom component

- Create badge component tokens (height, paddingX, fontSize, iconSize,
  iconGap, borderRadius for sm/md sizes) — 10 tokens
- Build Badge component: pill-shaped status indicator label
  - 6 colours: default, brand, success, warning, error, info
  - 2 variants: soft (tonal, default) and filled (solid)
  - 2 sizes: small (22px) and medium (26px)
  - Optional leading icon prop
  - All colours use CSS variables from token system (no hardcoded hex)
- Create 10 Storybook stories: Default, AllColoursSoft, AllColoursFilled,
  WithIcons, WithIconsFilled, Sizes, SmallSizes, InPriceCard,
  ServiceStatus, CompleteMatrix
- Regenerate token pipeline outputs

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

src/theme/generated/tokens.css

@@ -3,6 +3,10 @@
  */
 
 :root {
+  --fa-badge-height-sm: 22px; /** Small — compact inline status indicators */
+  --fa-badge-height-md: 26px; /** Medium — default status badges, card labels */
+  --fa-badge-icon-size-sm: 12px; /** 12px icons in small badges */
+  --fa-badge-icon-size-md: 14px; /** 14px icons in medium badges */
   --fa-button-height-xs: 28px; /** Extra-small — compact text buttons, inline actions */
   --fa-button-height-sm: 32px; /** Small — secondary actions, toolbar buttons */
   --fa-button-height-md: 40px; /** Medium — default size, form submissions */
@@ -206,6 +210,12 @@
   --fa-typography-overline-letter-spacing: 1.5px;
   --fa-typography-overline-sm-line-height: 1.273;
   --fa-typography-overline-sm-letter-spacing: 1.5px;
+  --fa-badge-padding-x-sm: var(--fa-spacing-2); /** 8px — compact horizontal padding */
+  --fa-badge-padding-x-md: var(--fa-spacing-3); /** 12px — default horizontal padding */
+  --fa-badge-font-size-sm: var(--fa-font-size-2xs); /** 11px — small badge text */
+  --fa-badge-font-size-md: var(--fa-font-size-xs); /** 12px — default badge text */
+  --fa-badge-icon-gap-default: var(--fa-spacing-1); /** 4px icon-text gap */
+  --fa-badge-border-radius-default: var(--fa-border-radius-full); /** Pill shape — fully rounded */
   --fa-button-padding-x-xs: var(--fa-spacing-2); /** 8px — compact horizontal padding */
   --fa-button-padding-x-sm: var(--fa-spacing-3); /** 12px — small horizontal padding */
   --fa-button-padding-x-md: var(--fa-spacing-4); /** 16px — default horizontal padding */

src/theme/generated/tokens.js

@@ -2,6 +2,16 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+export const BadgeHeightSm = "22px"; // Small — compact inline status indicators
+export const BadgeHeightMd = "26px"; // Medium — default status badges, card labels
+export const BadgePaddingXSm = "8px"; // 8px — compact horizontal padding
+export const BadgePaddingXMd = "12px"; // 12px — default horizontal padding
+export const BadgeFontSizeSm = "0.6875rem"; // 11px — small badge text
+export const BadgeFontSizeMd = "0.75rem"; // 12px — default badge text
+export const BadgeIconSizeSm = "12px"; // 12px icons in small badges
+export const BadgeIconSizeMd = "14px"; // 14px icons in medium badges
+export const BadgeIconGapDefault = "4px"; // 4px icon-text gap
+export const BadgeBorderRadiusDefault = "9999px"; // Pill shape — fully rounded
 export const ButtonHeightXs = "28px"; // Extra-small — compact text buttons, inline actions
 export const ButtonHeightSm = "32px"; // Small — secondary actions, toolbar buttons
 export const ButtonHeightMd = "40px"; // Medium — default size, form submissions