docs(12-01): complete dark mode visibility fixes plan

- SUMMARY.md: dark mode h2 and form control semantic token fixes
- STATE.md: position updated, decisions recorded
- ROADMAP.md: phase 12 marked complete
- REQUIREMENTS.md: DARK-01, DARK-02 marked complete

.planning/REQUIREMENTS.md

@@ -37,8 +37,8 @@
 
 ### Dark Mode Visibility
 
-- [ ] **DARK-01**: All wizard step h2 headings are visible (readable text with proper contrast) in dark mode
+- [x] **DARK-01**: All wizard step h2 headings are visible (readable text with proper contrast) in dark mode
-- [ ] **DARK-02**: DeploymentStep native form controls (labels, legends, checkboxes, radios) are visible and styled with semantic tokens in dark mode
+- [x] **DARK-02**: DeploymentStep native form controls (labels, legends, checkboxes, radios) are visible and styled with semantic tokens in dark mode
 - [x] **DARK-03**: FieldRenderer select element has proper background and text color in dark mode
 
 ## Future Requirements

.planning/ROADMAP.md

@@ -128,7 +128,7 @@ Plans:
   1. All wizard step h2 headings are readable in dark mode with proper contrast
   2. DeploymentStep labels, legends, checkboxes, and radios are visible and styled in dark mode
   3. FieldRenderer select element has proper background and text color in dark mode
-**Plans:** 1/2 plans executed
+**Plans:** 2/2 plans complete
 
 Plans:
 - [ ] 12-01-PLAN.md — Fix step headings, DeploymentStep form controls, ReviewStep checkbox

.planning/STATE.md

@@ -3,14 +3,14 @@ gsd_state_version: 1.0
 milestone: v1.2
 milestone_name: UI Polish & Clarity
 status: completed
-stopped_at: Completed 12-02-PLAN.md
+stopped_at: Completed 12-01-PLAN.md
-last_updated: "2026-04-01T12:05:08.887Z"
+last_updated: "2026-04-01T12:06:12.248Z"
 last_activity: 2026-04-01 — Phase 11 plan 02 complete (POLISH-03, POLISH-04 satisfied)
 progress:
   total_phases: 6
-  completed_phases: 4
+  completed_phases: 5
   total_plans: 14
-  completed_plans: 13
+  completed_plans: 14
   percent: 100
 ---
 
@@ -70,6 +70,8 @@ Recent decisions affecting current work:
 - [Phase 11-polish-responsiveness]: CSS-only reduced-motion guard via @media (prefers-reduced-motion: reduce) — no JS listener needed
 - [Phase 11-polish-responsiveness]: key={state.currentStep} on step wrapper forces React remount triggering CSS animation from initial state
 - [Phase 12-dark-mode-visibility-fixes]: bg-surface-container text-on-surface added to FieldRenderer select className — semantic tokens ensure correct rendering in both light and dark themes without dark: prefix
+- [Phase 12-dark-mode-visibility-fixes]: accent-[var(--r2b-warning)] arbitrary value used for ReviewStep security checkbox — accent-warning class not confirmed generated by Tailwind v4
+- [Phase 12-dark-mode-visibility-fixes]: Removed {' '} space-before-text pattern in DeploymentStep labels — replaced with flex gap-2 layout for consistent spacing
 
 ### Roadmap Evolution
 
@@ -86,6 +88,6 @@ None yet.
 
 ## Session Continuity
 
-Last session: 2026-04-01T12:05:08.885Z
+Last session: 2026-04-01T12:06:08.013Z
-Stopped at: Completed 12-02-PLAN.md
+Stopped at: Completed 12-01-PLAN.md
 Resume file: None

.planning/phases/12-dark-mode-visibility-fixes/12-01-SUMMARY.md

@@ -0,0 +1,105 @@
+---
+phase: 12-dark-mode-visibility-fixes
+plan: 01
+subsystem: ui
+tags: [react, tailwind, dark-mode, wizard, accessibility]
+
+# Dependency graph
+requires:
+  - phase: 08-theming
+    provides: semantic token CSS classes (text-on-surface, text-on-surface-container, accent-primary) via Tailwind v4 @theme
+  - phase: 11-polish-responsiveness
+    provides: wizard step components with completed structural layout
+provides:
+  - All 4 wizard step h2 headings styled with text-on-surface (visible in dark mode)
+  - DeploymentStep native form controls (labels, legends, checkboxes, radios) fully styled with semantic tokens
+  - ReviewStep security checkbox accent color matching warning theme
+affects: [dark-mode, wizard-steps, deployment-step, review-step]
+
+# Tech tracking
+tech-stack:
+  added: []
+  patterns:
+    - "accent-[var(--r2b-warning)] arbitrary value for warning-colored native checkbox (accent-warning not generated)"
+    - "flex items-center gap-2 pattern for native checkbox/radio labels (replaces {' '} space hack)"
+    - "fieldset + legend with text-on-surface-container font-medium for form group headings"
+
+key-files:
+  created: []
+  modified:
+    - src/components/wizard/BackendSelectionStep.tsx
+    - src/components/wizard/RemoteConfigStep.tsx
+    - src/components/wizard/DeploymentStep.tsx
+    - src/components/wizard/ReviewStep.tsx
+
+key-decisions:
+  - "accent-[var(--r2b-warning)] arbitrary value used for ReviewStep security checkbox — accent-warning class not confirmed generated by Tailwind v4 from --color-warning"
+  - "Removed {' '} space-before-text pattern in DeploymentStep labels — replaced with flex gap-2 layout for consistent spacing"
+
+patterns-established:
+  - "h2 headings: text-2xl font-bold text-on-surface mb-2 (mb-2 when p description follows immediately)"
+  - "Native control labels: flex items-center gap-2 text-sm text-on-surface cursor-pointer"
+  - "Fieldset legends: text-sm font-medium text-on-surface-container mb-2"
+  - "Native checkboxes/radios: accent-primary (or accent-[var(--r2b-warning)] for warning context)"
+
+requirements-completed: [DARK-01, DARK-02]
+
+# Metrics
+duration: 8min
+completed: 2026-04-01
+---
+
+# Phase 12 Plan 01: Dark Mode Visibility Fixes Summary
+
+**Semantic token classes applied to all 4 wizard step h2 headings and DeploymentStep native form controls, fixing invisible text regression from v1.2 UI overhaul**
+
+## Performance
+
+- **Duration:** 8 min
+- **Started:** 2026-04-01T14:03:00Z
+- **Completed:** 2026-04-01T14:11:00Z
+- **Tasks:** 2
+- **Files modified:** 4
+
+## Accomplishments
+- All 4 wizard step h2 elements now carry `text-2xl font-bold text-on-surface mb-2` — headings are readable in both light and dark mode
+- DeploymentStep: include-install checkbox, config-path radio group, and script-targets checkbox group all styled with semantic tokens (text-on-surface labels, text-on-surface-container legends, accent-primary controls)
+- ReviewStep: security acknowledgement checkbox uses `accent-[var(--r2b-warning)]` for consistent warning-themed accent color
+- Full test suite (204 tests, 16 files) passes with zero regressions after both tasks
+
+## Task Commits
+
+Each task was committed atomically:
+
+1. **Task 1: Add semantic token classes to all step h2 headings** - `f6b4070` (feat)
+2. **Task 2: Style DeploymentStep form controls and ReviewStep checkbox** - `945f90d` (feat)
+
+**Plan metadata:** _(docs commit follows)_
+
+## Files Created/Modified
+- `src/components/wizard/BackendSelectionStep.tsx` - h2 styled with text-on-surface
+- `src/components/wizard/RemoteConfigStep.tsx` - h2 styled with text-on-surface
+- `src/components/wizard/DeploymentStep.tsx` - h2 + all native form controls styled with semantic tokens
+- `src/components/wizard/ReviewStep.tsx` - h2 styled with text-on-surface, security checkbox accent-[var(--r2b-warning)]
+
+## Decisions Made
+- Used `accent-[var(--r2b-warning)]` arbitrary value syntax for ReviewStep security checkbox instead of `accent-warning` — the `accent-warning` utility class is not confirmed to generate from the `--color-warning` Tailwind v4 theme token, so the arbitrary value form is the safe choice.
+- Removed the `{' '}` before-label-text pattern throughout DeploymentStep; replaced with `flex gap-2` layout on the label wrapper. This is cleaner and aligns with the rest of the codebase's flexbox label patterns.
+
+## Deviations from Plan
+
+None - plan executed exactly as written.
+
+## Issues Encountered
+None
+
+## User Setup Required
+None - no external service configuration required.
+
+## Next Phase Readiness
+- Phase 12 plan 01 complete — all dark mode visibility fixes for step headings and form controls are done (DARK-01, DARK-02 satisfied)
+- Visual browser verification recommended: toggle dark mode and confirm all 4 step headings are readable white text, DeploymentStep controls are visible, and ReviewStep security checkbox accent matches warning amber color
+
+---
+*Phase: 12-dark-mode-visibility-fixes*
+*Completed: 2026-04-01*