feat(design): adopt CIBG component patterns (header, forms, wizards, dashboard)

Re-skins the app's layout on top of the CIBG Huisstijl theme (previous commit) so it
matches designsystem.cibg.nl, not just its colour tokens — magenta ("robijn") header,
horizontal nav, and the CIBG component markup for forms/wizards/dashboard.

- Header: logo block + robijn titlebar (breadcrumb + user menu) + grey horizontal nav
  (4 links) replacing the dashboard side-nav; breadcrumb restyled for the titlebar
  (no background of its own — CIBG's global `header nav` rule otherwise bleeds a grey
  fill into it, fixed by scoping an override inside BreadcrumbComponent).
- Forms: form-field/radio-group/checkbox rebuilt on CIBG's horizontal `form-group row`
  / `form-check.styled` markup (label col-md-4, control col-md-8); same input() APIs.
- Wizards: stepper rebuilt as the CIBG "stappenindicator" (numbered circles, visited
  steps clickable for back-nav, title merged in); wizard-shell adopts the CIBG
  procesnavigatie button row. Back-navigation wired into all three wizard machines
  (registratie-wizard already had it; added `GaNaarStap` to intake/herregistratie
  machines, pure + spec'd).
- New shared/ui molecules: confirmation (animated bevestiging checkmark, replaces
  plain alerts on submit), review-section (controlestap sections with "Wijzigen"),
  application-list/application-link (CIBG "aanvragen" rows, replace the dashboard's
  card grid and aanvraag-block).
- Cleanup: delete side-nav and now-unused styles.scss utilities (.app-overview,
  .app-form-panel, .app-card-grid); correct design-tokens.mdx (it referenced tokens
  that no longer exist) and document the CIBG-value token bridge.

Verified: build/lint/check:tokens green, 178 tests pass (4 new GaNaarStap cases), and
manually driven end-to-end (dashboard, a full herregistratie submission through to the
confirmation screen, mobile width, keyboard focus).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/styles.scss

@@ -8,11 +8,14 @@
    The names are now an internal alias set; the VALUES are CIBG. (styles.scss is exempt
    from check:tokens, so palette hex is allowed in this one file.) */
 :root {
+  /* — CIBG layout chrome colour (robijn under body.brand--cibg; blue fallback otherwise) — */
+  --rhc-color-layout: var(--ro-layout);
+
   /* — semantic foreground/background/border — */
   --rhc-color-foreground-default: var(--bs-body-color);
-  --rhc-color-foreground-subtle: #617286;               /* CIBG meta grey */
-  --rhc-color-foreground-link: var(--bs-link-color);    /* #01689b */
-  --rhc-color-foreground-link-hover: #154273;           /* CIBG active/hover */
+  --rhc-color-foreground-subtle: #64748b;               /* CIBG grey-3 */
+  --rhc-color-foreground-link: var(--ro-link-color);           /* brand--cibg → hemelblauw-fixed */
+  --rhc-color-foreground-link-hover: var(--ro-link-active-color);
   --rhc-color-foreground-on-primary: #fff;
   --rhc-color-border-default: var(--bs-border-color);
   --rhc-color-border-subtle: #e2e8f0;
@@ -31,24 +34,23 @@
 
   /* — blues (CIBG primary family) — */
   --rhc-color-lintblauw-100: #e6eef3;
-  --rhc-color-lintblauw-500: #01689b;
-  --rhc-color-lintblauw-600: #015a87;
-  --rhc-color-lintblauw-700: #154273;
-  --rhc-color-hemelblauw-100: #e6f0f5;
-  --rhc-color-hemelblauw-500: #01689b;
-  --rhc-color-hemelblauw-700: #154273;
-  --rhc-color-donkerblauw-700: #154273;
+  --rhc-color-lintblauw-500: var(--ro-brand-primary);   /* #01689b */
+  --rhc-color-lintblauw-600: var(--ro-brand-primary-focus); /* #015782 */
+  --rhc-color-lintblauw-700: var(--ro-lintblauw);       /* #154273 */
+  --rhc-color-hemelblauw-100: #d9ebf7;             /* CIBG light-blue (info bg) */
+  --rhc-color-hemelblauw-500: var(--ro-hemelblauw); /* #007bc7 CIBG info blue */
+  --rhc-color-hemelblauw-700: #005a94;
 
-  /* — status colors (CIBG semantic) — */
-  --rhc-color-groen-300: #e3f0d8;
-  --rhc-color-groen-500: #39870c;
-  --rhc-color-groen-700: #2a6609;
-  --rhc-color-rood-100: #fbe4e2;
-  --rhc-color-rood-300: #f0a9a3;
-  --rhc-color-rood-500: #d52b1e;
-  --rhc-color-rood-600: #b81f14;
-  --rhc-color-geel-100: #fff4d6;
-  --rhc-color-geel-600: #ffb612;
+  /* — status colors (CIBG semantic, kleuren page) — */
+  --rhc-color-groen-300: #e1eddb;                  /* light-green */
+  --rhc-color-groen-500: #39870c;                  /* green */
+  --rhc-color-groen-700: #176e1b;
+  --rhc-color-rood-100: #f7d2dd;                   /* light-red */
+  --rhc-color-rood-300: #eda3b6;
+  --rhc-color-rood-500: var(--ro-brand-danger);    /* #cc003d CIBG red */
+  --rhc-color-rood-600: #b30035;
+  --rhc-color-geel-100: #fff4dc;                   /* light-yellow */
+  --rhc-color-geel-600: #ffb612;                   /* yellow */
   --rhc-color-oranje-500: #e17000;
 
   /* — spacing scale (rem, Bootstrap-aligned) — */
@@ -90,58 +92,16 @@ body { background: var(--rhc-color-wit); color: var(--rhc-color-foreground-defau
    these tokens instead of raw values. */
 :root {
   --app-content-max: 67rem;                              /* readable page column */
-  --app-form-max: 32rem;                                 /* default wizard form width */
   --app-form-narrow: 32rem;                              /* page-shell narrow variant */
   --app-skip-link-offset: -999px;                        /* off-screen skip link */
-  --app-sidebar-width: 15rem;                            /* overview side navigation */
 }
 
 /* App utility classes: centralise the repeated inline layout idioms so components stay
    token-based and free of raw values. */
-.app-form { max-inline-size: var(--app-form-max); }
-.app-button-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--rhc-space-max-md);
-  align-items: center;
-}
-.app-button-row--spaced { margin-block-start: var(--rhc-space-max-xl); }
 /* vertical rhythm between stacked blocks */
 .app-stack > * + * { margin-block-start: var(--rhc-space-max-xl); }
 .app-section { margin-block-start: var(--rhc-space-max-2xl); }
 .app-text-subtle { color: var(--rhc-color-foreground-subtle); }
-/* responsive card grid: cards wrap and stretch, gap from the spacing scale */
-.app-card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-  gap: var(--rhc-space-max-xl);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* Overview ("Mijn omgeving") layout: side navigation + main column. Collapses to
-   a single column on narrow viewports (nav stacks above the content). */
-.app-overview {
-  display: grid;
-  grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);
-  gap: var(--rhc-space-max-3xl);
-  align-items: start;
-}
-@media (max-width: 48rem) {
-  .app-overview { grid-template-columns: 1fr; }
-}
-
-/* Rijkshuisstijl form panel: the subtle-grey block a form sits in (see the
-   rijksoverheid.nl contact-form reference). */
-.app-form-panel {
-  background: var(--rhc-color-cool-grey-100);
-  border-radius: var(--rhc-border-radius-md);
-  padding: var(--rhc-space-max-2xl);
-}
-/* Vertical rhythm between fields projected into a form panel. Global (not
-   component-scoped) so it reaches projected content past view encapsulation. */
-.app-form-panel > * + * { margin-block-start: var(--rhc-space-max-xl); }
 
 /* Bordered info box (outline, no fill) — e.g. a "Vragen?" contact block. */
 .app-info-box {