Migrate from Penpot to Figma and add NSW brand colour palette

Replace self-hosted Penpot MCP references with the official Figma Remote
MCP server (OAuth, HTTP transport). Swap placeholder semantic colours in
tokens.css for the NSW Design System brand palette extracted from Figma
(blues, reds, oranges, greens, greys) and add typography size tokens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ARCHITECTURE.md

@@ -16,8 +16,8 @@ SDC-Frontend is a React component library and design system that will serve as t
 ## 2. Token Pipeline
 
 ```
-Penpot (design tool, self-hosted)
-  ↓  Penpot MCP / manual export
+Figma (design tool)
+  ↓  Figma MCP / get_variable_defs
 src/tokens/tokens.css (@theme block)
   ↓  Tailwind CSS v4 reads @theme
   ↓  Generates utility classes + CSS custom properties
@@ -101,11 +101,11 @@ src/
 
 ## 7. Design Tool Integration
 
-### Penpot (self-hosted at 192.168.50.211:9001)
-- MCP server runs locally via `npx @penpot/mcp@stable` (port 4401)
-- MCP plugin must be installed and active in the Penpot browser session
-- Tools available: `high_level_overview`, `execute_code`, `penpot_api_info`, `export_shape`, `import_image`
-- Design tokens in Penpot use W3C DTCG format — export as JSON, convert to `@theme` values
+### Figma
+- Project file: https://www.figma.com/design/mrabO6AtxN3ektGiTk0I9c/ResearchInsights (file key: `mrabO6AtxN3ektGiTk0I9c`)
+- MCP server: Official Figma Remote MCP at `https://mcp.figma.com/mcp` (HTTP transport, OAuth auth)
+- Key tools: `get_design_context`, `get_variable_defs`, `get_screenshot`, `search_design_system`, `use_figma`
+- Design tokens extracted via `get_variable_defs` → mapped to `@theme` values in `tokens.css`
 
 ### Storybook MCP
 - Available at `localhost:6006/mcp` when Storybook dev server is running