+```
+
+### 4.4 Modals (Radix Dialog)
+
+```tsx
+// Backdrop
+
+
+// Dialog — use surface-card + border-line
+
+ {/* Modal content */}
+
+```
+
+Note: Uses `--color-surface-sunken` for sunken areas (node cards). Cards use `bg-surface-card`.
+
+**Important:** Use `@radix-ui/react-dialog` — it provides WCAG 2.1 compliance automatically (focus trap, Escape key, aria-modal, aria-labelledby).
+
+### 4.5 Tooltips
+
+**Verified implementation** (`canvas/src/components/Tooltip.tsx`):
+
+```tsx
+// Trigger wraps children
+
+ {children}
+
+
+// Tooltip portal (shows on hover + focus, 400ms delay)
+
+```
+
+**WCAG 1.4.13 compliance:** Escape key dismisses tooltip without moving pointer/focus.
+
+### 4.6 Theme Switching
+
+Use `useTheme()` hook from `theme-provider.tsx`:
+
+```tsx
+import { useTheme } from "@/lib/theme-provider";
+
+function ThemeToggle() {
+ const { theme, resolvedTheme, setTheme } = useTheme();
+ return (
+
+ );
+}
+```
+
+**Theme types:**
+```ts
+type ThemePreference = "system" | "light" | "dark";
+type ResolvedTheme = "light" | "dark";
+```
+
+**Cookie:** `mol_theme` with `Domain=.moleculesai.app` — persists across surfaces.
+
+---
+
+## 5. Accessibility Rules (WCAG 2.1 AA) — VERIFIED
+
+### 5.1 Focus Management ✅ VERIFIED
+- All interactive elements have `focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950`
+- No `outline-none` without equivalent focus ring
+- Radix Dialog traps focus automatically
+
+### 5.2 Semantic HTML ✅ VERIFIED
+- Buttons use `