Restyle on the Carbon Design System

Adopt Carbon at the design-token level (the component libraries ship JS and
target app UIs; this is a static content site):

- IBM Plex Sans/Mono, self-hosted via @fontsource (no external requests)
- Carbon color tokens + layered White / Gray 100 themes
- 8px spacing scale, productive/expressive type, motion tokens, square
  geometry, 2px focus ring
- UI-shell header, tile grid, Carbon tags, geometric severity meter,
  breadcrumb, colophon crediting Carbon
- Charts themed with IBM Plex + Carbon's data-visualization palette
  (validated colorblind-safe/contrast) on a fixed light canvas so the
  build-time SVG stays legible in both themes

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XPEvmMbac2fCvKXpQcovj8

src/charts/dual-axis-fixed.json

@@ -16,7 +16,7 @@
     {
       "width": 360,
       "height": 110,
-      "mark": { "type": "line", "color": "#c0392b", "point": true },
+      "mark": { "type": "line", "color": "#fa4d56", "point": true },
       "encoding": {
         "x": { "field": "month", "type": "ordinal", "sort": null, "axis": { "title": null, "labels": false } },
         "y": { "field": "icecream", "type": "quantitative", "scale": { "zero": true }, "title": "Ice cream" }
@@ -25,7 +25,7 @@
     {
       "width": 360,
       "height": 110,
-      "mark": { "type": "line", "color": "#2980b9", "point": true },
+      "mark": { "type": "line", "color": "#1192e8", "point": true },
       "encoding": {
         "x": { "field": "month", "type": "ordinal", "sort": null, "axis": { "title": null, "labelAngle": 0 } },
         "y": { "field": "sharks", "type": "quantitative", "scale": { "zero": true }, "title": "Shark attacks" }