Add Switch and Radio atom components

Switch:
- Wraps MUI Switch with FA brand tokens
- Bordered pill track (Figma Style One), brand.500 fill when active
- 4 component tokens: track width/height/borderRadius, thumb size
- Stories include interactive service add-ons demo

Radio:
- Wraps MUI Radio with FA brand tokens
- Brand.500 fill when selected, neutral.400 unchecked
- 2 component tokens: outer size, dot size
- Stories include card selection and payment method patterns

Also:
- Added ColourToggle and Slider to component registry (deferred)
- Updated token registry and session log

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

src/theme/index.ts

@@ -636,6 +636,75 @@ export const theme = createTheme({
         },
       },
     },
+    MuiSwitch: {
+      styleOverrides: {
+        root: {
+          width: parseInt(t.SwitchTrackWidth, 10) + 12,
+          height: parseInt(t.SwitchTrackHeight, 10) + 12,
+          padding: 6,
+        },
+        switchBase: {
+          padding: 9,
+          '&.Mui-checked': {
+            transform: `translateX(${parseInt(t.SwitchTrackWidth, 10) - parseInt(t.SwitchTrackHeight, 10)}px)`,
+            color: t.ColorWhite,
+            '& + .MuiSwitch-track': {
+              backgroundColor: t.ColorInteractiveDefault,
+              borderColor: t.ColorInteractiveDefault,
+              opacity: 1,
+            },
+            '&:hover + .MuiSwitch-track': {
+              backgroundColor: t.ColorInteractiveHover,
+            },
+          },
+          '&.Mui-disabled + .MuiSwitch-track': {
+            opacity: 0.4,
+          },
+          '&:focus-visible + .MuiSwitch-track': {
+            outline: `2px solid ${t.ColorInteractiveFocus}`,
+            outlineOffset: '2px',
+          },
+        },
+        thumb: {
+          width: parseInt(t.SwitchThumbSize, 10),
+          height: parseInt(t.SwitchThumbSize, 10),
+          boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
+        },
+        track: {
+          borderRadius: parseInt(t.SwitchTrackBorderRadius, 10),
+          backgroundColor: t.ColorWhite,
+          border: `1.5px solid ${t.ColorNeutral400}`,
+          opacity: 1,
+          transition: 'background-color 150ms ease-in-out, border-color 150ms ease-in-out',
+        },
+      },
+    },
+    MuiRadio: {
+      styleOverrides: {
+        root: {
+          color: t.ColorNeutral400,
+          transition: 'color 150ms ease-in-out',
+          '&:hover': {
+            color: t.ColorNeutral600,
+            backgroundColor: 'transparent',
+          },
+          '&.Mui-checked': {
+            color: t.ColorInteractiveDefault,
+            '&:hover': {
+              color: t.ColorInteractiveHover,
+            },
+          },
+          '&:focus-visible': {
+            outline: `2px solid ${t.ColorInteractiveFocus}`,
+            outlineOffset: '2px',
+            borderRadius: '50%',
+          },
+          '&.Mui-disabled': {
+            color: t.ColorNeutral300,
+          },
+        },
+      },
+    },
   },
 });