diff --git a/AGENTS.md b/AGENTS.md
index 08e22157..7d7fa83d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -14,6 +14,7 @@
 - Lint: `pnpm lint`; Type-check: `pnpm typecheck` (runs per package). The root lint command is the single entry point for blocking Oxlint and Knip checks, residual ESLint, and advisory anti-slop checks.
 - Detailed advisory output: `pnpm lint:ox:extra:details`; accessibility scan: `pnpm a11y:scan` (install Chromium once with `pnpm exec playwright install chromium`); opt-in render evidence: `pnpm perf:scan`.
 - Tests (E2E): `pnpm test`, `pnpm test:ui`, CI configs in `playwright.ci*.config.ts`.
+- Themes: `pnpm theme:contrast` gates the 15 batch themes' token pairs in `frontend/src/styles/tokens/colors.css` (text/UI/terminal contrast, high-contrast overlay, CVD separation; `--all` reports the original twelve, `--themes a,b` picks themes, `--markdown --cvd` prints PR tables — see `scripts/README.md`); `pnpm theme:screenshots` regenerates `screenshots/themes/batch/`.
 - Main unit tests (if added): `pnpm --filter main test`, coverage: `pnpm --filter main run test:coverage`.
 - Releases must follow `docs/RELEASE_INSTRUCTIONS.md` and run from a clean `main` checkout whose `HEAD` matches `origin/main`.
 
diff --git a/frontend/index.html b/frontend/index.html
index a8a8d31e..72611852 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -11,7 +11,7 @@
     <script>
       // Apply theme class before React loads to prevent flash
       const savedTheme = localStorage.getItem('theme');
-      const validThemes = ['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta'];
+      const validThemes = ['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta', 'synthwave', 'acid', 'tokyo-rain', 'folio', 'newsprint', 'walnut', 'amber-crt', 'teletype', 'dot-matrix', 'haar', 'abyss', 'understory', 'colorblind-safe', 'low-fatigue', 'high-legibility'];
       const themeClasses = {
         'light': ['light'],
         'light-rounded': ['light', 'light-rounded'],
@@ -25,6 +25,21 @@
         'night-owl': ['dark', 'night-owl'],
         'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
         'terracotta': ['dark', 'terracotta'],
+        'synthwave': ['dark', 'synthwave'],
+        'acid': ['dark', 'acid'],
+        'tokyo-rain': ['dark', 'tokyo-rain'],
+        'folio': ['light', 'folio'],
+        'newsprint': ['light', 'newsprint'],
+        'walnut': ['dark', 'walnut'],
+        'amber-crt': ['dark', 'amber-crt'],
+        'teletype': ['light', 'teletype'],
+        'dot-matrix': ['dark', 'dot-matrix'],
+        'haar': ['light', 'haar'],
+        'abyss': ['dark', 'abyss'],
+        'understory': ['dark', 'understory'],
+        'colorblind-safe': ['dark', 'colorblind-safe'],
+        'low-fatigue': ['dark', 'low-fatigue'],
+        'high-legibility': ['light', 'high-legibility'],
       };
       const theme = validThemes.includes(savedTheme) ? savedTheme : 'light-rounded';
       document.documentElement.classList.add(...themeClasses[theme]);
@@ -37,7 +52,7 @@
     <script>
       // Also apply to body (mirrors the head script logic)
       const t = localStorage.getItem('theme');
-      const vt = ['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta'];
+      const vt = ['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta', 'synthwave', 'acid', 'tokyo-rain', 'folio', 'newsprint', 'walnut', 'amber-crt', 'teletype', 'dot-matrix', 'haar', 'abyss', 'understory', 'colorblind-safe', 'low-fatigue', 'high-legibility'];
       const tc = {
         'light': ['light'],
         'light-rounded': ['light', 'light-rounded'],
@@ -51,6 +66,21 @@
         'night-owl': ['dark', 'night-owl'],
         'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
         'terracotta': ['dark', 'terracotta'],
+        'synthwave': ['dark', 'synthwave'],
+        'acid': ['dark', 'acid'],
+        'tokyo-rain': ['dark', 'tokyo-rain'],
+        'folio': ['light', 'folio'],
+        'newsprint': ['light', 'newsprint'],
+        'walnut': ['dark', 'walnut'],
+        'amber-crt': ['dark', 'amber-crt'],
+        'teletype': ['light', 'teletype'],
+        'dot-matrix': ['dark', 'dot-matrix'],
+        'haar': ['light', 'haar'],
+        'abyss': ['dark', 'abyss'],
+        'understory': ['dark', 'understory'],
+        'colorblind-safe': ['dark', 'colorblind-safe'],
+        'low-fatigue': ['dark', 'low-fatigue'],
+        'high-legibility': ['light', 'high-legibility'],
       };
       const bt = vt.includes(t) ? t : 'light-rounded';
       document.body.classList.add(...tc[bt]);
diff --git a/frontend/src/components/HomePage.tsx b/frontend/src/components/HomePage.tsx
index 8b821a88..a97892fc 100644
--- a/frontend/src/components/HomePage.tsx
+++ b/frontend/src/components/HomePage.tsx
@@ -11,6 +11,7 @@ import { Toggle } from './ui/Toggle';
 import { AddProjectDialog } from './AddProjectDialog';
 import { CloneFromGitHubDialog } from './CloneFromGitHubDialog';
 import { formatDistanceToNow, isValidTimestamp } from '../utils/timestampUtils';
+import { THEME_OPTIONS, getThemeLabel } from '../utils/themeOptions';
 import type { Project } from '../types/project';
 import type { Session } from '../types/session';
 
@@ -314,27 +315,19 @@ export function HomePage() {
                     type="button"
                     className="flex cursor-pointer items-center gap-2 rounded-md border border-border-secondary bg-surface-tertiary px-3 py-1.5 text-sm text-text-primary hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-interactive"
                   >
-                    <span>{{ light: 'Light (sharp)', 'light-rounded': 'Light (rounded)', dark: 'Dark (sharp)', oled: 'OLED Black (sharp)', dusk: 'Dusk', 'dusk-oled': 'Dusk (OLED)', forge: 'Forge', ember: 'Ember', aurora: 'Aurora', 'night-owl': 'Night Owl', 'night-owl-oled': 'Night Owl (OLED)', terracotta: 'Terracotta' }[theme]}</span>
+                    <span>{getThemeLabel(theme)}</span>
                     <ChevronDown className="w-3 h-3 text-text-tertiary" />
                   </button>
                 }
-                items={[
-                  { id: 'light-rounded', label: 'Light (rounded)', onClick: () => setTheme('light-rounded') },
-                  { id: 'forge', label: 'Forge', onClick: () => setTheme('forge') },
-                  { id: 'night-owl', label: 'Night Owl', onClick: () => setTheme('night-owl') },
-                  { id: 'night-owl-oled', label: 'Night Owl (OLED)', onClick: () => setTheme('night-owl-oled') },
-                  { id: 'dusk-oled', label: 'Dusk (OLED)', onClick: () => setTheme('dusk-oled') },
-                  { id: 'dusk', label: 'Dusk', onClick: () => setTheme('dusk') },
-                  { id: 'ember', label: 'Ember', onClick: () => setTheme('ember') },
-                  { id: 'aurora', label: 'Aurora', onClick: () => setTheme('aurora') },
-                  { id: 'terracotta', label: 'Terracotta', onClick: () => setTheme('terracotta') },
-                  { id: 'light', label: 'Light (sharp)', onClick: () => setTheme('light') },
-                  { id: 'dark', label: 'Dark (sharp)', onClick: () => setTheme('dark') },
-                  { id: 'oled', label: 'OLED Black (sharp)', onClick: () => setTheme('oled') },
-                ]}
+                items={THEME_OPTIONS.map((option) => ({
+                  id: option.id,
+                  label: option.label,
+                  description: option.description,
+                  onClick: () => setTheme(option.id),
+                }))}
                 selectedId={theme}
                 position="bottom-right"
-                width="sm"
+                width="lg"
               />
             </div>
 
diff --git a/frontend/src/components/panels/diff/DiffViewer.tsx b/frontend/src/components/panels/diff/DiffViewer.tsx
index d77bbe33..8b0bfc05 100644
--- a/frontend/src/components/panels/diff/DiffViewer.tsx
+++ b/frontend/src/components/panels/diff/DiffViewer.tsx
@@ -4,7 +4,7 @@ import type { DiffHighlighter } from '@git-diff-view/shiki';
 import { getDiffViewHighlighter } from '@git-diff-view/shiki';
 import { FileText, ChevronRight, ChevronDown, ExternalLink, ChevronsUpDown, ChevronsDownUp } from 'lucide-react';
 import type { DiffViewerProps, FileDiff } from '../../../types/diff';
-import { useTheme } from '../../../contexts/ThemeContext';
+import { isLightTheme, useTheme } from '../../../contexts/ThemeContext';
 import { useScrollSurface } from '../../../hooks/useScrollSurface';
 import "@git-diff-view/react/styles/diff-view.css";
 
@@ -141,7 +141,7 @@ export interface DiffViewerHandle {
 
 const DiffViewer = memo(forwardRef<DiffViewerHandle, DiffViewerProps>(({ files, className = '', sessionId, onOpenInEditor }, ref) => {
   const { theme } = useTheme();
-  const isDarkMode = theme !== 'light' && theme !== 'light-rounded';
+  const isDarkMode = !isLightTheme(theme);
   const [expandedFiles, setExpandedFiles] = useState<Set<number>>(new Set());
   const [highlighter, setHighlighter] = useState<DiffHighlighter | null>(null);
   const viewerRef = useRef<HTMLDivElement>(null);
diff --git a/frontend/src/components/panels/editor/FileEditor.tsx b/frontend/src/components/panels/editor/FileEditor.tsx
index bd643453..ce77bcc4 100644
--- a/frontend/src/components/panels/editor/FileEditor.tsx
+++ b/frontend/src/components/panels/editor/FileEditor.tsx
@@ -6,7 +6,7 @@ import { useTree } from '@headless-tree/react';
 import { asyncDataLoaderFeature, selectionFeature, hotkeysCoreFeature, expandAllFeature } from '@headless-tree/core';
 import type { ItemInstance } from '@headless-tree/core';
 import { MonacoErrorBoundary } from '../../MonacoErrorBoundary';
-import { useTheme } from '../../../contexts/ThemeContext';
+import { isLightTheme, useTheme } from '../../../contexts/ThemeContext';
 import { debounce } from '../../../utils/debounce';
 import { devLog } from '../../../utils/console';
 import { MarkdownPreview } from '../../MarkdownPreview';
@@ -1232,7 +1232,7 @@ export function FileEditor({
   }, [binaryBlobUrl]);
 
   const { theme } = useTheme();
-  const isDarkMode = theme !== 'light' && theme !== 'light-rounded';
+  const isDarkMode = !isLightTheme(theme);
   const hasUnsavedChanges = fileContent !== originalContent;
   
   // Wrap onResize callback to avoid recreating
diff --git a/frontend/src/components/panels/logPanel/LogsView.tsx b/frontend/src/components/panels/logPanel/LogsView.tsx
index c55622eb..8d22a9f7 100644
--- a/frontend/src/components/panels/logPanel/LogsView.tsx
+++ b/frontend/src/components/panels/logPanel/LogsView.tsx
@@ -3,6 +3,7 @@ import { Search, X, Download, Trash2, ChevronUp, ChevronDown, Filter, Copy, Chec
 import { cn } from '../../../utils/cn';
 import AnsiToHtml from 'ansi-to-html';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { getTerminalTheme } from '../../../utils/terminalTheme';
 import { LiveRegion } from '../../ui/LiveRegion';
 import { areKeyboardShortcutsEnabled, useConfigStore } from '../../../stores/configStore';
 import { useScrollSurface } from '../../../hooks/useScrollSurface';
@@ -46,34 +47,28 @@ export const LogsView: React.FC<LogsViewProps> = ({ sessionId, isVisible }) => {
   const { theme } = useTheme();
   const keyboardShortcutsEnabled = useConfigStore((state) => areKeyboardShortcutsEnabled(state.config));
 
-  // Create ANSI to HTML converter with theme-aware colors
+  // ANSI → HTML converter using the active theme's terminal palette
+  // (--color-terminal-* tokens), so log colours match the terminal panel.
+  // Read in an effect: the theme classes are stamped on <html> by
+  // ThemeProvider's layout effect, which has run by the time this fires.
+  const [terminalPalette, setTerminalPalette] = useState(getTerminalTheme);
+  useEffect(() => {
+    setTerminalPalette(getTerminalTheme());
+  }, [theme]);
   const ansiConverter = useMemo(() => {
-    const isLight = theme === 'light' || theme === 'light-rounded';
+    const p = terminalPalette;
     return new AnsiToHtml({
-      fg: isLight ? '#1f2328' : '#e5e7eb',
-      bg: isLight ? '#ffffff' : '#0a0a0a',
+      fg: p.foreground,
+      bg: p.background,
       newline: true,
       escapeXML: true,
-      colors: {
-        0: isLight ? '#1f2328' : '#000000', // Black
-        1: isLight ? '#cf222e' : '#ef4444', // Red
-        2: isLight ? '#1a7f37' : '#10b981', // Green
-        3: isLight ? '#9a6700' : '#f59e0b', // Yellow
-        4: isLight ? '#2563eb' : '#3b82f6', // Blue
-        5: isLight ? '#8250df' : '#a855f7', // Magenta
-        6: isLight ? '#0891b2' : '#06b6d4', // Cyan
-        7: isLight ? '#6b7280' : '#e5e7eb', // White
-        8: isLight ? '#6b7280' : '#6b7280', // Bright Black (Gray)
-        9: isLight ? '#ef4444' : '#f87171', // Bright Red
-        10: isLight ? '#22c55e' : '#34d399', // Bright Green
-        11: isLight ? '#eab308' : '#fbbf24', // Bright Yellow
-        12: isLight ? '#3b82f6' : '#60a5fa', // Bright Blue
-        13: isLight ? '#a855f7' : '#c084fc', // Bright Magenta
-        14: isLight ? '#06b6d4' : '#22d3ee', // Bright Cyan
-        15: isLight ? '#1f2328' : '#ffffff', // Bright White
-      }
+      // ANSI slots 0–15; getTerminalTheme always fills these, the fallback only satisfies ITheme's optional typing.
+      colors: [
+        p.black, p.red, p.green, p.yellow, p.blue, p.magenta, p.cyan, p.white,
+        p.brightBlack, p.brightRed, p.brightGreen, p.brightYellow, p.brightBlue, p.brightMagenta, p.brightCyan, p.brightWhite,
+      ].map((color) => color ?? p.foreground ?? '#808080'),
     });
-  }, [theme]);
+  }, [terminalPalette]);
 
   // Load existing logs when component mounts or session changes
   useEffect(() => {
diff --git a/frontend/src/components/settings/categories/AppearanceSettings.tsx b/frontend/src/components/settings/categories/AppearanceSettings.tsx
index 7b80f621..014e654e 100644
--- a/frontend/src/components/settings/categories/AppearanceSettings.tsx
+++ b/frontend/src/components/settings/categories/AppearanceSettings.tsx
@@ -3,7 +3,9 @@ import { IconButton } from '../../ui/Button';
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
+  SelectLabel,
   SelectTrigger,
   SelectValue,
 } from '../../ui/Select';
@@ -12,21 +14,7 @@ import { SettingRow, SettingsPage } from '../SettingRow';
 import { ImmediateToggle, SegmentedControl } from '../SettingsControls';
 import type { SettingsPersistence } from '../useSettingsPersistence';
 import type { AppConfig } from '../../../types/config';
-
-const THEMES: Array<{ id: NonNullable<AppConfig['theme']>; label: string }> = [
-  { id: 'light-rounded', label: 'Light (rounded)' },
-  { id: 'light', label: 'Light (sharp)' },
-  { id: 'forge', label: 'Forge' },
-  { id: 'night-owl', label: 'Night Owl' },
-  { id: 'night-owl-oled', label: 'Night Owl (OLED)' },
-  { id: 'dusk', label: 'Dusk' },
-  { id: 'dusk-oled', label: 'Dusk (OLED)' },
-  { id: 'ember', label: 'Ember' },
-  { id: 'aurora', label: 'Aurora' },
-  { id: 'terracotta', label: 'Terracotta' },
-  { id: 'dark', label: 'Dark (sharp)' },
-  { id: 'oled', label: 'OLED Black (sharp)' },
-];
+import { THEME_OPTION_GROUPS } from '../../../utils/themeOptions';
 
 export function AppearanceSettings({ persistence }: { persistence: SettingsPersistence }) {
   const config = persistence.config!;
@@ -34,7 +22,7 @@ export function AppearanceSettings({ persistence }: { persistence: SettingsPersi
 
   const saveScale = (value: number) => persistence.saveConfig('ui-scale', { uiScale: value });
   const saveTheme = (value: string) => {
-    // SAFETY: Theme values come from the THEMES list, whose ids match AppConfig.theme.
+    // SAFETY: Theme values come from THEME_OPTION_GROUPS, whose ids match AppConfig.theme.
     return persistence.saveConfig('theme', { theme: value as AppConfig['theme'] });
   };
 
@@ -54,7 +42,16 @@ export function AppearanceSettings({ persistence }: { persistence: SettingsPersi
             >
               <SelectTrigger aria-label="Theme"><SelectValue /></SelectTrigger>
               <SelectContent>
-                {THEMES.map((theme) => <SelectItem key={theme.id} value={theme.id}>{theme.label}</SelectItem>)}
+                {THEME_OPTION_GROUPS.map((group) => (
+                  <SelectGroup key={group.family}>
+                    <SelectLabel>{group.family}</SelectLabel>
+                    {group.options.map((theme) => (
+                      <SelectItem key={theme.id} value={theme.id} description={theme.description}>
+                        {theme.label}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                ))}
               </SelectContent>
             </Select>
           </div>
diff --git a/frontend/src/components/ui/Select.tsx b/frontend/src/components/ui/Select.tsx
index 56ee4862..5089ddd2 100644
--- a/frontend/src/components/ui/Select.tsx
+++ b/frontend/src/components/ui/Select.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useId } from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 import { cn } from '../../utils/cn';
@@ -116,6 +116,8 @@ const SelectContent = forwardRef<
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
+const SelectGroup = SelectPrimitive.Group;
+
 const SelectLabel = forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
@@ -131,31 +133,47 @@ const SelectLabel = forwardRef<
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
+interface SelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+  /** Optional one-line hint rendered under the label inside the list (never in the trigger). */
+  description?: React.ReactNode;
+}
+
 const SelectItem = forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none',
-      'text-text-primary',
-      'hover:bg-surface-secondary hover:text-text-primary',
-      'focus:bg-surface-secondary focus:text-text-primary',
-      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      'transition-colors duration-150',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4 text-interactive" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
+  SelectItemProps
+>(({ className, children, description, ...props }, ref) => {
+  const descriptionId = useId();
+  return (
+    <SelectPrimitive.Item
+      ref={ref}
+      aria-describedby={description ? descriptionId : undefined}
+      className={cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none',
+        'text-text-primary',
+        'hover:bg-surface-secondary hover:text-text-primary',
+        'focus:bg-surface-secondary focus:text-text-primary',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'transition-colors duration-150',
+        className
+      )}
+      {...props}
+    >
+      <span className={cn('absolute right-2 flex h-3.5 w-3.5 items-center justify-center', description && 'top-2')}>
+        <SelectPrimitive.ItemIndicator>
+          <Check className="h-4 w-4 text-interactive" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      {description ? (
+        <span className="flex min-w-0 flex-col items-start">
+          <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+          <span id={descriptionId} className="mt-0.5 block max-w-[16rem] whitespace-normal text-xs leading-tight text-text-tertiary">{description}</span>
+        </span>
+      ) : (
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      )}
+    </SelectPrimitive.Item>
+  );
+});
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = forwardRef<
@@ -175,5 +193,7 @@ export {
   SelectValue,
   SelectTrigger,
   SelectContent,
+  SelectGroup,
+  SelectLabel,
   SelectItem,
 };
diff --git a/frontend/src/contexts/ThemeContext.ts b/frontend/src/contexts/ThemeContext.ts
index 0834f014..c8f7f003 100644
--- a/frontend/src/contexts/ThemeContext.ts
+++ b/frontend/src/contexts/ThemeContext.ts
@@ -1,2 +1,3 @@
 export { ThemeProvider } from './ThemeProvider';
 export { useTheme } from './useTheme';
+export { isLightTheme } from './themeContextValue';
diff --git a/frontend/src/contexts/ThemeProvider.tsx b/frontend/src/contexts/ThemeProvider.tsx
index 8179969b..7443e905 100644
--- a/frontend/src/contexts/ThemeProvider.tsx
+++ b/frontend/src/contexts/ThemeProvider.tsx
@@ -1,22 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
 import { useConfigStore } from '../stores/configStore';
-import { ThemeContext, type Theme } from './themeContextValue';
+import { THEME_CLASSES, ThemeContext, type Theme } from './themeContextValue';
 
-const VALID_THEMES = new Set<string>(['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta']);
-const THEME_CLASSES = {
-  'light': ['light'],
-  'light-rounded': ['light', 'light-rounded'],
-  'dark': ['dark'],
-  'oled': ['dark', 'oled'],
-  'dusk': ['dark', 'dusk'],
-  'dusk-oled': ['dark', 'dusk', 'dusk-oled'],
-  'forge': ['dark', 'forge'],
-  'ember': ['dark', 'ember'],
-  'aurora': ['dark', 'aurora'],
-  'night-owl': ['dark', 'night-owl'],
-  'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
-  'terracotta': ['dark', 'terracotta'],
-} satisfies Record<Theme, string[]>;
+const VALID_THEMES = new Set<string>(Object.keys(THEME_CLASSES));
+// Every class any theme can stamp — removed wholesale before applying the next theme.
+const ALL_THEME_CLASSES = [...new Set(Object.values(THEME_CLASSES).flat())];
 const isValidTheme = (theme: string): theme is Theme => VALID_THEMES.has(theme);
 
 export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -46,13 +34,17 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     }
   }, [config?.highContrast]);
 
-  useEffect(() => {
+  // Layout effect (not passive): descendants read the stamped classes via
+  // getComputedStyle in their own useEffects (terminal palette, log ANSI
+  // colours), and React runs child passive effects before the parent's — a
+  // passive effect here would leave them one theme behind.
+  useLayoutEffect(() => {
     const root = document.documentElement;
     const body = document.body;
 
     // Remove ALL theme classes from both root and body
-    root.classList.remove('light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta');
-    body.classList.remove('light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta');
+    root.classList.remove(...ALL_THEME_CLASSES);
+    body.classList.remove(...ALL_THEME_CLASSES);
 
     const themeClasses = THEME_CLASSES[theme];
     root.classList.add(...themeClasses);
diff --git a/frontend/src/contexts/themeClasses.test.ts b/frontend/src/contexts/themeClasses.test.ts
new file mode 100644
index 00000000..9b9558ee
--- /dev/null
+++ b/frontend/src/contexts/themeClasses.test.ts
@@ -0,0 +1,50 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+import { THEME_CLASSES } from './themeContextValue';
+
+/**
+ * frontend/index.html stamps the theme classes before React loads (to avoid a
+ * flash) and duplicates THEME_CLASSES twice — once for <html>, once for <body>.
+ * PR #362 found that copy had silently drifted; this keeps it honest.
+ */
+const INDEX_HTML = readFileSync(
+  resolve(dirname(fileURLToPath(import.meta.url)), '../../index.html'),
+  'utf8',
+);
+
+/** Parse a `{ 'id': ['a', 'b'], ... }` object literal from the bootstrap script into id → class list entries. */
+function parseClassMap(source: string) {
+  return Object.fromEntries(
+    [...source.matchAll(/'([\w-]+)':\s*\[([^\]]*)\]/g)].map((entry) => [
+      entry[1],
+      [...entry[2].matchAll(/'([\w-]+)'/g)].map((m) => m[1]),
+    ]),
+  );
+}
+
+function parseIdList(source: string): string[] {
+  return [...source.matchAll(/'([\w-]+)'/g)].map((m) => m[1]);
+}
+
+describe('index.html theme bootstrap', () => {
+  const classMaps = [...INDEX_HTML.matchAll(/const (?:themeClasses|tc) = \{([\s\S]*?)\};/g)].map((m) => parseClassMap(m[1]));
+  const idLists = [...INDEX_HTML.matchAll(/const (?:validThemes|vt) = \[([^\]]*)\];/g)].map((m) => parseIdList(m[1]));
+
+  it('has one head and one body copy of the class map and valid-theme list', () => {
+    expect(classMaps).toHaveLength(2);
+    expect(idLists).toHaveLength(2);
+  });
+
+  it('keeps both copies identical to THEME_CLASSES', () => {
+    for (const map of classMaps) expect(map).toEqual(THEME_CLASSES);
+    for (const ids of idLists) expect(ids.sort()).toEqual(Object.keys(THEME_CLASSES).sort());
+  });
+
+  it('every theme composes on the light or dark base', () => {
+    for (const [theme, classes] of Object.entries(THEME_CLASSES)) {
+      expect(['light', 'dark'], `${theme} must start with a base class`).toContain(classes[0]);
+    }
+  });
+});
diff --git a/frontend/src/contexts/themeContextValue.ts b/frontend/src/contexts/themeContextValue.ts
index 69b51e5e..3b75dda0 100644
--- a/frontend/src/contexts/themeContextValue.ts
+++ b/frontend/src/contexts/themeContextValue.ts
@@ -1,6 +1,44 @@
 import { createContext } from 'react';
 
-export type Theme = 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta';
+export type Theme = 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta' | 'synthwave' | 'acid' | 'tokyo-rain' | 'folio' | 'newsprint' | 'walnut' | 'amber-crt' | 'teletype' | 'dot-matrix' | 'haar' | 'abyss' | 'understory' | 'colorblind-safe' | 'low-fatigue' | 'high-legibility';
+
+/**
+ * Class list stamped on <html>/<body> per theme. Every theme composes on the
+ * `light` or `dark` base, so index 0 is the base and decides light-vs-dark
+ * behaviour for code surfaces (diff view, Monaco, logs, logo).
+ * Keep in sync with the pre-React bootstrap in frontend/index.html.
+ */
+export const THEME_CLASSES = {
+  'light': ['light'],
+  'light-rounded': ['light', 'light-rounded'],
+  'dark': ['dark'],
+  'oled': ['dark', 'oled'],
+  'dusk': ['dark', 'dusk'],
+  'dusk-oled': ['dark', 'dusk', 'dusk-oled'],
+  'forge': ['dark', 'forge'],
+  'ember': ['dark', 'ember'],
+  'aurora': ['dark', 'aurora'],
+  'night-owl': ['dark', 'night-owl'],
+  'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
+  'terracotta': ['dark', 'terracotta'],
+  'synthwave': ['dark', 'synthwave'],
+  'acid': ['dark', 'acid'],
+  'tokyo-rain': ['dark', 'tokyo-rain'],
+  'folio': ['light', 'folio'],
+  'newsprint': ['light', 'newsprint'],
+  'walnut': ['dark', 'walnut'],
+  'amber-crt': ['dark', 'amber-crt'],
+  'teletype': ['light', 'teletype'],
+  'dot-matrix': ['dark', 'dot-matrix'],
+  'haar': ['light', 'haar'],
+  'abyss': ['dark', 'abyss'],
+  'understory': ['dark', 'understory'],
+  'colorblind-safe': ['dark', 'colorblind-safe'],
+  'low-fatigue': ['dark', 'low-fatigue'],
+  'high-legibility': ['light', 'high-legibility'],
+} satisfies Record<Theme, string[]>;
+
+export const isLightTheme = (theme: Theme): boolean => THEME_CLASSES[theme][0] === 'light';
 
 export interface ThemeContextType {
   theme: Theme;
diff --git a/frontend/src/hooks/usePaneLogo.ts b/frontend/src/hooks/usePaneLogo.ts
index ea25fbb6..1fc57057 100644
--- a/frontend/src/hooks/usePaneLogo.ts
+++ b/frontend/src/hooks/usePaneLogo.ts
@@ -1,8 +1,8 @@
 import paneLogoDark from '../assets/pane-logo-dark.svg';
 import paneLogoLight from '../assets/pane-logo-light.svg';
-import { useTheme } from '../contexts/ThemeContext';
+import { isLightTheme, useTheme } from '../contexts/ThemeContext';
 
 export function usePaneLogo(): string {
   const { theme } = useTheme();
-  return theme === 'light' || theme === 'light-rounded' ? paneLogoLight : paneLogoDark;
+  return isLightTheme(theme) ? paneLogoLight : paneLogoDark;
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 328a51a8..a6936b4b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -62,6 +62,53 @@ body.light-rounded {
     linear-gradient(180deg, #f7fafc 0%, #eef3f7 100%);
 }
 
+body.synthwave {
+  background:
+    radial-gradient(circle at top center, rgba(255, 95, 215, 0.10), transparent 30%),
+    radial-gradient(circle at top right, rgba(61, 227, 255, 0.07), transparent 26%),
+    linear-gradient(180deg, #120b1f 0%, #0e0819 100%);
+}
+
+body.tokyo-rain {
+  background:
+    radial-gradient(circle at top center, rgba(255, 79, 154, 0.09), transparent 28%),
+    radial-gradient(circle at top right, rgba(92, 179, 255, 0.08), transparent 26%),
+    linear-gradient(180deg, #0d1120 0%, #0a0e1b 100%);
+}
+
+body.amber-crt {
+  background:
+    radial-gradient(ellipse at top center, rgba(255, 176, 0, 0.05), transparent 36%),
+    linear-gradient(180deg, #140f08 0%, #100c06 100%);
+}
+
+body.teletype {
+  background:
+    radial-gradient(circle at top center, rgba(181, 69, 27, 0.05), transparent 30%),
+    linear-gradient(180deg, #f5efe2 0%, #ece4d2 100%);
+}
+
+/* Haar — a fog bank thins toward the top of the frame */
+body.haar {
+  background:
+    radial-gradient(circle at top center, rgba(255, 255, 255, 0.55), transparent 34%),
+    linear-gradient(180deg, #f1f4f7 0%, #e6ebf0 100%);
+}
+
+/* Abyss — faint bioluminescent bloom rising from the deep */
+body.abyss {
+  background:
+    radial-gradient(circle at bottom center, rgba(77, 184, 171, 0.10), transparent 36%),
+    linear-gradient(180deg, #07111c 0%, #050c15 100%);
+}
+
+/* Understory — light filtering down through a canopy onto bark */
+body.understory {
+  background:
+    radial-gradient(circle at top center, rgba(211, 221, 168, 0.07), transparent 32%),
+    linear-gradient(180deg, #1e1914 0%, #131911 100%);
+}
+
 /* Scrollbars stay functional but visually hidden */
 ::-webkit-scrollbar {
   width: 0;
@@ -98,12 +145,29 @@ body.light-rounded {
 :root.ember .panel-tab-bar [aria-selected="true"],
 :root.night-owl .panel-tab-bar [aria-selected="true"],
 :root.night-owl-oled .panel-tab-bar [aria-selected="true"],
-:root.terracotta .panel-tab-bar [aria-selected="true"] {
+:root.terracotta .panel-tab-bar [aria-selected="true"],
+:root.synthwave .panel-tab-bar [aria-selected="true"],
+:root.acid .panel-tab-bar [aria-selected="true"],
+:root.tokyo-rain .panel-tab-bar [aria-selected="true"],
+:root.folio .panel-tab-bar [aria-selected="true"],
+:root.newsprint .panel-tab-bar [aria-selected="true"],
+:root.walnut .panel-tab-bar [aria-selected="true"],
+:root.amber-crt .panel-tab-bar [aria-selected="true"],
+:root.teletype .panel-tab-bar [aria-selected="true"],
+:root.dot-matrix .panel-tab-bar [aria-selected="true"],
+:root.abyss .panel-tab-bar [aria-selected="true"],
+:root.understory .panel-tab-bar [aria-selected="true"],
+:root.colorblind-safe .panel-tab-bar [aria-selected="true"],
+:root.low-fatigue .panel-tab-bar [aria-selected="true"],
+:root.high-legibility .panel-tab-bar [aria-selected="true"] {
   background-color: transparent;
   box-shadow: inset 0 calc(-1 * var(--tab-indicator-height, 4px)) 0 0 var(--tab-indicator-color, #3574F0);
 }
 
-/* Theme-aware structural shells */
+/* Theme-aware structural shells.
+   Folio, Newsprint and Walnut are intentionally absent from the shell selector
+   lists below — the print themes use the flat base layout with rule-line
+   borders (see effects.css). */
 .pane-main-layout {
   padding: var(--app-frame-padding);
   gap: var(--app-frame-gap);
@@ -129,6 +193,18 @@ body.light-rounded {
 :root.night-owl .pane-sidebar-shell,
 :root.night-owl-oled .pane-sidebar-shell,
 :root.terracotta .pane-sidebar-shell,
+:root.synthwave .pane-sidebar-shell,
+:root.acid .pane-sidebar-shell,
+:root.tokyo-rain .pane-sidebar-shell,
+:root.amber-crt .pane-sidebar-shell,
+:root.teletype .pane-sidebar-shell,
+:root.dot-matrix .pane-sidebar-shell,
+:root.haar .pane-sidebar-shell,
+:root.abyss .pane-sidebar-shell,
+:root.understory .pane-sidebar-shell,
+:root.colorblind-safe .pane-sidebar-shell,
+:root.low-fatigue .pane-sidebar-shell,
+:root.high-legibility .pane-sidebar-shell,
 :root.light-rounded .pane-sidebar-shell {
   border: 3px solid var(--color-border-primary);
   border-radius: var(--app-shell-radius);
@@ -143,6 +219,18 @@ body.light-rounded {
 :root.night-owl .pane-session-shell,
 :root.night-owl-oled .pane-session-shell,
 :root.terracotta .pane-session-shell,
+:root.synthwave .pane-session-shell,
+:root.acid .pane-session-shell,
+:root.tokyo-rain .pane-session-shell,
+:root.amber-crt .pane-session-shell,
+:root.teletype .pane-session-shell,
+:root.dot-matrix .pane-session-shell,
+:root.haar .pane-session-shell,
+:root.abyss .pane-session-shell,
+:root.understory .pane-session-shell,
+:root.colorblind-safe .pane-session-shell,
+:root.low-fatigue .pane-session-shell,
+:root.high-legibility .pane-session-shell,
 :root.light-rounded .pane-session-shell {
   gap: var(--panel-shell-gap);
 }
@@ -154,6 +242,18 @@ body.light-rounded {
 :root.night-owl .panel-tab-bar,
 :root.night-owl-oled .panel-tab-bar,
 :root.terracotta .panel-tab-bar,
+:root.synthwave .panel-tab-bar,
+:root.acid .panel-tab-bar,
+:root.tokyo-rain .panel-tab-bar,
+:root.amber-crt .panel-tab-bar,
+:root.teletype .panel-tab-bar,
+:root.dot-matrix .panel-tab-bar,
+:root.haar .panel-tab-bar,
+:root.abyss .panel-tab-bar,
+:root.understory .panel-tab-bar,
+:root.colorblind-safe .panel-tab-bar,
+:root.low-fatigue .panel-tab-bar,
+:root.high-legibility .panel-tab-bar,
 :root.light-rounded .panel-tab-bar {
   border: 1px solid var(--color-border-primary);
   border-radius: var(--panel-shell-radius);
@@ -168,6 +268,18 @@ body.light-rounded {
 :root.night-owl .pane-editor-stage,
 :root.night-owl-oled .pane-editor-stage,
 :root.terracotta .pane-editor-stage,
+:root.synthwave .pane-editor-stage,
+:root.acid .pane-editor-stage,
+:root.tokyo-rain .pane-editor-stage,
+:root.amber-crt .pane-editor-stage,
+:root.teletype .pane-editor-stage,
+:root.dot-matrix .pane-editor-stage,
+:root.haar .pane-editor-stage,
+:root.abyss .pane-editor-stage,
+:root.understory .pane-editor-stage,
+:root.colorblind-safe .pane-editor-stage,
+:root.low-fatigue .pane-editor-stage,
+:root.high-legibility .pane-editor-stage,
 :root.light-rounded .pane-editor-stage {
   border: 1px solid var(--color-border-primary);
   border-radius: var(--panel-shell-radius);
@@ -182,6 +294,18 @@ body.light-rounded {
 :root.night-owl .pane-terminal-dock,
 :root.night-owl-oled .pane-terminal-dock,
 :root.terracotta .pane-terminal-dock,
+:root.synthwave .pane-terminal-dock,
+:root.acid .pane-terminal-dock,
+:root.tokyo-rain .pane-terminal-dock,
+:root.amber-crt .pane-terminal-dock,
+:root.teletype .pane-terminal-dock,
+:root.dot-matrix .pane-terminal-dock,
+:root.haar .pane-terminal-dock,
+:root.abyss .pane-terminal-dock,
+:root.understory .pane-terminal-dock,
+:root.colorblind-safe .pane-terminal-dock,
+:root.low-fatigue .pane-terminal-dock,
+:root.high-legibility .pane-terminal-dock,
 :root.light-rounded .pane-terminal-dock {
   margin-top: var(--panel-shell-gap);
   border: 1px solid var(--color-border-primary);
@@ -197,6 +321,18 @@ body.light-rounded {
 :root.night-owl .pane-terminal-rail,
 :root.night-owl-oled .pane-terminal-rail,
 :root.terracotta .pane-terminal-rail,
+:root.synthwave .pane-terminal-rail,
+:root.acid .pane-terminal-rail,
+:root.tokyo-rain .pane-terminal-rail,
+:root.amber-crt .pane-terminal-rail,
+:root.teletype .pane-terminal-rail,
+:root.dot-matrix .pane-terminal-rail,
+:root.haar .pane-terminal-rail,
+:root.abyss .pane-terminal-rail,
+:root.understory .pane-terminal-rail,
+:root.colorblind-safe .pane-terminal-rail,
+:root.low-fatigue .pane-terminal-rail,
+:root.high-legibility .pane-terminal-rail,
 :root.light-rounded .pane-terminal-rail,
 :root.dusk .pane-detail-panel,
 :root.forge .pane-detail-panel,
@@ -205,6 +341,18 @@ body.light-rounded {
 :root.night-owl .pane-detail-panel,
 :root.night-owl-oled .pane-detail-panel,
 :root.terracotta .pane-detail-panel,
+:root.synthwave .pane-detail-panel,
+:root.acid .pane-detail-panel,
+:root.tokyo-rain .pane-detail-panel,
+:root.amber-crt .pane-detail-panel,
+:root.teletype .pane-detail-panel,
+:root.dot-matrix .pane-detail-panel,
+:root.haar .pane-detail-panel,
+:root.abyss .pane-detail-panel,
+:root.understory .pane-detail-panel,
+:root.colorblind-safe .pane-detail-panel,
+:root.low-fatigue .pane-detail-panel,
+:root.high-legibility .pane-detail-panel,
 :root.light-rounded .pane-detail-panel {
   border-color: transparent !important;
   background: transparent;
@@ -217,6 +365,18 @@ body.light-rounded {
 :root.night-owl .pane-terminal-rail-shell,
 :root.night-owl-oled .pane-terminal-rail-shell,
 :root.terracotta .pane-terminal-rail-shell,
+:root.synthwave .pane-terminal-rail-shell,
+:root.acid .pane-terminal-rail-shell,
+:root.tokyo-rain .pane-terminal-rail-shell,
+:root.amber-crt .pane-terminal-rail-shell,
+:root.teletype .pane-terminal-rail-shell,
+:root.dot-matrix .pane-terminal-rail-shell,
+:root.haar .pane-terminal-rail-shell,
+:root.abyss .pane-terminal-rail-shell,
+:root.understory .pane-terminal-rail-shell,
+:root.colorblind-safe .pane-terminal-rail-shell,
+:root.low-fatigue .pane-terminal-rail-shell,
+:root.high-legibility .pane-terminal-rail-shell,
 :root.light-rounded .pane-terminal-rail-shell,
 :root.dusk .pane-detail-panel-inner,
 :root.forge .pane-detail-panel-inner,
@@ -225,6 +385,18 @@ body.light-rounded {
 :root.night-owl .pane-detail-panel-inner,
 :root.night-owl-oled .pane-detail-panel-inner,
 :root.terracotta .pane-detail-panel-inner,
+:root.synthwave .pane-detail-panel-inner,
+:root.acid .pane-detail-panel-inner,
+:root.tokyo-rain .pane-detail-panel-inner,
+:root.amber-crt .pane-detail-panel-inner,
+:root.teletype .pane-detail-panel-inner,
+:root.dot-matrix .pane-detail-panel-inner,
+:root.haar .pane-detail-panel-inner,
+:root.abyss .pane-detail-panel-inner,
+:root.understory .pane-detail-panel-inner,
+:root.colorblind-safe .pane-detail-panel-inner,
+:root.low-fatigue .pane-detail-panel-inner,
+:root.high-legibility .pane-detail-panel-inner,
 :root.light-rounded .pane-detail-panel-inner {
   border: 1px solid var(--color-border-primary);
   border-radius: var(--panel-shell-radius);
@@ -239,6 +411,18 @@ body.light-rounded {
 :root.night-owl .pane-terminal-rail-shell,
 :root.night-owl-oled .pane-terminal-rail-shell,
 :root.terracotta .pane-terminal-rail-shell,
+:root.synthwave .pane-terminal-rail-shell,
+:root.acid .pane-terminal-rail-shell,
+:root.tokyo-rain .pane-terminal-rail-shell,
+:root.amber-crt .pane-terminal-rail-shell,
+:root.teletype .pane-terminal-rail-shell,
+:root.dot-matrix .pane-terminal-rail-shell,
+:root.haar .pane-terminal-rail-shell,
+:root.abyss .pane-terminal-rail-shell,
+:root.understory .pane-terminal-rail-shell,
+:root.colorblind-safe .pane-terminal-rail-shell,
+:root.low-fatigue .pane-terminal-rail-shell,
+:root.high-legibility .pane-terminal-rail-shell,
 :root.light-rounded .pane-terminal-rail-shell,
 :root.dusk .pane-detail-panel-vertical .pane-detail-panel-inner,
 :root.forge .pane-detail-panel-vertical .pane-detail-panel-inner,
@@ -247,6 +431,18 @@ body.light-rounded {
 :root.night-owl .pane-detail-panel-vertical .pane-detail-panel-inner,
 :root.night-owl-oled .pane-detail-panel-vertical .pane-detail-panel-inner,
 :root.terracotta .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.synthwave .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.acid .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.tokyo-rain .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.amber-crt .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.teletype .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.dot-matrix .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.haar .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.abyss .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.understory .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.colorblind-safe .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.low-fatigue .pane-detail-panel-vertical .pane-detail-panel-inner,
+:root.high-legibility .pane-detail-panel-vertical .pane-detail-panel-inner,
 :root.light-rounded .pane-detail-panel-vertical .pane-detail-panel-inner {
   margin-left: var(--panel-shell-gap);
 }
@@ -258,6 +454,18 @@ body.light-rounded {
 :root.night-owl .pane-detail-panel-horizontal .pane-detail-panel-inner,
 :root.night-owl-oled .pane-detail-panel-horizontal .pane-detail-panel-inner,
 :root.terracotta .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.synthwave .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.acid .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.tokyo-rain .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.amber-crt .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.teletype .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.dot-matrix .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.haar .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.abyss .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.understory .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.colorblind-safe .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.low-fatigue .pane-detail-panel-horizontal .pane-detail-panel-inner,
+:root.high-legibility .pane-detail-panel-horizontal .pane-detail-panel-inner,
 :root.light-rounded .pane-detail-panel-horizontal .pane-detail-panel-inner {
   margin-top: var(--panel-shell-gap);
 }
@@ -319,6 +527,108 @@ body.light-rounded {
     inset 0 1px 0 rgba(192, 112, 80, 0.06);
 }
 
+:root.synthwave .panel-tab-bar,
+:root.synthwave .pane-editor-stage,
+:root.synthwave .pane-terminal-dock,
+:root.synthwave .pane-terminal-rail-shell,
+:root.synthwave .pane-detail-panel-inner {
+  border-width: 1.25px;
+  border-color: rgba(255, 95, 215, 0.20);
+}
+
+:root.acid .panel-tab-bar,
+:root.acid .pane-editor-stage,
+:root.acid .pane-terminal-dock,
+:root.acid .pane-terminal-rail-shell,
+:root.acid .pane-detail-panel-inner {
+  border-width: 1.25px;
+  border-color: rgba(180, 255, 58, 0.18);
+}
+
+:root.tokyo-rain .panel-tab-bar,
+:root.tokyo-rain .pane-editor-stage,
+:root.tokyo-rain .pane-terminal-dock,
+:root.tokyo-rain .pane-terminal-rail-shell,
+:root.tokyo-rain .pane-detail-panel-inner {
+  border-width: 1.25px;
+  border-color: rgba(255, 79, 154, 0.18);
+}
+
+:root.amber-crt .panel-tab-bar,
+:root.amber-crt .pane-editor-stage,
+:root.amber-crt .pane-terminal-dock,
+:root.amber-crt .pane-terminal-rail-shell,
+:root.amber-crt .pane-detail-panel-inner {
+  border-width: 1.25px;
+  border-color: rgba(255, 176, 0, 0.16);
+  box-shadow:
+    0 0 22px rgba(255, 176, 0, 0.06),
+    0 0 0 1px rgba(255, 176, 0, 0.04),
+    inset 0 1px 0 rgba(255, 176, 0, 0.06);
+}
+
+:root.teletype .panel-tab-bar,
+:root.teletype .pane-editor-stage,
+:root.teletype .pane-terminal-dock,
+:root.teletype .pane-terminal-rail-shell,
+:root.teletype .pane-detail-panel-inner {
+  border-width: 1.25px;
+  border-color: rgba(43, 33, 22, 0.14);
+  box-shadow:
+    0 8px 20px rgba(43, 33, 22, 0.08),
+    0 0 0 1px rgba(255, 252, 245, 0.7),
+    inset 0 1px 0 rgba(255, 252, 245, 0.9);
+}
+
+:root.dot-matrix .panel-tab-bar,
+:root.dot-matrix .pane-editor-stage,
+:root.dot-matrix .pane-terminal-dock,
+:root.dot-matrix .pane-terminal-rail-shell,
+:root.dot-matrix .pane-detail-panel-inner {
+  border-width: 1px;
+  border-color: rgba(155, 188, 15, 0.22);
+  box-shadow: none;
+}
+
+:root.haar .panel-tab-bar,
+:root.haar .pane-editor-stage,
+:root.haar .pane-terminal-dock,
+:root.haar .pane-terminal-rail-shell,
+:root.haar .pane-detail-panel-inner {
+  border-width: 1.25px;
+  border-color: rgba(37, 45, 54, 0.12);
+  box-shadow:
+    0 8px 20px rgba(21, 27, 33, 0.07),
+    0 0 0 1px rgba(255, 255, 255, 0.55),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+:root.abyss .panel-tab-bar,
+:root.abyss .pane-editor-stage,
+:root.abyss .pane-terminal-dock,
+:root.abyss .pane-terminal-rail-shell,
+:root.abyss .pane-detail-panel-inner {
+  border-width: 1.25px;
+  border-color: rgba(77, 184, 171, 0.16);
+  box-shadow:
+    0 12px 26px rgba(1, 4, 8, 0.4),
+    0 0 0 1px rgba(77, 184, 171, 0.04),
+    inset 0 1px 0 rgba(159, 227, 216, 0.05);
+}
+
+:root.understory .panel-tab-bar,
+:root.understory .pane-editor-stage,
+:root.understory .pane-terminal-dock,
+:root.understory .pane-terminal-rail-shell,
+:root.understory .pane-detail-panel-inner {
+  border-width: 1.25px;
+  border-color: rgba(70, 57, 46, 0.7);
+  box-shadow:
+    0 10px 22px rgba(4, 6, 3, 0.3),
+    0 0 0 1px rgba(166, 181, 109, 0.03),
+    inset 0 1px 0 rgba(211, 221, 168, 0.04);
+}
+
 :root.ember .panel-tab-bar,
 :root.ember .pane-editor-stage,
 :root.ember .pane-terminal-dock,
@@ -358,6 +668,42 @@ body.light-rounded {
     inset 0 1px 0 rgba(255, 255, 255, 0.85);
 }
 
+/* Colorblind Safe — neutral 1px borders; no colored glow so hue stays semantic */
+:root.colorblind-safe .panel-tab-bar,
+:root.colorblind-safe .pane-editor-stage,
+:root.colorblind-safe .pane-terminal-dock,
+:root.colorblind-safe .pane-terminal-rail-shell,
+:root.colorblind-safe .pane-detail-panel-inner {
+  border-width: 1px;
+  border-color: var(--cbs-600);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
+}
+
+/* Low Fatigue — soft warm borders, low-contrast shadow */
+:root.low-fatigue .panel-tab-bar,
+:root.low-fatigue .pane-editor-stage,
+:root.low-fatigue .pane-terminal-dock,
+:root.low-fatigue .pane-terminal-rail-shell,
+:root.low-fatigue .pane-detail-panel-inner {
+  border-width: 1px;
+  border-color: var(--lf-600);
+  box-shadow: 0 8px 20px rgba(20, 16, 12, 0.24);
+}
+
+/* High Legibility — solid 4.5:1 borders, flat (no shadow) so edges are unambiguous */
+:root.high-legibility .pane-sidebar-shell {
+  border-width: 1px;
+}
+:root.high-legibility .panel-tab-bar,
+:root.high-legibility .pane-editor-stage,
+:root.high-legibility .pane-terminal-dock,
+:root.high-legibility .pane-terminal-rail-shell,
+:root.high-legibility .pane-detail-panel-inner {
+  border-width: 1px;
+  border-color: var(--hl-500);
+  box-shadow: none;
+}
+
 /* Theme-specific terminal rounding should come from shell containers first */
 :root.dusk .xterm {
   border-radius: var(--panel-shell-radius);
@@ -376,6 +722,30 @@ body.light-rounded {
   border-radius: var(--panel-shell-radius);
 }
 
+:root.synthwave .xterm,
+:root.acid .xterm,
+:root.tokyo-rain .xterm {
+  border-radius: var(--panel-shell-radius);
+}
+
+:root.amber-crt .xterm,
+:root.teletype .xterm,
+:root.dot-matrix .xterm {
+  border-radius: var(--panel-shell-radius);
+}
+
+:root.haar .xterm,
+:root.abyss .xterm,
+:root.understory .xterm {
+  border-radius: var(--panel-shell-radius);
+}
+
+:root.colorblind-safe .xterm,
+:root.low-fatigue .xterm,
+:root.high-legibility .xterm {
+  border-radius: var(--panel-shell-radius);
+}
+
 :root.ember .xterm,
 :root.aurora .xterm,
 :root.light-rounded .xterm {
@@ -790,6 +1160,62 @@ body.light-rounded {
   --vscode-editorWidget-foreground: #e6d0be !important;
 }
 
+/* Synthwave theme overrides — violet-black editor */
+:root.synthwave {
+  --vscode-editor-background: #0b0714 !important;
+  --vscode-editor-foreground: #f1eafc !important;
+  --vscode-editorWidget-background: #0b0714 !important;
+  --vscode-editorWidget-foreground: #f1eafc !important;
+}
+
+/* Acid Terminal theme overrides — charcoal-black editor */
+:root.acid {
+  --vscode-editor-background: #0a0b0a !important;
+  --vscode-editor-foreground: #eaf2ea !important;
+  --vscode-editorWidget-background: #0a0b0a !important;
+  --vscode-editorWidget-foreground: #eaf2ea !important;
+}
+
+/* Tokyo Rain theme overrides — blue-black editor */
+:root.tokyo-rain {
+  --vscode-editor-background: #080b16 !important;
+  --vscode-editor-foreground: #e6ebf4 !important;
+  --vscode-editorWidget-background: #080b16 !important;
+  --vscode-editorWidget-foreground: #e6ebf4 !important;
+}
+
+/* Amber CRT theme overrides — amber phosphor on glass */
+:root.amber-crt {
+  --vscode-editor-background: #0c0905 !important;
+  --vscode-editor-foreground: #f0d9a8 !important;
+  --vscode-editorWidget-background: #0c0905 !important;
+  --vscode-editorWidget-foreground: #f0d9a8 !important;
+}
+
+/* Dot Matrix theme overrides — LCD green on olive-black */
+:root.dot-matrix {
+  --vscode-editor-background: #0a0d08 !important;
+  --vscode-editor-foreground: #dcecb0 !important;
+  --vscode-editorWidget-background: #0a0d08 !important;
+  --vscode-editorWidget-foreground: #dcecb0 !important;
+}
+
+/* Colorblind Safe theme overrides — neutral sunken editor */
+:root.colorblind-safe {
+  --vscode-editor-background: #0b0e12 !important;
+  --vscode-editor-foreground: #e7ebf0 !important;
+  --vscode-editorWidget-background: #0b0e12 !important;
+  --vscode-editorWidget-foreground: #e7ebf0 !important;
+}
+
+/* Low Fatigue theme overrides — warm sepia editor */
+:root.low-fatigue {
+  --vscode-editor-background: #1f1b17 !important;
+  --vscode-editor-foreground: #e6dcc7 !important;
+  --vscode-editorWidget-background: #1f1b17 !important;
+  --vscode-editorWidget-foreground: #e6dcc7 !important;
+}
+
 /* Light theme overrides */
 :root.light {
   --vscode-editor-background: #ffffff !important;
@@ -798,6 +1224,70 @@ body.light-rounded {
   --vscode-editorWidget-foreground: #1f2328 !important;
 }
 
+/* Folio theme overrides — ink on the sheet */
+:root.folio {
+  --vscode-editor-background: #fbf7ee !important;
+  --vscode-editor-foreground: #1f1b17 !important;
+  --vscode-editorWidget-background: #fbf7ee !important;
+  --vscode-editorWidget-foreground: #1f1b17 !important;
+}
+
+/* Newsprint theme overrides — graphite on cool stock */
+:root.newsprint {
+  --vscode-editor-background: #f8f8f6 !important;
+  --vscode-editor-foreground: #24272b !important;
+  --vscode-editorWidget-background: #f8f8f6 !important;
+  --vscode-editorWidget-foreground: #24272b !important;
+}
+
+/* Walnut theme overrides — parchment on walnut */
+:root.walnut {
+  --vscode-editor-background: #120e0b !important;
+  --vscode-editor-foreground: #ede1cd !important;
+  --vscode-editorWidget-background: #120e0b !important;
+  --vscode-editorWidget-foreground: #ede1cd !important;
+}
+
+/* Teletype theme overrides — ink on paper */
+:root.teletype {
+  --vscode-editor-background: #fbf8f1 !important;
+  --vscode-editor-foreground: #2b2116 !important;
+  --vscode-editorWidget-background: #fbf8f1 !important;
+  --vscode-editorWidget-foreground: #2b2116 !important;
+}
+
+/* Abyss theme overrides — trench editor colors */
+:root.abyss {
+  --vscode-editor-background: #04090f !important;
+  --vscode-editor-foreground: #dbeaf1 !important;
+  --vscode-editorWidget-background: #04090f !important;
+  --vscode-editorWidget-foreground: #dbeaf1 !important;
+}
+
+/* Understory theme overrides — moss floor editor colors */
+:root.understory {
+  --vscode-editor-background: #0d110c !important;
+  --vscode-editor-foreground: #e4e9d9 !important;
+  --vscode-editorWidget-background: #0d110c !important;
+  --vscode-editorWidget-foreground: #e4e9d9 !important;
+}
+
+/* Haar theme overrides — fog editor colors (after .light so the theme wins) */
+:root.haar {
+  --vscode-editor-background: #f5f7f9 !important;
+  --vscode-editor-foreground: #252d36 !important;
+  --vscode-editorWidget-background: #f5f7f9 !important;
+  --vscode-editorWidget-foreground: #252d36 !important;
+}
+
+/* High Legibility theme overrides — near-black on white (18.9:1) */
+:root.high-legibility {
+  --vscode-editor-background: #ffffff !important;
+  --vscode-editor-foreground: #111111 !important;
+  --vscode-editorWidget-background: #ffffff !important;
+  --vscode-editorWidget-foreground: #111111 !important;
+}
+
 /* Additional Monaco editor style overrides */
 .monaco-editor,
 .monaco-editor-background,
@@ -810,3 +1300,82 @@ body.light-rounded {
 .monaco-editor .margin-view-overlays {
   background: transparent !important;
 }
+
+/* ==========================================================================
+   Diff view (@git-diff-view) palette overrides for the accessibility themes.
+   The library sets its colors on [data-theme] .diff-style-root; these selectors
+   are more specific so the theme wins. Add/remove tints reuse each theme's
+   success/error hue so the diff reads the same as the rest of the UI.
+   ========================================================================== */
+
+/* Colorblind Safe — Okabe-Ito bluish green (add) vs vermillion (remove) */
+:root.colorblind-safe .diff-tailwindcss-wrapper[data-theme] .diff-style-root {
+  --diff-border--: #2a323b;
+  --diff-add-content--: var(--color-diff-add-bg);
+  --diff-del-content--: var(--color-diff-del-bg);
+  --diff-add-lineNumber--: var(--color-diff-add-gutter);
+  --diff-del-lineNumber--: var(--color-diff-del-gutter);
+  --diff-add-content-highlight--: var(--color-diff-add-highlight);
+  --diff-del-content-highlight--: var(--color-diff-del-highlight);
+  --diff-plain-content--: #0b0e12;
+  --diff-expand-content--: #12161b;
+  --diff-plain-lineNumber--: #12161b;
+  --diff-expand-lineNumber--: #12161b;
+  --diff-empty-content--: #12161b;
+  --diff-plain-lineNumber-color--: #a5aeb8;
+  --diff-expand-lineNumber-color--: #a5aeb8;
+  --diff-hunk-content--: var(--color-diff-hunk-bg);
+  --diff-hunk-lineNumber--: var(--color-diff-hunk-gutter);
+  --diff-hunk-lineNumber-hover--: #56B4E9;
+  --diff-hunk-content-color--: #a5aeb8;
+  --diff-add-widget--: #0072B2;
+  --diff-add-widget-color--: #ffffff;
+}
+
+/* Low Fatigue — sage (add) vs soft brick (remove) on sepia */
+:root.low-fatigue .diff-tailwindcss-wrapper[data-theme] .diff-style-root {
+  --diff-border--: #433b33;
+  --diff-add-content--: var(--color-diff-add-bg);
+  --diff-del-content--: var(--color-diff-del-bg);
+  --diff-add-lineNumber--: var(--color-diff-add-gutter);
+  --diff-del-lineNumber--: var(--color-diff-del-gutter);
+  --diff-add-content-highlight--: var(--color-diff-add-highlight);
+  --diff-del-content-highlight--: var(--color-diff-del-highlight);
+  --diff-plain-content--: #1f1b17;
+  --diff-expand-content--: #27221d;
+  --diff-plain-lineNumber--: #27221d;
+  --diff-expand-lineNumber--: #27221d;
+  --diff-empty-content--: #27221d;
+  --diff-plain-lineNumber-color--: #b3a48c;
+  --diff-expand-lineNumber-color--: #b3a48c;
+  --diff-hunk-content--: var(--color-diff-hunk-bg);
+  --diff-hunk-lineNumber--: var(--color-diff-hunk-gutter);
+  --diff-hunk-lineNumber-hover--: #d1a54a;
+  --diff-hunk-content-color--: #b3a48c;
+  --diff-add-widget--: #d1a54a;
+  --diff-add-widget-color--: #1f1b17;
+}
+
+/* High Legibility — stronger tints and 10:1 gutter numbers */
+:root.high-legibility .diff-tailwindcss-wrapper[data-theme] .diff-style-root {
+  --diff-border--: #767676;
+  --diff-add-content--: var(--color-diff-add-bg);
+  --diff-del-content--: var(--color-diff-del-bg);
+  --diff-add-lineNumber--: var(--color-diff-add-gutter);
+  --diff-del-lineNumber--: var(--color-diff-del-gutter);
+  --diff-add-content-highlight--: var(--color-diff-add-highlight);
+  --diff-del-content-highlight--: var(--color-diff-del-highlight);
+  --diff-plain-content--: #ffffff;
+  --diff-expand-content--: #f5f5f5;
+  --diff-plain-lineNumber--: #f5f5f5;
+  --diff-expand-lineNumber--: #f5f5f5;
+  --diff-empty-content--: #f5f5f5;
+  --diff-plain-lineNumber-color--: #3b3b3b;
+  --diff-expand-lineNumber-color--: #3b3b3b;
+  --diff-hunk-content--: var(--color-diff-hunk-bg);
+  --diff-hunk-lineNumber--: var(--color-diff-hunk-gutter);
+  --diff-hunk-lineNumber-hover--: #1e40af;
+  --diff-hunk-content-color--: #262626;
+  --diff-add-widget--: #1e40af;
+  --diff-add-widget-color--: #ffffff;
+}
diff --git a/frontend/src/styles/monaco-overrides.css b/frontend/src/styles/monaco-overrides.css
index 3343f4b0..7407c03a 100644
--- a/frontend/src/styles/monaco-overrides.css
+++ b/frontend/src/styles/monaco-overrides.css
@@ -16,6 +16,30 @@
   --vscode-editorWidget-foreground: #DFE1E5 !important;
 }
 
+/* Synthwave theme overrides — violet-black editor */
+:root.synthwave {
+  --vscode-editor-background: #0b0714 !important;
+  --vscode-editor-foreground: #f1eafc !important;
+  --vscode-editorWidget-background: #0b0714 !important;
+  --vscode-editorWidget-foreground: #f1eafc !important;
+}
+
+/* Acid Terminal theme overrides — charcoal-black editor */
+:root.acid {
+  --vscode-editor-background: #0a0b0a !important;
+  --vscode-editor-foreground: #eaf2ea !important;
+  --vscode-editorWidget-background: #0a0b0a !important;
+  --vscode-editorWidget-foreground: #eaf2ea !important;
+}
+
+/* Tokyo Rain theme overrides — blue-black editor */
+:root.tokyo-rain {
+  --vscode-editor-background: #080b16 !important;
+  --vscode-editor-foreground: #e6ebf4 !important;
+  --vscode-editorWidget-background: #080b16 !important;
+  --vscode-editorWidget-foreground: #e6ebf4 !important;
+}
+
 /* Light theme overrides */
 :root.light {
   --vscode-editor-background: #ffffff !important; /* white */
@@ -24,6 +48,54 @@
   --vscode-editorWidget-foreground: #1e2026 !important;
 }
 
+/* Folio theme overrides — ink on the sheet */
+:root.folio {
+  --vscode-editor-background: #fbf7ee !important;
+  --vscode-editor-foreground: #1f1b17 !important;
+  --vscode-editorWidget-background: #fbf7ee !important;
+  --vscode-editorWidget-foreground: #1f1b17 !important;
+}
+
+/* Newsprint theme overrides — graphite on cool stock */
+:root.newsprint {
+  --vscode-editor-background: #f8f8f6 !important;
+  --vscode-editor-foreground: #24272b !important;
+  --vscode-editorWidget-background: #f8f8f6 !important;
+  --vscode-editorWidget-foreground: #24272b !important;
+}
+
+/* Walnut theme overrides — parchment on walnut */
+:root.walnut {
+  --vscode-editor-background: #120e0b !important;
+  --vscode-editor-foreground: #ede1cd !important;
+  --vscode-editorWidget-background: #120e0b !important;
+  --vscode-editorWidget-foreground: #ede1cd !important;
+}
+
+/* Abyss theme overrides — trench editor colors */
+:root.abyss {
+  --vscode-editor-background: #04090f !important;
+  --vscode-editor-foreground: #dbeaf1 !important;
+  --vscode-editorWidget-background: #04090f !important;
+  --vscode-editorWidget-foreground: #dbeaf1 !important;
+}
+
+/* Understory theme overrides — moss floor editor colors */
+:root.understory {
+  --vscode-editor-background: #0d110c !important;
+  --vscode-editor-foreground: #e4e9d9 !important;
+  --vscode-editorWidget-background: #0d110c !important;
+  --vscode-editorWidget-foreground: #e4e9d9 !important;
+}
+
+/* Haar theme overrides — fog editor colors (after .light so the theme wins) */
+:root.haar {
+  --vscode-editor-background: #f5f7f9 !important;
+  --vscode-editor-foreground: #252d36 !important;
+  --vscode-editorWidget-background: #f5f7f9 !important;
+  --vscode-editorWidget-foreground: #252d36 !important;
+}
+
 /* Additional Monaco editor style overrides */
 .monaco-editor,
 .monaco-editor-background,
diff --git a/frontend/src/styles/themeContrast.test.ts b/frontend/src/styles/themeContrast.test.ts
new file mode 100644
index 00000000..1dc6bd59
--- /dev/null
+++ b/frontend/src/styles/themeContrast.test.ts
@@ -0,0 +1,260 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+import { THEME_CLASSES } from '../contexts/themeContextValue';
+
+/**
+ * Static WCAG contrast gate over the theme tokens in tokens/colors.css.
+ *
+ * Resolves each theme's cascade the same way the browser does (`:root` dark
+ * base → `:root.light` → `:root.<theme>` → OLED child → `.high-contrast`),
+ * composites alpha colours over the surface they sit on, and checks the
+ * ratios that PR #362 measured by hand. New themes register in FULL_THEMES
+ * so text, buttons, focus rings and the 16 ANSI colours are all gated.
+ */
+
+const COLORS_CSS = readFileSync(
+  resolve(dirname(fileURLToPath(import.meta.url)), 'tokens/colors.css'),
+  'utf8',
+).replace(/\/\*[\s\S]*?\*\//g, '');
+
+type Rgb = [number, number, number];
+type Rgba = [number, number, number, number];
+type TokenMap = Map<string, string>;
+
+const AA_TEXT = 4.5;
+const AA_UI = 3;
+const AAA_TEXT = 7;
+
+type ThemeId = keyof typeof THEME_CLASSES;
+// SAFETY: THEME_CLASSES is a closed object literal, so its keys are exactly ThemeId.
+const ALL_THEMES = Object.keys(THEME_CLASSES) as ThemeId[];
+
+// Themes that ship with the full contrast matrix (add new themes here).
+const FULL_THEMES: ThemeId[] = ['folio', 'newsprint', 'walnut'];
+
+const MUTED_FAMILY = [
+  '--color-text-muted',
+  '--color-text-interactive-muted',
+  '--color-text-navigation-muted',
+  '--color-text-navigation-section',
+];
+
+const ANSI = [
+  'red', 'green', 'yellow', 'blue', 'magenta', 'cyan',
+  'bright-black', 'bright-red', 'bright-green', 'bright-yellow', 'bright-blue', 'bright-magenta', 'bright-cyan',
+];
+
+// --- CSS parsing -----------------------------------------------------------
+
+/** All `{ ... }` bodies whose selector list matches `selector` exactly, in source order. */
+function blocksFor(selector: string): string[] {
+  const bodies: string[] = [];
+  for (const match of COLORS_CSS.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    const selectors = match[1].split(',').map((s) => s.trim());
+    if (selectors.includes(selector)) bodies.push(match[2]);
+  }
+  return bodies;
+}
+
+function collectDeclarations(body: string, into: TokenMap): void {
+  for (const decl of body.matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)) {
+    into.set(decl[1], decl[2].trim());
+  }
+}
+
+/** Resolve the token map a browser would see for the given class list. */
+function tokensFor(classes: string[], highContrast = false): TokenMap {
+  const tokens: TokenMap = new Map();
+  for (const body of blocksFor(':root')) collectDeclarations(body, tokens);
+  // Same specificity, so source order decides — mirror it by walking the classes
+  // in the order colors.css declares them (light before the print themes, dark
+  // parents before their OLED children), which THEME_CLASSES already encodes.
+  for (const cls of classes) for (const body of blocksFor(`:root.${cls}`)) collectDeclarations(body, tokens);
+  if (highContrast) {
+    for (const cls of classes) for (const body of blocksFor(`:root.high-contrast.${cls}`)) collectDeclarations(body, tokens);
+  }
+  return tokens;
+}
+
+// --- Colour maths ----------------------------------------------------------
+
+function substituteVars(value: string, tokens: TokenMap, depth = 0): string {
+  if (depth > 16) throw new Error(`var() recursion too deep in ${value}`);
+  const next = value.replace(/var\((--[\w-]+)(?:\s*,\s*([^)]+))?\)/g, (_m, name: string, fallback?: string) => {
+    const resolved = tokens.get(name) ?? fallback;
+    if (resolved === undefined) throw new Error(`Unresolved token ${name}`);
+    return resolved;
+  });
+  return next.includes('var(') ? substituteVars(next, tokens, depth + 1) : next;
+}
+
+function parseColor(raw: string): Rgba {
+  const value = raw.trim();
+  const hex = value.match(/^#([0-9a-f]{3,8})$/i);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3 || h.length === 4) h = h.split('').map((c) => c + c).join('');
+    const n = (i: number) => parseInt(h.slice(i, i + 2), 16);
+    return [n(0), n(2), n(4), h.length === 8 ? n(6) / 255 : 1];
+  }
+  const fn = value.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/i);
+  if (fn) {
+    const alpha = fn[4] === undefined ? 1 : fn[4].endsWith('%') ? parseFloat(fn[4]) / 100 : parseFloat(fn[4]);
+    return [Number(fn[1]), Number(fn[2]), Number(fn[3]), alpha];
+  }
+  if (value === 'transparent') return [0, 0, 0, 0];
+  throw new Error(`Cannot parse colour "${raw}"`);
+}
+
+function resolveColor(name: string, tokens: TokenMap): Rgba {
+  const raw = tokens.get(name);
+  if (raw === undefined) throw new Error(`Token ${name} is not defined`);
+  return parseColor(substituteVars(raw, tokens));
+}
+
+function composite([r, g, b, a]: Rgba, [br, bg, bb]: Rgb): Rgb {
+  return [r * a + br * (1 - a), g * a + bg * (1 - a), b * a + bb * (1 - a)];
+}
+
+function luminance([r, g, b]: Rgb): number {
+  const channel = (c: number) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+
+function contrast(fg: Rgba, bg: Rgba): number {
+  // Backgrounds with alpha are assumed to sit on an opaque page; that is close
+  // enough for the surfaces gated here (all opaque in practice).
+  const solidBg: Rgb = [bg[0], bg[1], bg[2]];
+  const solidFg = composite(fg, solidBg);
+  const [hi, lo] = [luminance(solidFg), luminance(solidBg)].sort((a, b) => b - a);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+function ratioOf(tokens: TokenMap, fg: string, bg: string): number {
+  return contrast(resolveColor(fg, tokens), resolveColor(bg, tokens));
+}
+
+function expectRatio(tokens: TokenMap, fg: string, bg: string, min: number, label: string): void {
+  const ratio = ratioOf(tokens, fg, bg);
+  expect(ratio, `${label}: ${fg} on ${bg} = ${ratio.toFixed(2)}:1, need ≥ ${min}:1`).toBeGreaterThanOrEqual(min);
+}
+
+// --- Tests -----------------------------------------------------------------
+
+describe('theme contrast (tokens/colors.css)', () => {
+  it('declares theme blocks in THEME_CLASSES order so the cascade model matches the browser', () => {
+    // Same specificity everywhere, so source order decides. The resolver
+    // above walks THEME_CLASSES in order; that is only faithful if colors.css
+    // lists each class's block (and its high-contrast block) in that order.
+    for (const theme of ALL_THEMES) {
+      const classes = THEME_CLASSES[theme];
+      for (const prefix of [':root.', ':root.high-contrast.']) {
+        // Not every class owns a block (the dark base is bare `:root`, light-rounded
+        // inherits `.light`'s high-contrast block) — only the blocks that exist must be ordered.
+        const offsets = classes
+          .map((cls) => ({ cls, offset: COLORS_CSS.indexOf(`${prefix}${cls} {`) }))
+          .filter(({ offset }) => offset >= 0);
+        for (let i = 1; i < offsets.length; i += 1) {
+          expect(offsets[i].offset, `${prefix}${offsets[i].cls} must come after ${prefix}${offsets[i - 1].cls}`)
+            .toBeGreaterThan(offsets[i - 1].offset);
+        }
+      }
+    }
+  });
+
+  describe.each(ALL_THEMES)('%s', (theme) => {
+    const tokens = tokensFor(THEME_CLASSES[theme]);
+    const hcTokens = tokensFor(THEME_CLASSES[theme], true);
+
+    it('keeps the muted text family at AA against --color-bg-primary', () => {
+      for (const token of MUTED_FAMILY) expectRatio(tokens, token, '--color-bg-primary', AA_TEXT, theme);
+    });
+
+    it('lifts the muted text family to AAA in high-contrast mode', () => {
+      for (const token of MUTED_FAMILY) expectRatio(hcTokens, token, '--color-bg-primary', AAA_TEXT, `${theme} (high-contrast)`);
+    });
+  });
+
+  describe.each(FULL_THEMES)('%s (full matrix)', (theme) => {
+    const tokens = tokensFor(THEME_CLASSES[theme]);
+
+    it('body text reads on every surface it can land on', () => {
+      const surfaces = [
+        '--color-bg-primary', '--color-bg-secondary', '--color-bg-tertiary', '--color-bg-hover', '--color-bg-active',
+        '--color-bg-chrome', '--color-bg-editor',
+        '--color-surface-primary', '--color-surface-secondary', '--color-surface-tertiary',
+        '--color-card-bg', '--color-card-nested-bg', '--color-modal-bg', '--color-input-bg',
+        '--color-surface-navigation', '--color-surface-navigation-hover',
+      ];
+      for (const bg of surfaces) {
+        for (const fg of ['--color-text-primary', '--color-text-secondary', '--color-text-tertiary', '--color-text-muted']) {
+          expectRatio(tokens, fg, bg, AA_TEXT, theme);
+        }
+      }
+      // Navigation text on the sidebar surfaces
+      for (const bg of ['--color-surface-navigation', '--color-surface-navigation-hover', '--color-surface-navigation-active']) {
+        for (const fg of ['--color-text-navigation-primary', '--color-text-navigation-secondary', '--color-text-navigation-muted', '--color-text-navigation-selected', '--color-text-navigation-section']) {
+          expectRatio(tokens, fg, bg, AA_TEXT, theme);
+        }
+      }
+      expectRatio(tokens, '--color-input-text', '--color-input-bg', AA_TEXT, theme);
+      expectRatio(tokens, '--color-input-placeholder', '--color-input-bg', AA_TEXT, theme);
+    });
+
+    it('links, accents, status and focus meet AA text / 3:1 UI on the page', () => {
+      for (const bg of ['--color-bg-primary', '--color-bg-editor', '--color-bg-chrome', '--color-surface-primary']) {
+        expectRatio(tokens, '--color-interactive-text', bg, AA_TEXT, theme);
+        expectRatio(tokens, '--color-text-interactive-on-dark', bg, AA_TEXT, theme);
+        expectRatio(tokens, '--color-status-neutral', bg, AA_UI, theme);
+        for (const ui of ['--color-interactive-primary', '--color-focus-ring', '--color-border-focus', '--color-status-success', '--color-status-warning', '--color-status-error', '--color-status-info']) {
+          expectRatio(tokens, ui, bg, AA_UI, theme);
+        }
+      }
+    });
+
+    it('buttons keep their label readable in every state', () => {
+      expectRatio(tokens, '--color-button-primary-text', '--color-button-primary-bg', AA_TEXT, theme);
+      expectRatio(tokens, '--color-button-primary-text', '--color-button-primary-hover', AA_TEXT, theme);
+      expectRatio(tokens, '--color-text-on-interactive', '--color-interactive-primary', AA_TEXT, theme);
+      expectRatio(tokens, '--color-text-on-interactive', '--color-interactive-hover', AA_TEXT, theme);
+      expectRatio(tokens, '--color-text-on-interactive', '--color-interactive-active', AA_TEXT, theme);
+      expectRatio(tokens, '--color-button-secondary-text', '--color-button-secondary-bg', AA_TEXT, theme);
+      expectRatio(tokens, '--color-button-secondary-text', '--color-button-secondary-hover', AA_TEXT, theme);
+      expectRatio(tokens, '--color-button-ghost-text', '--color-bg-primary', AA_TEXT, theme);
+      expectRatio(tokens, '--color-button-ghost-text', '--color-button-ghost-hover', AA_TEXT, theme);
+      for (const status of ['success', 'warning', 'error', 'info']) {
+        expectRatio(tokens, `--color-text-on-status-${status}`, `--color-status-${status}`, AA_TEXT, theme);
+      }
+    });
+
+    it('terminal palette reads on the terminal background', () => {
+      expectRatio(tokens, '--color-terminal-fg', '--color-terminal-bg', AA_TEXT, theme);
+      expectRatio(tokens, '--color-terminal-white', '--color-terminal-bg', AA_TEXT, theme);
+      expectRatio(tokens, '--color-terminal-bright-white', '--color-terminal-bg', AA_TEXT, theme);
+      expectRatio(tokens, '--color-terminal-cursor', '--color-terminal-bg', AA_UI, theme);
+      for (const name of ANSI) expectRatio(tokens, `--color-terminal-${name}`, '--color-terminal-bg', AA_UI, theme);
+      // The terminal background must be one of the theme's own surfaces, not a fallback.
+      const termBg = resolveColor('--color-terminal-bg', tokens);
+      const editorBg = resolveColor('--color-bg-editor', tokens);
+      expect(termBg.slice(0, 3)).toEqual(editorBg.slice(0, 3));
+    });
+
+    it('overrides every token the base light and dark themes define (no half-theme fallbacks)', () => {
+      const own: TokenMap = new Map();
+      for (const body of blocksFor(`:root.${theme}`)) collectDeclarations(body, own);
+      const expected = new Set<string>();
+      for (const selector of [':root.light', ':root.terracotta']) {
+        const block: TokenMap = new Map();
+        for (const body of blocksFor(selector)) collectDeclarations(body, block);
+        for (const name of block.keys()) expected.add(name);
+      }
+      const missing = [...expected].filter((name) => !own.has(name));
+      expect(missing, `${theme} is missing: ${missing.join(', ')}`).toEqual([]);
+    });
+  });
+});
diff --git a/frontend/src/styles/tokens/colors.css b/frontend/src/styles/tokens/colors.css
index 18692991..a20c9771 100644
--- a/frontend/src/styles/tokens/colors.css
+++ b/frontend/src/styles/tokens/colors.css
@@ -156,6 +156,317 @@
   --terra-accent8: #d68e6e;
   --terra-accent9: #dea080;
   --terra-accent10: #e6b498;
+
+  /* Synthwave primitives — synthwave ramp */
+  --syn-100: #f1eafc;
+  --syn-200: #d5c9ea;
+  --syn-300: #b5a5d6;
+  --syn-400: #8d79b5;
+  --syn-500: #5b4587;
+  --syn-600: #3d2a60;
+  --syn-700: #2e1d4a;
+  --syn-800: #221538;
+  --syn-850: #1a1029;
+  --syn-900: #120b1f;
+  --syn-950: #0b0714;
+
+  /* Synthwave accent ramp */
+  --syn-accent6: #ff5fd7;
+  --syn-accent7: #ff7ae0;
+  --syn-accent8: #ff94e7;
+  --syn-glow: #3de3ff;
+
+  /* Acid Terminal primitives — acid ramp */
+  --acid-100: #eaf2ea;
+  --acid-200: #cbd6cb;
+  --acid-300: #a3b3a3;
+  --acid-400: #778a77;
+  --acid-500: #4f5c4f;
+  --acid-600: #354035;
+  --acid-700: #283028;
+  --acid-800: #1e221e;
+  --acid-850: #171a17;
+  --acid-900: #111311;
+  --acid-950: #0a0b0a;
+
+  /* Acid Terminal accent ramp */
+  --acid-accent6: #b4ff3a;
+  --acid-accent7: #c6ff63;
+  --acid-accent8: #d6ff8a;
+  --acid-glow: #c6ff63;
+
+  /* Tokyo Rain primitives — tokyo-rain ramp */
+  --rain-100: #e6ebf4;
+  --rain-200: #c3ccdc;
+  --rain-300: #9facc3;
+  --rain-400: #74839f;
+  --rain-500: #4a5878;
+  --rain-600: #2f3c5e;
+  --rain-700: #242e4a;
+  --rain-800: #1a2238;
+  --rain-850: #131a2c;
+  --rain-900: #0d1120;
+  --rain-950: #080b16;
+
+  /* Tokyo Rain accent ramp */
+  --rain-accent6: #ff4f9a;
+  --rain-accent7: #ff6cab;
+  --rain-accent8: #ff8abd;
+  --rain-glow: #5cb3ff;
+
+  /* Folio primitives — warm cream paper and near-black ink (print) */
+  --folio-paper: #f6f0e4;        /* page: body background */
+  --folio-sheet: #fbf7ee;        /* sheet: editor, terminal, cards — brightest surface */
+  --folio-chrome: #efe7d8;       /* margin: sidebar, tab bar */
+  --folio-hover: #e7dcc9;
+  --folio-active: #dfd3be;
+  --folio-ink: #1f1b17;
+  --folio-ink-2: #433c35;
+  --folio-ink-3: #5a524a;
+  --folio-ink-muted: #605850;    /* 6.2:1 on paper, 4.7:1 on active */
+  --folio-ink-disabled: #93897b; /* 3.0:1 on paper (AA large / disabled affordance) */
+  --folio-rule: rgba(31, 27, 23, 0.16);
+  --folio-rule-soft: rgba(31, 27, 23, 0.09);
+  --folio-rule-faint: rgba(31, 27, 23, 0.05);
+
+  /* Folio rubrication — one vermilion accent, used sparingly */
+  --folio-rubric: #b3321c;       /* 5.5:1 on paper; 6.2:1 with white text */
+  --folio-rubric-hover: #9c2a17;
+  --folio-rubric-active: #c53d24;
+  --folio-rubric-text: #a02c18;  /* links — 6.5:1 on paper */
+
+  /* Newsprint primitives — cool grey-white stock, graphite ink, halftone greys */
+  --news-paper: #f1f2f0;
+  --news-sheet: #f8f8f6;
+  --news-chrome: #e8eae7;
+  --news-hover: #dfe2de;
+  --news-active: #d8dcd7;
+  --news-ink: #24272b;
+  --news-ink-2: #43484e;
+  --news-ink-3: #575d64;
+  --news-ink-muted: #585e66;     /* 5.9:1 on paper, 4.7:1 on active */
+  --news-ink-disabled: #878d93;  /* 3.0:1 on paper */
+  --news-rule: rgba(36, 39, 43, 0.18);
+  --news-rule-soft: rgba(36, 39, 43, 0.10);
+  --news-rule-faint: rgba(36, 39, 43, 0.06);
+
+  /* Newsprint accent — a single dark ink blue */
+  --news-blue: #1f4e8c;          /* 7.4:1 with white text */
+  --news-blue-hover: #1a4277;
+  --news-blue-active: #25599e;
+  --news-blue-text: #1c4884;     /* links — 7.4:1 on paper */
+
+  /* Walnut primitives — deep warm brown-black ramp, parchment text */
+  --walnut-950: #120e0b;         /* sunken editor / terminal */
+  --walnut-900: #1a1512;         /* body, chrome */
+  --walnut-850: #221c18;
+  --walnut-800: #2b241f;
+  --walnut-700: #352d27;
+  --walnut-600: #40372f;         /* active / borders — a real step above 700 (1.16:1) */
+  --walnut-500: #4a4037;
+  --walnut-400: #6a5e51;         /* disabled */
+  --walnut-300: #8d7d6a;         /* neutral / bright-black */
+  --walnut-200: #b09f89;         /* muted — 7.0:1 on --walnut-900, 4.5:1 on --walnut-600 */
+  --parchment-300: #b4a48b;      /* tertiary */
+  --parchment-200: #d3c4ab;      /* secondary */
+  --parchment-100: #ede1cd;      /* primary */
+  --parchment-50: #f7efe2;
+
+  /* Walnut accent — brass, carries dark ink text */
+  --brass-500: #c9a24d;          /* 9.4:1 with --walnut-900 text; 7.6:1 on --walnut-900 */
+  --brass-400: #d6b262;
+  --brass-600: #bd9440;
+  --brass-text: #d4ae5c;         /* links — 8.3:1 on --walnut-900 */
+
+  /* Amber CRT primitives — black-brown glass ramp + amber-phosphor accent */
+  --crt-950: #0c0905;
+  --crt-900: #140f08;
+  --crt-850: #1b140a;
+  --crt-800: #241a0d;
+  --crt-700: #332512;
+  --crt-600: #46331a;
+  --crt-500: #66501f;
+  --crt-400: #a07d3a;
+  --crt-300: #b8933d;
+  --crt-200: #d9b25a;
+  --crt-100: #f0d9a8;
+  --crt-amber: #ffb000;         /* P3 phosphor */
+  --crt-amber-bright: #ffc233;
+  --crt-amber-deep: #e69e00;
+
+  /* Teletype primitives — warm paper ramp + brown ink ramp */
+  --tty-paper-50: #fbf8f1;
+  --tty-paper-100: #f5efe2;
+  --tty-paper-200: #ece4d2;
+  --tty-paper-300: #e0d5be;
+  --tty-paper-400: #cdbfa2;
+  --tty-ink-900: #2b2116;
+  --tty-ink-700: #5a4a36;
+  --tty-ink-600: #63533e;
+  --tty-ink-500: #6b5b45;
+  --tty-ink-400: #a3947c;
+  --tty-orange-600: #b5451b;    /* burnt orange — 5.5:1 with white text */
+  --tty-orange-700: #9a3412;
+  --tty-orange-500: #c2410c;
+  --tty-orange-text: #a63a0c;   /* 5.7:1 on --tty-paper-100 */
+  --tty-olive: #4f6b12;
+
+  /* Dot Matrix primitives — deep olive-black ramp + 4-step LCD green ramp */
+  --lcd-950: #0a0d08;
+  --lcd-900: #10150c;
+  --lcd-850: #161d10;
+  --lcd-800: #1c2514;
+  --lcd-700: #27331b;
+  --lcd-600: #354523;
+  --lcd-500: #4b6030;
+  --lcd-green-1: #7f9a52;       /* muted — 5.9:1 on --lcd-900 */
+  --lcd-green-2: #8bac0f;       /* accent */
+  --lcd-green-3: #b9d36a;       /* secondary text */
+  --lcd-green-4: #dcecb0;       /* primary text */
+  --lcd-green-accent-hover: #9bbc0f;
+  --lcd-green-accent-active: #7a9a0c;
+  --lcd-green-text: #a9cd3a;    /* interactive text — 10:1 on --lcd-900 */
+  --lcd-hot: #ff5c72;           /* the one hot accent — errors only */
+
+  /* Haar primitives — cold pre-dawn sea fog (light ramp, blue-grey neutrals) */
+  --haar-50: #f5f7f9;
+  --haar-100: #eceff3;
+  --haar-150: #e2e7ec;
+  --haar-200: #d5dce3;
+  --haar-300: #c1cad3;
+  --haar-400: #93a1ad;
+  --haar-500: #66727e;
+  --haar-600: #505c68;
+  --haar-700: #3a4550;
+  --haar-800: #252d36;
+  --haar-900: #151b21;
+
+  /* Haar accent ramp — steel blue seen through fog */
+  --haar-steel-300: #a9bccf;
+  --haar-steel-400: #7c96ad;
+  --haar-steel-500: #4f6d8a;
+  --haar-steel-600: #3e5a75;
+  --haar-steel-700: #304a62;
+
+  /* Abyss primitives — deep-ocean navy ramp */
+  --abyss-950: #04090f;
+  --abyss-900: #07111c;
+  --abyss-850: #0b1826;
+  --abyss-800: #102030;
+  --abyss-700: #172d40;
+  --abyss-600: #203c52;
+  --abyss-500: #325670;
+  --abyss-400: #6389a2;
+  --abyss-300: #8fb0c5;
+  --abyss-200: #b6cedb;
+  --abyss-100: #dbeaf1;
+
+  /* Abyss accent ramp — bioluminescent sea-glass teal */
+  --abyss-glow-300: #9fe3d8;
+  --abyss-glow-400: #6fcfc1;
+  --abyss-glow-500: #4db8ab;
+
+  /* Understory primitives — moss floor ramp (green-black neutrals) */
+  --under-950: #0d110c;
+  --under-900: #131911;
+  --under-850: #192117;
+  --under-800: #20291d;
+  --under-700: #2a3626;
+  --under-600: #374532;
+  --under-500: #55654c;
+  --under-400: #7f8f73;
+  --under-300: #a4b297;
+  --under-200: #c5ceb8;
+  --under-100: #e4e9d9;
+
+  /* Understory bark ramp — warm brown chrome */
+  --under-bark-850: #1e1914;
+  --under-bark-800: #27201a;
+  --under-bark-700: #352c23;
+  --under-bark-600: #46392e;
+
+  /* Understory accent ramp — pale lichen */
+  --under-lichen-300: #d3dda8;
+  --under-lichen-400: #bfcc8b;
+  --under-lichen-500: #a6b56d;
+
+  /* Colorblind Safe primitives — neutral cool-gray ramp (no hue cast so the
+     Okabe-Ito semantic colors below carry every signal) */
+  --cbs-950: #0b0e12;
+  --cbs-900: #12161b;
+  --cbs-850: #181d23;
+  --cbs-800: #1f252c;
+  --cbs-700: #2a323b;
+  --cbs-600: #3a444f;
+  --cbs-500: #5c6977;
+  --cbs-400: #7d8996;
+  --cbs-300: #a5aeb8;
+  --cbs-200: #c9d0d8;
+  --cbs-100: #e7ebf0;
+
+  /* Okabe & Ito (2008) / Wong (2011) colorblind-safe palette — exact values.
+     Distinguishable under protanopia, deuteranopia and tritanopia. */
+  --okabe-orange: #E69F00;
+  --okabe-sky: #56B4E9;
+  --okabe-green: #009E73;
+  --okabe-yellow: #F0E442;
+  --okabe-blue: #0072B2;
+  --okabe-vermillion: #D55E00;
+  --okabe-purple: #CC79A7;
+  /* Same-hue tints used where the exact value cannot reach 4.5:1 on a dark
+     background (ANSI blue) or where a "bright" ANSI variant is needed. */
+  --okabe-green-lift: #31b588;
+  --okabe-blue-lift: #2a81c3;
+  --okabe-sky-lift: #88d5ff;
+  --okabe-orange-bright: #f2b93f;
+  --okabe-sky-bright: #b3e2fb;
+  --okabe-green-bright: #5ad4a8;
+  --okabe-yellow-bright: #f6ed7e;
+  --okabe-blue-bright: #5aa6e3;
+  --okabe-vermillion-bright: #ee7a2a;
+  --okabe-purple-bright: #de9bc2;
+
+  /* Low Fatigue primitives — warm sepia-dark ramp, mid-dark rather than
+     near-black so text/background contrast stays soft (~10:1, not 18:1) */
+  --lf-950: #1f1b17;
+  --lf-900: #27221d;
+  --lf-850: #2e2923;
+  --lf-800: #36302a;
+  --lf-700: #433b33;
+  --lf-600: #54493f;
+  --lf-500: #6f6154;
+  --lf-400: #94846f;
+  --lf-300: #b3a48c;
+  --lf-200: #cfc1a8;
+  --lf-100: #e6dcc7;
+  --lf-50: #f0e8d8;     /* brightest value in the theme — never pure white */
+
+  /* Low Fatigue accent — honey gold (low blue-light content) */
+  --lf-gold: #d1a54a;
+  --lf-gold-hover: #dbb262;
+  --lf-gold-active: #c39638;
+  --lf-gold-text: #dfb866;
+
+  /* High Legibility primitives — neutral grayscale, every step chosen for a
+     specific contrast target against white (see comments) */
+  --hl-white: #ffffff;
+  --hl-50: #f5f5f5;
+  --hl-100: #ececec;
+  --hl-200: #dcdcdc;
+  --hl-300: #c6c6c6;
+  --hl-400: #8f8f8f;    /* 3.2:1 — disabled (perceivable, still clearly dimmed) */
+  --hl-500: #767676;    /* 4.5:1 — borders, scrollbar thumb */
+  --hl-600: #4f4f4f;    /* 8.2:1 on white, 7.5:1 on --hl-50 — muted text (AAA) */
+  --hl-700: #3b3b3b;    /* 10.9:1 — tertiary text */
+  --hl-800: #262626;    /* 15.3:1 — secondary text */
+  --hl-900: #111111;    /* 18.9:1 — primary text */
+  --hl-blue: #1e40af;   /* 8.2:1 — the ONLY non-state color: links, focus, primary action */
+  --hl-blue-hover: #172f83;
+  --hl-blue-active: #2b5be0;
+  --hl-blue-tint: #e4e8f5;
+  --hl-green: #0b5d27;  /* 8.0:1 */
+  --hl-amber: #7a4b00;  /* 7.4:1 */
+  --hl-red: #a3141b;    /* 7.9:1 */
 }
 
 /* Dark Theme - Pure Black OLED */
@@ -1719,6 +2030,1914 @@
   --color-terminal-bright-white: #F2E4D6;
 }
 
+/* Synthwave Theme — deep violet-black, magenta primary, cyan links/cursor */
+:root.synthwave {
+  /* Backgrounds — TWO-TONE foundation */
+  --color-bg-primary: var(--syn-900);
+  --color-bg-secondary: var(--syn-850);
+  --color-bg-tertiary: var(--syn-700);
+  --color-bg-hover: var(--syn-700);
+  --color-bg-active: var(--syn-600);
+  --color-bg-chrome: var(--syn-900);
+  --color-bg-editor: var(--syn-950);   /* SUNKEN — darker than chrome */
+
+  /* Surfaces */
+  --color-surface-primary: var(--syn-850);
+  --color-surface-secondary: var(--syn-800);
+  --color-surface-tertiary: var(--syn-700);
+  --color-surface-hover: rgba(255, 255, 255, 0.04);
+
+  /* Text — greys carry body copy; neon stays on accents */
+  --color-text-primary: var(--syn-100);
+  --color-text-secondary: var(--syn-200);
+  --color-text-tertiary: var(--syn-300);
+  --color-text-muted: #a08fc9;  /* 6.65:1 on --syn-900 (AA) */
+  --color-text-disabled: var(--syn-500);
+
+  /* Borders */
+  --color-border-primary: var(--syn-700);
+  --color-border-secondary: var(--syn-800);
+  --color-border-hover: var(--syn-600);
+  --color-border-focus: var(--syn-glow);
+
+  /* Interactive — neon primary on interactive surfaces only */
+  --color-interactive-primary: var(--syn-accent6);
+  --color-interactive-hover: var(--syn-accent7);
+  --color-interactive-active: var(--syn-accent8);
+  --color-interactive-text: var(--syn-glow);
+  --color-focus-ring: var(--syn-glow);
+  --color-interactive-rgb: 255 95 215;
+
+  /* Interactive on dark */
+  --color-text-interactive-on-dark: var(--syn-glow);
+  --color-text-interactive-on-dark-hover: var(--syn-accent6);
+  --color-text-interactive-on-dark-active: var(--syn-glow);
+  --color-text-interactive-on-dark-focus: var(--syn-glow);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--syn-850);
+  --color-surface-interactive-hover: var(--syn-700);
+  --color-interactive-surface: rgba(255, 95, 215, 0.15);
+  --color-interactive-surface-hover: rgba(255, 95, 215, 0.25);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: rgba(255, 255, 255, 0.06);
+  --color-border-interactive: rgba(255, 255, 255, 0.1);
+  --color-interactive-border: rgba(255, 95, 215, 0.5);
+  --color-interactive-border-hover: rgba(255, 95, 215, 0.7);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: #a08fc9;  /* 6.65:1 on --syn-900 (AA) */
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(255, 95, 215, 0.4);
+
+  /* Status */
+  --color-status-success: #5ee89a;
+  --color-status-success-hover: #3fd483;
+  --color-status-warning: #ffc857;
+  --color-status-warning-hover: #f0b43a;
+  --color-status-error: #ff5c7a;
+  --color-status-error-hover: #f03d60;
+  --color-status-info: #3de3ff;
+  --color-status-neutral: #8d79b5;
+
+  /* Context-Aware Text — neon fills take dark text (white fails AA on them) */
+  --color-text-on-primary: var(--syn-100);
+  --color-text-on-secondary: var(--syn-200);
+  --color-text-on-tertiary: var(--syn-200);
+  --color-text-on-surface: var(--syn-200);
+  --color-text-on-interactive: #14081f;
+  --color-text-on-status-success: #14081f;
+  --color-text-on-status-warning: #14081f;
+  --color-text-on-status-error: #14081f;
+  --color-text-on-status-info: #14081f;
+  --color-text-on-navigation: var(--syn-200);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--syn-accent6);
+  --color-button-primary-hover: var(--syn-accent7);
+  --color-button-primary-text: #14081f;
+  --color-button-secondary-bg: var(--syn-700);
+  --color-button-secondary-hover: var(--syn-600);
+  --color-button-secondary-text: var(--syn-200);
+  --color-button-ghost-hover: var(--syn-800);
+  --color-button-ghost-text: var(--syn-300);
+
+  /* Cards */
+  --color-card-bg: var(--syn-850);
+  --color-card-border: var(--syn-700);
+  --color-card-nested-bg: var(--syn-700);
+
+  /* Forms */
+  --color-input-bg: var(--syn-950);
+  --color-input-border: var(--syn-600);
+  --color-input-focus: var(--syn-glow);
+  --color-input-text: var(--syn-100);
+  --color-input-placeholder: var(--syn-400);
+
+  /* Modal */
+  --color-modal-overlay: rgba(0, 0, 0, 0.6);
+  --color-modal-bg: var(--syn-850);
+
+  /* Navigation */
+  --color-surface-navigation: var(--syn-900);
+  --color-surface-navigation-hover: var(--syn-850);
+  --color-surface-navigation-active: var(--syn-700);
+  --color-surface-navigation-selected: rgba(255, 95, 215, 0.15);
+  --color-surface-navigation-selected-hover: rgba(255, 95, 215, 0.2);
+  --color-text-navigation-primary: var(--syn-200);
+  --color-text-navigation-secondary: var(--syn-300);
+  --color-text-navigation-muted: #a08fc9;  /* 6.65:1 on --syn-900 (AA) */
+  --color-text-navigation-selected: var(--syn-100);
+  --color-text-navigation-hover: var(--syn-100);
+  --color-text-navigation-section: #a08fc9;  /* 6.65:1 on --syn-900 (AA) */
+  --color-text-navigation-brand: var(--syn-300);
+  --color-border-navigation: var(--syn-700);
+  --color-divider-navigation: var(--syn-800);
+  --color-divider-navigation-subtle: rgba(255, 255, 255, 0.03);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--syn-900);
+  --color-scrollbar-thumb: rgba(255, 255, 255, 0.15);
+  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.30);
+
+  /* Tab indicator — UNDERLINE mode */
+  --tab-indicator-color: var(--syn-accent6);
+  --tab-indicator-height: 4px;
+
+  /* Terminal — every ANSI color ≥ 4.5:1 on --syn-950 */
+  --color-terminal-bg: var(--syn-950);
+  --color-terminal-fg: var(--syn-100);
+  --color-terminal-cursor: var(--syn-glow);
+  --color-terminal-selection-bg: rgba(255, 95, 215, 0.28);
+  --color-terminal-black: var(--syn-950);
+  --color-terminal-red: #ff5c7a;
+  --color-terminal-green: #5ee89a;
+  --color-terminal-yellow: #ffd166;
+  --color-terminal-blue: #7f9cff;
+  --color-terminal-magenta: #ff5fd7;
+  --color-terminal-cyan: #3de3ff;
+  --color-terminal-white: var(--syn-100);
+  --color-terminal-bright-black: var(--syn-400);
+  --color-terminal-bright-red: #ff8aa0;
+  --color-terminal-bright-green: #8ff5b8;
+  --color-terminal-bright-yellow: #ffe08a;
+  --color-terminal-bright-blue: #a6b8ff;
+  --color-terminal-bright-magenta: #ff8ee6;
+  --color-terminal-bright-cyan: #86efff;
+  --color-terminal-bright-white: #ffffff;
+}
+
+/* Acid Terminal Theme — charcoal-black, electric lime primary, amber secondary */
+:root.acid {
+  /* Backgrounds — TWO-TONE foundation */
+  --color-bg-primary: var(--acid-900);
+  --color-bg-secondary: var(--acid-850);
+  --color-bg-tertiary: var(--acid-700);
+  --color-bg-hover: var(--acid-700);
+  --color-bg-active: var(--acid-600);
+  --color-bg-chrome: var(--acid-900);
+  --color-bg-editor: var(--acid-950);   /* SUNKEN — darker than chrome */
+
+  /* Surfaces */
+  --color-surface-primary: var(--acid-850);
+  --color-surface-secondary: var(--acid-800);
+  --color-surface-tertiary: var(--acid-700);
+  --color-surface-hover: rgba(255, 255, 255, 0.04);
+
+  /* Text — greys carry body copy; neon stays on accents */
+  --color-text-primary: var(--acid-100);
+  --color-text-secondary: var(--acid-200);
+  --color-text-tertiary: var(--acid-300);
+  --color-text-muted: #8a9c8a;  /* 6.40:1 on --acid-900 (AA) */
+  --color-text-disabled: var(--acid-500);
+
+  /* Borders */
+  --color-border-primary: var(--acid-700);
+  --color-border-secondary: var(--acid-800);
+  --color-border-hover: var(--acid-600);
+  --color-border-focus: var(--acid-glow);
+
+  /* Interactive — neon primary on interactive surfaces only */
+  --color-interactive-primary: var(--acid-accent6);
+  --color-interactive-hover: var(--acid-accent7);
+  --color-interactive-active: var(--acid-accent8);
+  --color-interactive-text: var(--acid-glow);
+  --color-focus-ring: var(--acid-glow);
+  --color-interactive-rgb: 180 255 58;
+
+  /* Interactive on dark */
+  --color-text-interactive-on-dark: var(--acid-glow);
+  --color-text-interactive-on-dark-hover: var(--acid-accent6);
+  --color-text-interactive-on-dark-active: var(--acid-glow);
+  --color-text-interactive-on-dark-focus: var(--acid-glow);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--acid-850);
+  --color-surface-interactive-hover: var(--acid-700);
+  --color-interactive-surface: rgba(180, 255, 58, 0.15);
+  --color-interactive-surface-hover: rgba(180, 255, 58, 0.25);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: rgba(255, 255, 255, 0.06);
+  --color-border-interactive: rgba(255, 255, 255, 0.1);
+  --color-interactive-border: rgba(180, 255, 58, 0.5);
+  --color-interactive-border-hover: rgba(180, 255, 58, 0.7);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: #8a9c8a;  /* 6.40:1 on --acid-900 (AA) */
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(180, 255, 58, 0.4);
+
+  /* Status */
+  --color-status-success: #7ff26a;
+  --color-status-success-hover: #62dd4c;
+  --color-status-warning: #ffb020;
+  --color-status-warning-hover: #f09c00;
+  --color-status-error: #ff6363;
+  --color-status-error-hover: #ea4747;
+  --color-status-info: #5ee0d0;
+  --color-status-neutral: #778a77;
+
+  /* Context-Aware Text — neon fills take dark text (white fails AA on them) */
+  --color-text-on-primary: var(--acid-100);
+  --color-text-on-secondary: var(--acid-200);
+  --color-text-on-tertiary: var(--acid-200);
+  --color-text-on-surface: var(--acid-200);
+  --color-text-on-interactive: #0a0b0a;
+  --color-text-on-status-success: #0a0b0a;
+  --color-text-on-status-warning: #0a0b0a;
+  --color-text-on-status-error: #0a0b0a;
+  --color-text-on-status-info: #0a0b0a;
+  --color-text-on-navigation: var(--acid-200);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--acid-accent6);
+  --color-button-primary-hover: var(--acid-accent7);
+  --color-button-primary-text: #0a0b0a;
+  --color-button-secondary-bg: var(--acid-700);
+  --color-button-secondary-hover: var(--acid-600);
+  --color-button-secondary-text: var(--acid-200);
+  --color-button-ghost-hover: var(--acid-800);
+  --color-button-ghost-text: var(--acid-300);
+
+  /* Cards */
+  --color-card-bg: var(--acid-850);
+  --color-card-border: var(--acid-700);
+  --color-card-nested-bg: var(--acid-700);
+
+  /* Forms */
+  --color-input-bg: var(--acid-950);
+  --color-input-border: var(--acid-600);
+  --color-input-focus: var(--acid-glow);
+  --color-input-text: var(--acid-100);
+  --color-input-placeholder: var(--acid-400);
+
+  /* Modal */
+  --color-modal-overlay: rgba(0, 0, 0, 0.6);
+  --color-modal-bg: var(--acid-850);
+
+  /* Navigation */
+  --color-surface-navigation: var(--acid-900);
+  --color-surface-navigation-hover: var(--acid-850);
+  --color-surface-navigation-active: var(--acid-700);
+  --color-surface-navigation-selected: rgba(180, 255, 58, 0.15);
+  --color-surface-navigation-selected-hover: rgba(180, 255, 58, 0.2);
+  --color-text-navigation-primary: var(--acid-200);
+  --color-text-navigation-secondary: var(--acid-300);
+  --color-text-navigation-muted: #8a9c8a;  /* 6.40:1 on --acid-900 (AA) */
+  --color-text-navigation-selected: var(--acid-100);
+  --color-text-navigation-hover: var(--acid-100);
+  --color-text-navigation-section: #8a9c8a;  /* 6.40:1 on --acid-900 (AA) */
+  --color-text-navigation-brand: var(--acid-300);
+  --color-border-navigation: var(--acid-700);
+  --color-divider-navigation: var(--acid-800);
+  --color-divider-navigation-subtle: rgba(255, 255, 255, 0.03);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--acid-900);
+  --color-scrollbar-thumb: rgba(255, 255, 255, 0.15);
+  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.30);
+
+  /* Tab indicator — UNDERLINE mode */
+  --tab-indicator-color: var(--acid-accent6);
+  --tab-indicator-height: 4px;
+
+  /* Terminal — every ANSI color ≥ 4.5:1 on --acid-950 */
+  --color-terminal-bg: var(--acid-950);
+  --color-terminal-fg: var(--acid-100);
+  --color-terminal-cursor: var(--acid-glow);
+  --color-terminal-selection-bg: rgba(180, 255, 58, 0.24);
+  --color-terminal-black: var(--acid-950);
+  --color-terminal-red: #ff6363;
+  --color-terminal-green: #7ff26a;
+  --color-terminal-yellow: #ffb020;
+  --color-terminal-blue: #7fb2ff;
+  --color-terminal-magenta: #d99cff;
+  --color-terminal-cyan: #5ee0d0;
+  --color-terminal-white: var(--acid-100);
+  --color-terminal-bright-black: var(--acid-400);
+  --color-terminal-bright-red: #ff8f8f;
+  --color-terminal-bright-green: #a8f797;
+  --color-terminal-bright-yellow: #ffc95c;
+  --color-terminal-bright-blue: #a6c9ff;
+  --color-terminal-bright-magenta: #e6bbff;
+  --color-terminal-bright-cyan: #8fece0;
+  --color-terminal-bright-white: #ffffff;
+}
+
+/* Tokyo Rain Theme — blue-black, signage pink primary, neon blue links, cool grey text */
+:root.tokyo-rain {
+  /* Backgrounds — TWO-TONE foundation */
+  --color-bg-primary: var(--rain-900);
+  --color-bg-secondary: var(--rain-850);
+  --color-bg-tertiary: var(--rain-700);
+  --color-bg-hover: var(--rain-700);
+  --color-bg-active: var(--rain-600);
+  --color-bg-chrome: var(--rain-900);
+  --color-bg-editor: var(--rain-950);   /* SUNKEN — darker than chrome */
+
+  /* Surfaces */
+  --color-surface-primary: var(--rain-850);
+  --color-surface-secondary: var(--rain-800);
+  --color-surface-tertiary: var(--rain-700);
+  --color-surface-hover: rgba(255, 255, 255, 0.04);
+
+  /* Text — greys carry body copy; neon stays on accents */
+  --color-text-primary: var(--rain-100);
+  --color-text-secondary: var(--rain-200);
+  --color-text-tertiary: var(--rain-300);
+  --color-text-muted: #8896b3;  /* 6.31:1 on --rain-900 (AA) */
+  --color-text-disabled: var(--rain-500);
+
+  /* Borders */
+  --color-border-primary: var(--rain-700);
+  --color-border-secondary: var(--rain-800);
+  --color-border-hover: var(--rain-600);
+  --color-border-focus: var(--rain-glow);
+
+  /* Interactive — neon primary on interactive surfaces only */
+  --color-interactive-primary: var(--rain-accent6);
+  --color-interactive-hover: var(--rain-accent7);
+  --color-interactive-active: var(--rain-accent8);
+  --color-interactive-text: var(--rain-glow);
+  --color-focus-ring: var(--rain-glow);
+  --color-interactive-rgb: 255 79 154;
+
+  /* Interactive on dark */
+  --color-text-interactive-on-dark: var(--rain-glow);
+  --color-text-interactive-on-dark-hover: var(--rain-accent6);
+  --color-text-interactive-on-dark-active: var(--rain-glow);
+  --color-text-interactive-on-dark-focus: var(--rain-glow);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--rain-850);
+  --color-surface-interactive-hover: var(--rain-700);
+  --color-interactive-surface: rgba(255, 79, 154, 0.15);
+  --color-interactive-surface-hover: rgba(255, 79, 154, 0.25);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: rgba(255, 255, 255, 0.06);
+  --color-border-interactive: rgba(255, 255, 255, 0.1);
+  --color-interactive-border: rgba(255, 79, 154, 0.5);
+  --color-interactive-border-hover: rgba(255, 79, 154, 0.7);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: #8896b3;  /* 6.31:1 on --rain-900 (AA) */
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(255, 79, 154, 0.4);
+
+  /* Status */
+  --color-status-success: #4ee0a3;
+  --color-status-success-hover: #31cb8c;
+  --color-status-warning: #ffc45c;
+  --color-status-warning-hover: #f0ad3a;
+  --color-status-error: #ff5f7a;
+  --color-status-error-hover: #f04160;
+  --color-status-info: #5cb3ff;
+  --color-status-neutral: #74839f;
+
+  /* Context-Aware Text — neon fills take dark text (white fails AA on them) */
+  --color-text-on-primary: var(--rain-100);
+  --color-text-on-secondary: var(--rain-200);
+  --color-text-on-tertiary: var(--rain-200);
+  --color-text-on-surface: var(--rain-200);
+  --color-text-on-interactive: #0d1120;
+  --color-text-on-status-success: #0d1120;
+  --color-text-on-status-warning: #0d1120;
+  --color-text-on-status-error: #0d1120;
+  --color-text-on-status-info: #0d1120;
+  --color-text-on-navigation: var(--rain-200);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--rain-accent6);
+  --color-button-primary-hover: var(--rain-accent7);
+  --color-button-primary-text: #0d1120;
+  --color-button-secondary-bg: var(--rain-700);
+  --color-button-secondary-hover: var(--rain-600);
+  --color-button-secondary-text: var(--rain-200);
+  --color-button-ghost-hover: var(--rain-800);
+  --color-button-ghost-text: var(--rain-300);
+
+  /* Cards */
+  --color-card-bg: var(--rain-850);
+  --color-card-border: var(--rain-700);
+  --color-card-nested-bg: var(--rain-700);
+
+  /* Forms */
+  --color-input-bg: var(--rain-950);
+  --color-input-border: var(--rain-600);
+  --color-input-focus: var(--rain-glow);
+  --color-input-text: var(--rain-100);
+  --color-input-placeholder: var(--rain-400);
+
+  /* Modal */
+  --color-modal-overlay: rgba(0, 0, 0, 0.6);
+  --color-modal-bg: var(--rain-850);
+
+  /* Navigation */
+  --color-surface-navigation: var(--rain-900);
+  --color-surface-navigation-hover: var(--rain-850);
+  --color-surface-navigation-active: var(--rain-700);
+  --color-surface-navigation-selected: rgba(255, 79, 154, 0.15);
+  --color-surface-navigation-selected-hover: rgba(255, 79, 154, 0.2);
+  --color-text-navigation-primary: var(--rain-200);
+  --color-text-navigation-secondary: var(--rain-300);
+  --color-text-navigation-muted: #8896b3;  /* 6.31:1 on --rain-900 (AA) */
+  --color-text-navigation-selected: var(--rain-100);
+  --color-text-navigation-hover: var(--rain-100);
+  --color-text-navigation-section: #8896b3;  /* 6.31:1 on --rain-900 (AA) */
+  --color-text-navigation-brand: var(--rain-300);
+  --color-border-navigation: var(--rain-700);
+  --color-divider-navigation: var(--rain-800);
+  --color-divider-navigation-subtle: rgba(255, 255, 255, 0.03);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--rain-900);
+  --color-scrollbar-thumb: rgba(255, 255, 255, 0.15);
+  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.30);
+
+  /* Tab indicator — UNDERLINE mode */
+  --tab-indicator-color: var(--rain-accent6);
+  --tab-indicator-height: 4px;
+
+  /* Terminal — every ANSI color ≥ 4.5:1 on --rain-950 */
+  --color-terminal-bg: var(--rain-950);
+  --color-terminal-fg: var(--rain-100);
+  --color-terminal-cursor: var(--rain-glow);
+  --color-terminal-selection-bg: rgba(92, 179, 255, 0.28);
+  --color-terminal-black: var(--rain-950);
+  --color-terminal-red: #ff5f7a;
+  --color-terminal-green: #4ee0a3;
+  --color-terminal-yellow: #ffc45c;
+  --color-terminal-blue: #5cb3ff;
+  --color-terminal-magenta: #ff6fb0;
+  --color-terminal-cyan: #4fe0e6;
+  --color-terminal-white: var(--rain-100);
+  --color-terminal-bright-black: var(--rain-400);
+  --color-terminal-bright-red: #ff8da1;
+  --color-terminal-bright-green: #84ecbf;
+  --color-terminal-bright-yellow: #ffd68a;
+  --color-terminal-bright-blue: #8ecbff;
+  --color-terminal-bright-magenta: #ff9bc9;
+  --color-terminal-bright-cyan: #8aecf0;
+  --color-terminal-bright-white: #ffffff;
+}
+
+/* Folio Theme — paper & ink: warm cream stock, near-black ink, vermilion rubrication */
+:root.folio {
+  /* Backgrounds — page / sheet / margin tonal steps */
+  --color-bg-primary: var(--folio-paper);
+  --color-bg-secondary: var(--folio-chrome);
+  --color-bg-tertiary: var(--folio-hover);
+  --color-bg-hover: var(--folio-hover);
+  --color-bg-active: var(--folio-active);
+  --color-bg-chrome: var(--folio-chrome);
+  --color-bg-editor: var(--folio-sheet);   /* the sheet is the brightest surface */
+
+  /* Surfaces */
+  --color-surface-primary: var(--folio-sheet);
+  --color-surface-secondary: var(--folio-paper);
+  --color-surface-tertiary: var(--folio-chrome);
+  --color-surface-hover: rgba(31, 27, 23, 0.05);
+
+  /* Text — ink */
+  --color-text-primary: var(--folio-ink);
+  --color-text-secondary: var(--folio-ink-2);
+  --color-text-tertiary: var(--folio-ink-3);
+  --color-text-muted: var(--folio-ink-muted);
+  --color-text-disabled: var(--folio-ink-disabled);
+
+  /* Borders — faint rule lines */
+  --color-border-primary: var(--folio-rule);
+  --color-border-secondary: var(--folio-rule-soft);
+  --color-border-tertiary: var(--folio-rule-faint);
+  --color-border-hover: rgba(31, 27, 23, 0.24);
+  --color-border-focus: var(--folio-rubric);
+
+  /* Interactive — single rubrication accent */
+  --color-interactive: var(--folio-rubric);
+  --color-interactive-primary: var(--folio-rubric);
+  --color-interactive-hover: var(--folio-rubric-hover);
+  --color-interactive-active: var(--folio-rubric-active);
+  --color-interactive-text: var(--folio-rubric-text);
+  --color-focus-ring: var(--folio-rubric);
+  --color-interactive-rgb: 179 50 28;
+
+  /* Interactive on dark surfaces */
+  --color-text-interactive-on-dark: var(--folio-rubric-text);
+  --color-text-interactive-on-dark-hover: var(--folio-rubric-hover);
+  --color-text-interactive-on-dark-active: var(--folio-rubric-text);
+  --color-text-interactive-on-dark-focus: var(--folio-rubric-text);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--folio-chrome);
+  --color-surface-interactive-hover: var(--folio-hover);
+  --color-interactive-surface: rgba(179, 50, 28, 0.10);
+  --color-interactive-surface-hover: rgba(179, 50, 28, 0.16);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: var(--folio-rule-soft);
+  --color-border-interactive: var(--folio-rule);
+  --color-interactive-border: var(--folio-rubric);
+  --color-interactive-border-hover: var(--folio-rubric-hover);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: var(--folio-ink-muted);
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(179, 50, 28, 0.35);
+
+  /* Status — printed, low saturation */
+  --color-status-success: #3d7a3a;        /* 4.6:1 on paper */
+  --color-status-success-hover: #326530;
+  --color-status-warning: #8a5f10;        /* 5.0:1 on paper */
+  --color-status-warning-hover: #714d0c;
+  --color-status-error: var(--folio-rubric);
+  --color-status-error-hover: var(--folio-rubric-hover);
+  --color-status-info: var(--folio-rubric-text);
+  --color-status-neutral: var(--folio-ink-muted);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--folio-ink);
+  --color-text-on-secondary: var(--folio-ink);
+  --color-text-on-tertiary: var(--folio-ink-2);
+  --color-text-on-surface: var(--folio-ink);
+  --color-text-on-interactive: rgb(255 255 255);
+  --color-text-on-status-success: rgb(255 255 255);
+  --color-text-on-status-warning: rgb(255 255 255);
+  --color-text-on-status-error: rgb(255 255 255);
+  --color-text-on-status-info: rgb(255 255 255);
+  --color-text-on-navigation: var(--folio-ink);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--folio-rubric);
+  --color-button-primary-hover: var(--folio-rubric-hover);
+  --color-button-primary-text: rgb(255 255 255);
+  --color-button-secondary-bg: var(--folio-chrome);
+  --color-button-secondary-hover: var(--folio-hover);
+  --color-button-secondary-text: var(--folio-ink);
+  --color-button-ghost-hover: var(--folio-hover);
+  --color-button-ghost-text: var(--folio-ink-2);
+
+  /* Cards */
+  --color-card-bg: var(--folio-sheet);
+  --color-card-border: var(--folio-rule);
+  --color-card-nested-bg: var(--folio-paper);
+
+  /* Forms */
+  --color-input-bg: var(--folio-sheet);
+  --color-input-border: var(--folio-rule);
+  --color-input-focus: var(--folio-rubric);
+  --color-input-text: var(--folio-ink);
+  --color-input-placeholder: var(--folio-ink-muted);
+
+  /* Modal */
+  --color-modal-overlay: rgba(31, 27, 23, 0.45);
+  --color-modal-bg: var(--folio-sheet);
+
+  /* Navigation — the margin */
+  --color-surface-navigation: var(--folio-chrome);
+  --color-surface-navigation-hover: var(--folio-hover);
+  --color-surface-navigation-active: var(--folio-active);
+  --color-surface-navigation-selected: rgba(179, 50, 28, 0.10);
+  --color-surface-navigation-selected-hover: rgba(179, 50, 28, 0.16);
+  --color-text-navigation-primary: var(--folio-ink);
+  --color-text-navigation-secondary: var(--folio-ink-2);
+  --color-text-navigation-muted: var(--folio-ink-muted);
+  --color-text-navigation-selected: var(--folio-ink);
+  --color-text-navigation-hover: var(--folio-ink);
+  --color-text-navigation-section: var(--folio-ink-muted);
+  --color-text-navigation-brand: var(--folio-ink-3);
+  --color-border-navigation: var(--folio-rule);
+  --color-divider-navigation: var(--folio-rule-soft);
+  --color-divider-navigation-subtle: var(--folio-rule-faint);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--folio-paper);
+  --color-scrollbar-thumb: rgba(31, 27, 23, 0.18);
+  --color-scrollbar-thumb-hover: rgba(31, 27, 23, 0.32);
+
+  /* Tab indicator — a rubricated rule under the active tab */
+  --tab-indicator-color: var(--folio-rubric);
+  --tab-indicator-height: 2px;
+
+  /* Terminal — ink on the sheet; every colour ≥ 3:1, text ≥ 4.5:1 on --folio-sheet */
+  --color-terminal-bg: var(--folio-sheet);
+  --color-terminal-fg: var(--folio-ink);
+  --color-terminal-cursor: var(--folio-rubric);
+  --color-terminal-black: var(--folio-sheet);
+  --color-terminal-red: #a83324;
+  --color-terminal-green: #3f6d33;
+  --color-terminal-yellow: #805a10;
+  --color-terminal-blue: #2f5a86;
+  --color-terminal-magenta: #7a4478;
+  --color-terminal-cyan: #286864;
+  --color-terminal-white: var(--folio-ink-3);
+  --color-terminal-bright-black: var(--folio-ink-muted);
+  --color-terminal-bright-red: #8f2a1d;
+  --color-terminal-bright-green: #2f5a26;
+  --color-terminal-bright-yellow: #6b4a0a;
+  --color-terminal-bright-blue: #234870;
+  --color-terminal-bright-magenta: #623560;
+  --color-terminal-bright-cyan: #1c5350;
+  --color-terminal-bright-white: rgb(0 0 0);
+  --color-terminal-selection-bg: #b3321c33;
+}
+
+/* Newsprint Theme — cool grey-white stock, graphite ink, halftone greys, ink-blue accent */
+:root.newsprint {
+  /* Backgrounds — stock / sheet / halftone tonal steps */
+  --color-bg-primary: var(--news-paper);
+  --color-bg-secondary: var(--news-chrome);
+  --color-bg-tertiary: var(--news-hover);
+  --color-bg-hover: var(--news-hover);
+  --color-bg-active: var(--news-active);
+  --color-bg-chrome: var(--news-chrome);
+  --color-bg-editor: var(--news-sheet);
+
+  /* Surfaces */
+  --color-surface-primary: var(--news-sheet);
+  --color-surface-secondary: var(--news-paper);
+  --color-surface-tertiary: var(--news-chrome);
+  --color-surface-hover: rgba(36, 39, 43, 0.05);
+
+  /* Text — graphite */
+  --color-text-primary: var(--news-ink);
+  --color-text-secondary: var(--news-ink-2);
+  --color-text-tertiary: var(--news-ink-3);
+  --color-text-muted: var(--news-ink-muted);
+  --color-text-disabled: var(--news-ink-disabled);
+
+  /* Borders — column rules */
+  --color-border-primary: var(--news-rule);
+  --color-border-secondary: var(--news-rule-soft);
+  --color-border-tertiary: var(--news-rule-faint);
+  --color-border-hover: rgba(36, 39, 43, 0.26);
+  --color-border-focus: var(--news-blue);
+
+  /* Interactive — single ink-blue accent */
+  --color-interactive: var(--news-blue);
+  --color-interactive-primary: var(--news-blue);
+  --color-interactive-hover: var(--news-blue-hover);
+  --color-interactive-active: var(--news-blue-active);
+  --color-interactive-text: var(--news-blue-text);
+  --color-focus-ring: var(--news-blue);
+  --color-interactive-rgb: 31 78 140;
+
+  /* Interactive on dark surfaces */
+  --color-text-interactive-on-dark: var(--news-blue-text);
+  --color-text-interactive-on-dark-hover: var(--news-blue-hover);
+  --color-text-interactive-on-dark-active: var(--news-blue-text);
+  --color-text-interactive-on-dark-focus: var(--news-blue-text);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--news-chrome);
+  --color-surface-interactive-hover: var(--news-hover);
+  --color-interactive-surface: rgba(31, 78, 140, 0.10);
+  --color-interactive-surface-hover: rgba(31, 78, 140, 0.16);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: var(--news-rule-soft);
+  --color-border-interactive: var(--news-rule);
+  --color-interactive-border: var(--news-blue);
+  --color-interactive-border-hover: var(--news-blue-hover);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: var(--news-ink-muted);
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(31, 78, 140, 0.35);
+
+  /* Status — printed, low saturation */
+  --color-status-success: #2f6f3a;        /* 5.2:1 on stock */
+  --color-status-success-hover: #275c30;
+  --color-status-warning: #7d5a12;        /* 5.4:1 on stock */
+  --color-status-warning-hover: #66490e;
+  --color-status-error: #a83a3a;          /* 5.3:1 on stock */
+  --color-status-error-hover: #8c2f2f;
+  --color-status-info: var(--news-blue-text);
+  --color-status-neutral: var(--news-ink-muted);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--news-ink);
+  --color-text-on-secondary: var(--news-ink);
+  --color-text-on-tertiary: var(--news-ink-2);
+  --color-text-on-surface: var(--news-ink);
+  --color-text-on-interactive: rgb(255 255 255);
+  --color-text-on-status-success: rgb(255 255 255);
+  --color-text-on-status-warning: rgb(255 255 255);
+  --color-text-on-status-error: rgb(255 255 255);
+  --color-text-on-status-info: rgb(255 255 255);
+  --color-text-on-navigation: var(--news-ink);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--news-blue);
+  --color-button-primary-hover: var(--news-blue-hover);
+  --color-button-primary-text: rgb(255 255 255);
+  --color-button-secondary-bg: var(--news-chrome);
+  --color-button-secondary-hover: var(--news-hover);
+  --color-button-secondary-text: var(--news-ink);
+  --color-button-ghost-hover: var(--news-hover);
+  --color-button-ghost-text: var(--news-ink-2);
+
+  /* Cards */
+  --color-card-bg: var(--news-sheet);
+  --color-card-border: var(--news-rule);
+  --color-card-nested-bg: var(--news-paper);
+
+  /* Forms */
+  --color-input-bg: var(--news-sheet);
+  --color-input-border: var(--news-rule);
+  --color-input-focus: var(--news-blue);
+  --color-input-text: var(--news-ink);
+  --color-input-placeholder: var(--news-ink-muted);
+
+  /* Modal */
+  --color-modal-overlay: rgba(36, 39, 43, 0.45);
+  --color-modal-bg: var(--news-sheet);
+
+  /* Navigation — halftone column */
+  --color-surface-navigation: var(--news-chrome);
+  --color-surface-navigation-hover: var(--news-hover);
+  --color-surface-navigation-active: var(--news-active);
+  --color-surface-navigation-selected: rgba(31, 78, 140, 0.10);
+  --color-surface-navigation-selected-hover: rgba(31, 78, 140, 0.16);
+  --color-text-navigation-primary: var(--news-ink);
+  --color-text-navigation-secondary: var(--news-ink-2);
+  --color-text-navigation-muted: var(--news-ink-muted);
+  --color-text-navigation-selected: var(--news-ink);
+  --color-text-navigation-hover: var(--news-ink);
+  --color-text-navigation-section: var(--news-ink-muted);
+  --color-text-navigation-brand: var(--news-ink-3);
+  --color-border-navigation: var(--news-rule);
+  --color-divider-navigation: var(--news-rule-soft);
+  --color-divider-navigation-subtle: var(--news-rule-faint);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--news-paper);
+  --color-scrollbar-thumb: rgba(36, 39, 43, 0.18);
+  --color-scrollbar-thumb-hover: rgba(36, 39, 43, 0.32);
+
+  /* Tab indicator — ink-blue rule under the active tab */
+  --tab-indicator-color: var(--news-blue);
+  --tab-indicator-height: 2px;
+
+  /* Terminal — graphite on the sheet; every colour ≥ 3:1, text ≥ 4.5:1 on --news-sheet */
+  --color-terminal-bg: var(--news-sheet);
+  --color-terminal-fg: var(--news-ink);
+  --color-terminal-cursor: var(--news-blue);
+  --color-terminal-black: var(--news-sheet);
+  --color-terminal-red: #a83a3a;
+  --color-terminal-green: #3a7040;
+  --color-terminal-yellow: #7d5a12;
+  --color-terminal-blue: var(--news-blue);
+  --color-terminal-magenta: #6f4a86;
+  --color-terminal-cyan: #2a6a72;
+  --color-terminal-white: var(--news-ink-3);
+  --color-terminal-bright-black: var(--news-ink-muted);
+  --color-terminal-bright-red: #8c2f2f;
+  --color-terminal-bright-green: #2e5c33;
+  --color-terminal-bright-yellow: #66490e;
+  --color-terminal-bright-blue: #183f73;
+  --color-terminal-bright-magenta: #5a3b6d;
+  --color-terminal-bright-cyan: #20565c;
+  --color-terminal-bright-white: rgb(0 0 0);
+  --color-terminal-selection-bg: #1f4e8c33;
+}
+
+/* Walnut Theme — vellum & walnut: deep warm brown-black, parchment text, brass accent */
+:root.walnut {
+  /* Backgrounds — TWO-TONE foundation, sunken editor */
+  --color-bg-primary: var(--walnut-900);
+  --color-bg-secondary: var(--walnut-850);
+  --color-bg-tertiary: var(--walnut-700);
+  --color-bg-hover: var(--walnut-700);
+  --color-bg-active: var(--walnut-600);
+  --color-bg-chrome: var(--walnut-900);
+  --color-bg-editor: var(--walnut-950);   /* SUNKEN — darker than chrome */
+
+  /* Surfaces */
+  --color-surface-primary: var(--walnut-850);
+  --color-surface-secondary: var(--walnut-800);
+  --color-surface-tertiary: var(--walnut-700);
+  --color-surface-hover: rgba(237, 225, 205, 0.05);
+
+  /* Text — parchment */
+  --color-text-primary: var(--parchment-100);
+  --color-text-secondary: var(--parchment-200);
+  --color-text-tertiary: var(--parchment-300);
+  --color-text-muted: var(--walnut-200);   /* 7.0:1 on --walnut-900, 4.5:1 on --walnut-600 */
+  --color-text-disabled: var(--walnut-400);
+
+  /* Borders */
+  --color-border-primary: var(--walnut-600);
+  --color-border-secondary: var(--walnut-800);
+  --color-border-tertiary: var(--walnut-850);
+  --color-border-hover: var(--walnut-500);
+  --color-border-focus: var(--brass-500);
+
+  /* Interactive — single brass accent */
+  --color-interactive: var(--brass-500);
+  --color-interactive-primary: var(--brass-500);
+  --color-interactive-hover: var(--brass-400);
+  --color-interactive-active: var(--brass-600);
+  --color-interactive-text: var(--brass-text);
+  --color-focus-ring: var(--brass-500);
+  --color-interactive-rgb: 201 162 77;
+
+  /* Interactive on dark */
+  --color-text-interactive-on-dark: var(--brass-text);
+  --color-text-interactive-on-dark-hover: var(--brass-400);
+  --color-text-interactive-on-dark-active: var(--brass-text);
+  --color-text-interactive-on-dark-focus: var(--brass-text);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--walnut-850);
+  --color-surface-interactive-hover: var(--walnut-700);
+  --color-interactive-surface: rgba(201, 162, 77, 0.14);
+  --color-interactive-surface-hover: rgba(201, 162, 77, 0.22);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: rgba(237, 225, 205, 0.06);
+  --color-border-interactive: rgba(237, 225, 205, 0.10);
+  --color-interactive-border: rgba(201, 162, 77, 0.55);
+  --color-interactive-border-hover: rgba(201, 162, 77, 0.75);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: var(--walnut-200);
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(201, 162, 77, 0.4);
+
+  /* Status — muted pigments on walnut */
+  --color-status-success: #93b57a;
+  --color-status-success-hover: #a5c48d;
+  --color-status-warning: #d9b25f;
+  --color-status-warning-hover: #e3c079;
+  --color-status-error: #d8776c;
+  --color-status-error-hover: #e28c82;
+  --color-status-info: var(--brass-500);
+  --color-status-neutral: var(--walnut-300);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--parchment-100);
+  --color-text-on-secondary: var(--parchment-200);
+  --color-text-on-tertiary: var(--parchment-200);
+  --color-text-on-surface: var(--parchment-200);
+  --color-text-on-interactive: var(--walnut-900);   /* dark ink on brass — 9.4:1 */
+  --color-text-on-status-success: var(--walnut-900);
+  --color-text-on-status-warning: var(--walnut-900);
+  --color-text-on-status-error: var(--walnut-900);
+  --color-text-on-status-info: var(--walnut-900);
+  --color-text-on-navigation: var(--parchment-200);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--brass-500);
+  --color-button-primary-hover: var(--brass-400);
+  --color-button-primary-text: var(--walnut-900);
+  --color-button-secondary-bg: var(--walnut-700);
+  --color-button-secondary-hover: var(--walnut-600);
+  --color-button-secondary-text: var(--parchment-100);
+  --color-button-ghost-hover: var(--walnut-800);
+  --color-button-ghost-text: var(--parchment-300);
+
+  /* Cards */
+  --color-card-bg: var(--walnut-850);
+  --color-card-border: var(--walnut-600);
+  --color-card-nested-bg: var(--walnut-800);
+
+  /* Forms */
+  --color-input-bg: var(--walnut-950);
+  --color-input-border: var(--walnut-500);
+  --color-input-focus: var(--brass-500);
+  --color-input-text: var(--parchment-100);
+  --color-input-placeholder: var(--walnut-200);
+
+  /* Modal */
+  --color-modal-overlay: rgba(0, 0, 0, 0.6);
+  --color-modal-bg: var(--walnut-850);
+
+  /* Navigation */
+  --color-surface-navigation: var(--walnut-900);
+  --color-surface-navigation-hover: var(--walnut-850);
+  --color-surface-navigation-active: var(--walnut-700);
+  --color-surface-navigation-selected: rgba(201, 162, 77, 0.14);
+  --color-surface-navigation-selected-hover: rgba(201, 162, 77, 0.2);
+  --color-text-navigation-primary: var(--parchment-200);
+  --color-text-navigation-secondary: var(--parchment-300);
+  --color-text-navigation-muted: var(--walnut-200);
+  --color-text-navigation-selected: var(--parchment-100);
+  --color-text-navigation-hover: var(--parchment-100);
+  --color-text-navigation-section: var(--walnut-200);
+  --color-text-navigation-brand: var(--parchment-300);
+  --color-border-navigation: var(--walnut-600);
+  --color-divider-navigation: var(--walnut-800);
+  --color-divider-navigation-subtle: rgba(237, 225, 205, 0.04);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--walnut-900);
+  --color-scrollbar-thumb: rgba(237, 225, 205, 0.16);
+  --color-scrollbar-thumb-hover: rgba(237, 225, 205, 0.30);
+
+  /* Tab indicator — brass rule under the active tab */
+  --tab-indicator-color: var(--brass-500);
+  --tab-indicator-height: 2px;
+
+  /* Terminal — parchment on walnut; every colour ≥ 3:1, text ≥ 4.5:1 on --walnut-950 */
+  --color-terminal-bg: var(--walnut-950);
+  --color-terminal-fg: var(--parchment-100);
+  --color-terminal-cursor: var(--brass-500);
+  --color-terminal-black: var(--walnut-950);
+  --color-terminal-red: #d8776c;
+  --color-terminal-green: #98b67e;
+  --color-terminal-yellow: #d9b25f;
+  --color-terminal-blue: #8fa6bd;
+  --color-terminal-magenta: #c395b3;
+  --color-terminal-cyan: #83b3ab;
+  --color-terminal-white: var(--parchment-200);
+  --color-terminal-bright-black: var(--walnut-300);
+  --color-terminal-bright-red: #e6948a;
+  --color-terminal-bright-green: #b0ca99;
+  --color-terminal-bright-yellow: #e6c77e;
+  --color-terminal-bright-blue: #a9bccf;
+  --color-terminal-bright-magenta: #d4adc7;
+  --color-terminal-bright-cyan: #9fc9c1;
+  --color-terminal-bright-white: var(--parchment-50);
+  --color-terminal-selection-bg: #c9a24d40;
+}
+
+/* Amber CRT Theme — amber-phosphor monitor on black-brown glass, single amber hue */
+:root.amber-crt {
+  /* Backgrounds — chrome sits on the glass, editor/terminal are sunken */
+  --color-bg-primary: var(--crt-900);
+  --color-bg-secondary: var(--crt-850);
+  --color-bg-tertiary: var(--crt-700);
+  --color-bg-hover: var(--crt-700);
+  --color-bg-active: var(--crt-600);
+  --color-bg-chrome: var(--crt-900);
+  --color-bg-editor: var(--crt-950);
+
+  /* Surfaces */
+  --color-surface-primary: var(--crt-850);
+  --color-surface-secondary: var(--crt-800);
+  --color-surface-tertiary: var(--crt-700);
+  --color-surface-hover: rgba(255, 176, 0, 0.06);
+
+  /* Text — pale amber ramp */
+  --color-text-primary: var(--crt-100);
+  --color-text-secondary: var(--crt-200);
+  --color-text-tertiary: var(--crt-300);
+  --color-text-muted: var(--crt-400);        /* 5.0:1 on --crt-900, 4.8:1 on --crt-850 */
+  --color-text-disabled: var(--crt-500);
+
+  /* Borders */
+  --color-border-primary: var(--crt-700);
+  --color-border-secondary: var(--crt-800);
+  --color-border-hover: var(--crt-600);
+  --color-border-focus: var(--crt-amber);
+
+  /* Interactive — amber phosphor, dark text on the accent */
+  --color-interactive-primary: var(--crt-amber);
+  --color-interactive-hover: var(--crt-amber-bright);
+  --color-interactive-active: var(--crt-amber-deep);
+  --color-interactive-text: var(--crt-amber);
+  --color-focus-ring: var(--crt-amber);
+  --color-interactive-rgb: 255 176 0;
+
+  /* Interactive on dark */
+  --color-text-interactive-on-dark: var(--crt-amber);
+  --color-text-interactive-on-dark-hover: var(--crt-amber-bright);
+  --color-text-interactive-on-dark-active: var(--crt-amber-deep);
+  --color-text-interactive-on-dark-focus: var(--crt-amber);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--crt-850);
+  --color-surface-interactive-hover: var(--crt-700);
+  --color-interactive-surface: rgba(255, 176, 0, 0.14);
+  --color-interactive-surface-hover: rgba(255, 176, 0, 0.22);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: rgba(255, 176, 0, 0.08);
+  --color-border-interactive: rgba(255, 176, 0, 0.14);
+  --color-interactive-border: rgba(255, 176, 0, 0.5);
+  --color-interactive-border-hover: rgba(255, 176, 0, 0.7);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: var(--crt-400);
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(255, 176, 0, 0.4);
+
+  /* Status — warm-shifted, dark text on every status fill */
+  --color-status-success: #8fbf6a;
+  --color-status-success-hover: #a3cc80;
+  --color-status-warning: #ffcf4d;
+  --color-status-warning-hover: #ffda75;
+  --color-status-error: #ff6b4a;
+  --color-status-error-hover: #ff8a6e;
+  --color-status-info: var(--crt-amber);
+  --color-status-neutral: var(--crt-400);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--crt-100);
+  --color-text-on-secondary: var(--crt-200);
+  --color-text-on-tertiary: var(--crt-200);
+  --color-text-on-surface: var(--crt-200);
+  --color-text-on-interactive: var(--crt-900);
+  --color-text-on-status-success: var(--crt-900);
+  --color-text-on-status-warning: var(--crt-900);
+  --color-text-on-status-error: var(--crt-900);
+  --color-text-on-status-info: var(--crt-900);
+  --color-text-on-navigation: var(--crt-200);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--crt-amber);
+  --color-button-primary-hover: var(--crt-amber-bright);
+  --color-button-primary-text: var(--crt-900);
+  --color-button-secondary-bg: var(--crt-700);
+  --color-button-secondary-hover: var(--crt-600);
+  --color-button-secondary-text: var(--crt-200);
+  --color-button-ghost-hover: var(--crt-800);
+  --color-button-ghost-text: var(--crt-300);
+
+  /* Cards */
+  --color-card-bg: var(--crt-850);
+  --color-card-border: var(--crt-700);
+  --color-card-nested-bg: var(--crt-700);
+
+  /* Forms */
+  --color-input-bg: var(--crt-950);
+  --color-input-border: var(--crt-600);
+  --color-input-focus: var(--crt-amber);
+  --color-input-text: var(--crt-100);
+  --color-input-placeholder: var(--crt-400);
+
+  /* Modal */
+  --color-modal-overlay: rgba(0, 0, 0, 0.65);
+  --color-modal-bg: var(--crt-850);
+
+  /* Navigation */
+  --color-surface-navigation: var(--crt-900);
+  --color-surface-navigation-hover: var(--crt-850);
+  --color-surface-navigation-active: var(--crt-700);
+  --color-surface-navigation-selected: rgba(255, 176, 0, 0.14);
+  --color-surface-navigation-selected-hover: rgba(255, 176, 0, 0.2);
+  --color-text-navigation-primary: var(--crt-200);
+  --color-text-navigation-secondary: var(--crt-300);
+  --color-text-navigation-muted: var(--crt-400);
+  --color-text-navigation-selected: var(--crt-100);
+  --color-text-navigation-hover: var(--crt-100);
+  --color-text-navigation-section: var(--crt-400);
+  --color-text-navigation-brand: var(--crt-300);
+  --color-border-navigation: var(--crt-700);
+  --color-divider-navigation: var(--crt-800);
+  --color-divider-navigation-subtle: rgba(255, 176, 0, 0.04);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--crt-900);
+  --color-scrollbar-thumb: rgba(255, 176, 0, 0.18);
+  --color-scrollbar-thumb-hover: rgba(255, 176, 0, 0.32);
+
+  /* Tab indicator — amber underline */
+  --tab-indicator-color: var(--crt-amber);
+  --tab-indicator-height: 3px;
+
+  /* Terminal — amber phosphor on glass; blue/magenta/cyan collapse into the warm ramp */
+  --color-terminal-bg: var(--crt-950);
+  --color-terminal-fg: var(--crt-100);
+  --color-terminal-cursor: var(--crt-amber);
+  --color-terminal-black: var(--crt-950);
+  --color-terminal-red: #ff6b4a;
+  --color-terminal-green: #b8c65a;
+  --color-terminal-yellow: #ffcf4d;
+  --color-terminal-blue: #e0a040;
+  --color-terminal-magenta: #e39a86;
+  --color-terminal-cyan: #cbb98a;
+  --color-terminal-white: var(--crt-100);
+  --color-terminal-bright-black: var(--crt-400);
+  --color-terminal-bright-red: #ff8a6e;
+  --color-terminal-bright-green: #cdd97a;
+  --color-terminal-bright-yellow: #ffe08a;
+  --color-terminal-bright-blue: #f0b860;
+  --color-terminal-bright-magenta: #f0b0a0;
+  --color-terminal-bright-cyan: #e0d0a8;
+  --color-terminal-bright-white: #fff3d6;
+  --color-terminal-selection-bg: #ffb00040;
+}
+
+/* Teletype Theme — 1970s terminal on paper: warm off-white, brown ink, burnt-orange & olive accents */
+:root.teletype {
+  /* Backgrounds — paper primary, beige chrome */
+  --color-bg-primary: var(--tty-paper-100);
+  --color-bg-secondary: var(--tty-paper-200);
+  --color-bg-tertiary: var(--tty-paper-200);
+  --color-bg-hover: var(--tty-paper-300);
+  --color-bg-active: var(--tty-paper-400);
+  --color-bg-chrome: var(--tty-paper-200);
+  --color-bg-editor: var(--tty-paper-50);
+
+  /* Surfaces */
+  --color-surface-primary: var(--tty-paper-50);
+  --color-surface-secondary: var(--tty-paper-100);
+  --color-surface-tertiary: var(--tty-paper-200);
+  --color-surface-hover: var(--tty-paper-300);
+
+  /* Text — brown ink ramp */
+  --color-text-primary: var(--tty-ink-900);
+  --color-text-secondary: var(--tty-ink-700);   /* 7.4:1 on paper */
+  --color-text-tertiary: var(--tty-ink-600);    /* 6.5:1 on paper */
+  --color-text-muted: var(--tty-ink-500);       /* 5.7:1 on paper, 5.2:1 on chrome */
+  --color-text-disabled: var(--tty-ink-400);
+
+  /* Borders — visible ruled lines */
+  --color-border-primary: rgba(43, 33, 22, 0.16);
+  --color-border-secondary: rgba(43, 33, 22, 0.10);
+  --color-border-tertiary: rgba(43, 33, 22, 0.06);
+  --color-border-hover: rgba(43, 33, 22, 0.24);
+  --color-border-focus: var(--tty-orange-600);
+
+  /* Interactive — burnt orange */
+  --color-interactive: var(--tty-orange-600);
+  --color-interactive-primary: var(--tty-orange-600);
+  --color-interactive-hover: var(--tty-orange-700);
+  --color-interactive-active: var(--tty-orange-500);
+  --color-interactive-text: var(--tty-orange-text);
+  --color-interactive-rgb: 181 69 27;
+
+  /* Status — ink colours */
+  --color-status-success: var(--tty-olive);
+  --color-status-success-hover: #3d5a0a;
+  --color-status-warning: #8a5a00;
+  --color-status-warning-hover: #6e4700;
+  --color-status-error: #b3261e;
+  --color-status-error-hover: #8f1d17;
+  --color-status-info: var(--tty-orange-text);
+  --color-status-neutral: var(--tty-ink-500);
+
+  /* Special UI States */
+  --color-modal-overlay: rgba(43, 33, 22, 0.5);
+  --color-focus-ring: var(--tty-orange-600);   /* 4.8:1 on paper */
+
+  /* Interactive tokens */
+  --color-surface-interactive: var(--tty-paper-50);
+  --color-surface-interactive-hover: var(--tty-paper-200);
+  --color-interactive-surface: rgba(181, 69, 27, 0.12);
+  --color-interactive-surface-hover: rgba(181, 69, 27, 0.2);
+  --color-border-interactive-subtle: rgba(43, 33, 22, 0.08);
+  --color-border-interactive: rgba(43, 33, 22, 0.16);
+  --color-interactive-border: var(--tty-orange-600);
+  --color-interactive-border-hover: var(--tty-orange-700);
+  --color-text-interactive-muted: var(--tty-ink-500);
+  --color-focus-ring-subtle: rgba(181, 69, 27, 0.4);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--tty-ink-900);
+  --color-text-on-secondary: var(--tty-ink-900);
+  --color-text-on-tertiary: var(--tty-ink-700);
+  --color-text-on-surface: var(--tty-ink-900);
+  --color-text-on-interactive: rgb(255 255 255);   /* 5.5:1 on burnt orange */
+  --color-text-on-status-success: rgb(255 255 255);
+  --color-text-on-status-warning: rgb(255 255 255);
+  --color-text-on-status-error: rgb(255 255 255);
+  --color-text-on-status-info: rgb(255 255 255);
+  --color-text-on-navigation: var(--tty-ink-900);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--tty-orange-600);
+  --color-button-primary-hover: var(--tty-orange-700);
+  --color-button-primary-text: rgb(255 255 255);
+  --color-button-secondary-bg: var(--tty-paper-200);
+  --color-button-secondary-hover: var(--tty-paper-300);
+  --color-button-secondary-text: var(--tty-ink-900);
+  --color-button-ghost-hover: var(--tty-paper-300);
+  --color-button-ghost-text: var(--tty-ink-700);
+
+  /* Cards */
+  --color-card-bg: var(--tty-paper-50);
+  --color-card-border: rgba(43, 33, 22, 0.16);
+  --color-card-nested-bg: var(--tty-paper-100);
+
+  /* Forms */
+  --color-input-bg: var(--tty-paper-50);
+  --color-input-border: rgba(43, 33, 22, 0.2);
+  --color-input-focus: var(--tty-orange-600);
+  --color-input-text: var(--tty-ink-900);
+  --color-input-placeholder: var(--tty-ink-500);
+
+  /* Modal */
+  --color-modal-bg: var(--tty-paper-50);
+
+  /* Navigation — beige rail */
+  --color-surface-navigation: var(--tty-paper-200);
+  --color-surface-navigation-hover: var(--tty-paper-300);
+  --color-surface-navigation-active: var(--tty-paper-400);
+  --color-surface-navigation-selected: rgba(181, 69, 27, 0.14);
+  --color-surface-navigation-selected-hover: rgba(181, 69, 27, 0.2);
+  --color-text-navigation-primary: var(--tty-ink-900);
+  --color-text-navigation-secondary: var(--tty-ink-700);
+  --color-text-navigation-muted: var(--tty-ink-500);      /* 5.2:1 on chrome */
+  --color-text-navigation-selected: var(--tty-ink-900);
+  --color-text-navigation-hover: var(--tty-ink-900);
+  --color-text-navigation-section: var(--tty-ink-600);    /* 5.9:1 on chrome */
+  --color-text-navigation-brand: var(--tty-ink-700);
+  --color-border-navigation: rgba(43, 33, 22, 0.14);
+  --color-divider-navigation: rgba(43, 33, 22, 0.10);
+  --color-divider-navigation-subtle: rgba(43, 33, 22, 0.06);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--tty-paper-200);
+  --color-scrollbar-thumb: var(--tty-paper-400);
+  --color-scrollbar-thumb-hover: #b3a283;
+
+  /* Tab indicator — orange underline */
+  --tab-indicator-color: var(--tty-orange-600);
+  --tab-indicator-height: 3px;
+
+  /* Terminal — ink on paper (light-theme convention: black = paper, white = ink) */
+  --color-terminal-bg: #f3ecdc;
+  --color-terminal-fg: var(--tty-ink-900);
+  --color-terminal-cursor: var(--tty-orange-600);
+  --color-terminal-black: #f3ecdc;
+  --color-terminal-red: #b3261e;
+  --color-terminal-green: var(--tty-olive);
+  --color-terminal-yellow: #8a5a00;
+  --color-terminal-blue: #35597a;
+  --color-terminal-magenta: #8f3f71;
+  --color-terminal-cyan: #2a6f6a;
+  --color-terminal-white: var(--tty-ink-900);
+  --color-terminal-bright-black: var(--tty-ink-500);
+  --color-terminal-bright-red: #8f1d17;
+  --color-terminal-bright-green: #3d5a0a;
+  --color-terminal-bright-yellow: #6e4700;
+  --color-terminal-bright-blue: #244a6a;
+  --color-terminal-bright-magenta: #73305a;
+  --color-terminal-bright-cyan: #1f5955;
+  --color-terminal-bright-white: #1a120a;
+  --color-terminal-selection-bg: #b5451b40;
+}
+
+/* Dot Matrix Theme — monochrome-green LCD: deep olive-black, 4-step green ramp, one hot accent for errors */
+:root.dot-matrix {
+  /* Backgrounds */
+  --color-bg-primary: var(--lcd-900);
+  --color-bg-secondary: var(--lcd-850);
+  --color-bg-tertiary: var(--lcd-700);
+  --color-bg-hover: var(--lcd-700);
+  --color-bg-active: var(--lcd-600);
+  --color-bg-chrome: var(--lcd-900);
+  --color-bg-editor: var(--lcd-950);
+
+  /* Surfaces */
+  --color-surface-primary: var(--lcd-850);
+  --color-surface-secondary: var(--lcd-800);
+  --color-surface-tertiary: var(--lcd-700);
+  --color-surface-hover: rgba(155, 188, 15, 0.07);
+
+  /* Text — the 4-step green ramp */
+  --color-text-primary: var(--lcd-green-4);
+  --color-text-secondary: var(--lcd-green-3);
+  --color-text-tertiary: #9fbf58;              /* 8.9:1 on --lcd-900 */
+  --color-text-muted: var(--lcd-green-1);      /* 5.9:1 on --lcd-900, 5.5:1 on --lcd-850 */
+  --color-text-disabled: var(--lcd-500);
+
+  /* Borders */
+  --color-border-primary: var(--lcd-700);
+  --color-border-secondary: var(--lcd-800);
+  --color-border-hover: var(--lcd-600);
+  --color-border-focus: var(--lcd-green-2);
+
+  /* Interactive — LCD green, dark text on the accent */
+  --color-interactive-primary: var(--lcd-green-2);
+  --color-interactive-hover: var(--lcd-green-accent-hover);
+  --color-interactive-active: var(--lcd-green-accent-active);
+  --color-interactive-text: var(--lcd-green-text);
+  --color-focus-ring: var(--lcd-green-2);
+  --color-interactive-rgb: 139 172 15;
+
+  /* Interactive on dark */
+  --color-text-interactive-on-dark: var(--lcd-green-text);
+  --color-text-interactive-on-dark-hover: var(--lcd-green-accent-hover);
+  --color-text-interactive-on-dark-active: var(--lcd-green-text);
+  --color-text-interactive-on-dark-focus: var(--lcd-green-text);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--lcd-850);
+  --color-surface-interactive-hover: var(--lcd-700);
+  --color-interactive-surface: rgba(139, 172, 15, 0.14);
+  --color-interactive-surface-hover: rgba(139, 172, 15, 0.22);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: rgba(155, 188, 15, 0.08);
+  --color-border-interactive: rgba(155, 188, 15, 0.14);
+  --color-interactive-border: rgba(139, 172, 15, 0.5);
+  --color-interactive-border-hover: rgba(139, 172, 15, 0.7);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: var(--lcd-green-1);
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(139, 172, 15, 0.4);
+
+  /* Status — everything stays green except the hot error accent */
+  --color-status-success: var(--lcd-green-2);
+  --color-status-success-hover: var(--lcd-green-accent-hover);
+  --color-status-warning: #d9d15a;
+  --color-status-warning-hover: #e8e27a;
+  --color-status-error: var(--lcd-hot);
+  --color-status-error-hover: #ff8a9a;
+  --color-status-info: var(--lcd-green-text);
+  --color-status-neutral: var(--lcd-green-1);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--lcd-green-4);
+  --color-text-on-secondary: var(--lcd-green-3);
+  --color-text-on-tertiary: var(--lcd-green-3);
+  --color-text-on-surface: var(--lcd-green-3);
+  --color-text-on-interactive: var(--lcd-950);
+  --color-text-on-status-success: var(--lcd-950);
+  --color-text-on-status-warning: var(--lcd-950);
+  --color-text-on-status-error: var(--lcd-950);
+  --color-text-on-status-info: var(--lcd-950);
+  --color-text-on-navigation: var(--lcd-green-3);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--lcd-green-2);
+  --color-button-primary-hover: var(--lcd-green-accent-hover);
+  --color-button-primary-text: var(--lcd-950);
+  --color-button-secondary-bg: var(--lcd-700);
+  --color-button-secondary-hover: var(--lcd-600);
+  --color-button-secondary-text: var(--lcd-green-3);
+  --color-button-ghost-hover: var(--lcd-800);
+  --color-button-ghost-text: #9fbf58;
+
+  /* Cards */
+  --color-card-bg: var(--lcd-850);
+  --color-card-border: var(--lcd-700);
+  --color-card-nested-bg: var(--lcd-700);
+
+  /* Forms */
+  --color-input-bg: var(--lcd-950);
+  --color-input-border: var(--lcd-600);
+  --color-input-focus: var(--lcd-green-2);
+  --color-input-text: var(--lcd-green-4);
+  --color-input-placeholder: var(--lcd-green-1);
+
+  /* Modal */
+  --color-modal-overlay: rgba(0, 0, 0, 0.65);
+  --color-modal-bg: var(--lcd-850);
+
+  /* Navigation */
+  --color-surface-navigation: var(--lcd-900);
+  --color-surface-navigation-hover: var(--lcd-850);
+  --color-surface-navigation-active: var(--lcd-700);
+  --color-surface-navigation-selected: rgba(139, 172, 15, 0.14);
+  --color-surface-navigation-selected-hover: rgba(139, 172, 15, 0.2);
+  --color-text-navigation-primary: var(--lcd-green-3);
+  --color-text-navigation-secondary: #9fbf58;
+  --color-text-navigation-muted: var(--lcd-green-1);
+  --color-text-navigation-selected: var(--lcd-green-4);
+  --color-text-navigation-hover: var(--lcd-green-4);
+  --color-text-navigation-section: var(--lcd-green-1);
+  --color-text-navigation-brand: #9fbf58;
+  --color-border-navigation: var(--lcd-700);
+  --color-divider-navigation: var(--lcd-800);
+  --color-divider-navigation-subtle: rgba(155, 188, 15, 0.04);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--lcd-900);
+  --color-scrollbar-thumb: rgba(155, 188, 15, 0.18);
+  --color-scrollbar-thumb-hover: rgba(155, 188, 15, 0.32);
+
+  /* Tab indicator — green underline */
+  --tab-indicator-color: var(--lcd-green-2);
+  --tab-indicator-height: 3px;
+
+  /* Terminal — LCD greens; blue/cyan lean teal-mint, magenta is a desaturated sage-lilac, red is the hot accent */
+  --color-terminal-bg: var(--lcd-950);
+  --color-terminal-fg: var(--lcd-green-4);
+  --color-terminal-cursor: var(--lcd-green-accent-hover);
+  --color-terminal-black: var(--lcd-950);
+  --color-terminal-red: var(--lcd-hot);
+  --color-terminal-green: var(--lcd-green-accent-hover);
+  --color-terminal-yellow: #d9d15a;
+  --color-terminal-blue: #6fc0ad;
+  --color-terminal-magenta: #b3aac4;
+  --color-terminal-cyan: #8de0c8;
+  --color-terminal-white: var(--lcd-green-4);
+  --color-terminal-bright-black: var(--lcd-green-1);
+  --color-terminal-bright-red: #ff8a9a;
+  --color-terminal-bright-green: #b5d94a;
+  --color-terminal-bright-yellow: #e8e27a;
+  --color-terminal-bright-blue: #8fd6c4;
+  --color-terminal-bright-magenta: #ccc4dc;
+  --color-terminal-bright-cyan: #a8ecd8;
+  --color-terminal-bright-white: #f0f8dc;
+  --color-terminal-selection-bg: #9bbc0f40;
+}
+
+/* Haar Theme — cold pre-dawn sea fog: blue-white surfaces, ink text (light base) */
+:root.haar {
+  /* Backgrounds — fog bank (chrome) vs. clearing (editor) */
+  --color-bg-primary: var(--haar-100);
+  --color-bg-secondary: var(--haar-150);
+  --color-bg-tertiary: var(--haar-200);
+  --color-bg-hover: var(--haar-200);
+  --color-bg-active: var(--haar-300);
+  --color-bg-chrome: var(--haar-150);
+  --color-bg-editor: var(--haar-50);   /* brightest — the clearing */
+
+  /* Surfaces */
+  --color-surface-primary: var(--haar-50);
+  --color-surface-secondary: var(--haar-100);
+  --color-surface-tertiary: var(--haar-150);
+  --color-surface-hover: var(--haar-200);
+
+  /* Text — ink on fog */
+  --color-text-primary: var(--haar-800);
+  --color-text-secondary: var(--haar-700);
+  --color-text-tertiary: var(--haar-600);
+  --color-text-muted: #5b6874;  /* 4.95:1 on --haar-100 (AA) */
+  --color-text-disabled: var(--haar-400);
+
+  /* Borders — cold, visible like frost lines */
+  --color-border-primary: rgba(37, 45, 54, 0.16);
+  --color-border-secondary: rgba(37, 45, 54, 0.10);
+  --color-border-tertiary: rgba(37, 45, 54, 0.06);
+  --color-border-hover: rgba(37, 45, 54, 0.24);
+  --color-border-focus: var(--haar-steel-500);
+
+  /* Interactive — steel blue through fog */
+  --color-interactive: var(--haar-steel-500);
+  --color-interactive-primary: var(--haar-steel-500);
+  --color-interactive-hover: var(--haar-steel-600);
+  --color-interactive-active: var(--haar-steel-700);
+  --color-interactive-text: var(--haar-steel-700);
+  --color-focus-ring: var(--haar-steel-500);
+  --color-interactive-rgb: 79 109 138;
+
+  /* Interactive on dark (used by dark-surface accents inside a light theme) */
+  --color-text-interactive-on-dark: var(--haar-steel-300);
+  --color-text-interactive-on-dark-hover: var(--haar-steel-400);
+  --color-text-interactive-on-dark-active: var(--haar-steel-300);
+  --color-text-interactive-on-dark-focus: var(--haar-steel-300);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--haar-100);
+  --color-surface-interactive-hover: var(--haar-150);
+  --color-interactive-surface: rgba(79, 109, 138, 0.14);
+  --color-interactive-surface-hover: rgba(79, 109, 138, 0.22);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: rgba(37, 45, 54, 0.08);
+  --color-border-interactive: rgba(37, 45, 54, 0.16);
+  --color-interactive-border: var(--haar-steel-500);
+  --color-interactive-border-hover: var(--haar-steel-600);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: #5b6874;  /* 4.95:1 on --haar-100 (AA) */
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(79, 109, 138, 0.4);
+
+  /* Status — muted, photographic */
+  --color-status-success: #2f7a45;
+  --color-status-success-hover: #276638;
+  --color-status-warning: #85611a;
+  --color-status-warning-hover: #6f5013;
+  --color-status-error: #b23b3b;
+  --color-status-error-hover: #952f2f;
+  --color-status-info: var(--haar-steel-600);
+  --color-status-neutral: var(--haar-500);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--haar-800);
+  --color-text-on-secondary: var(--haar-800);
+  --color-text-on-tertiary: var(--haar-700);
+  --color-text-on-surface: var(--haar-800);
+  --color-text-on-interactive: rgb(255 255 255);
+  --color-text-on-status-success: rgb(255 255 255);
+  --color-text-on-status-warning: rgb(255 255 255);
+  --color-text-on-status-error: rgb(255 255 255);
+  --color-text-on-status-info: rgb(255 255 255);
+  --color-text-on-navigation: var(--haar-800);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--haar-steel-500);
+  --color-button-primary-hover: var(--haar-steel-600);
+  --color-button-primary-text: rgb(255 255 255);
+  --color-button-secondary-bg: var(--haar-150);
+  --color-button-secondary-hover: var(--haar-200);
+  --color-button-secondary-text: var(--haar-800);
+  --color-button-ghost-hover: var(--haar-200);
+  --color-button-ghost-text: var(--haar-700);
+
+  /* Cards */
+  --color-card-bg: var(--haar-50);
+  --color-card-border: rgba(37, 45, 54, 0.14);
+  --color-card-nested-bg: var(--haar-100);
+
+  /* Forms */
+  --color-input-bg: var(--haar-50);
+  --color-input-border: rgba(37, 45, 54, 0.18);
+  --color-input-focus: var(--haar-steel-500);
+  --color-input-text: var(--haar-800);
+  --color-input-placeholder: #5b6874;
+
+  /* Modal */
+  --color-modal-overlay: rgba(21, 27, 33, 0.45);
+  --color-modal-bg: var(--haar-50);
+
+  /* Navigation — denser fog in the sidebar */
+  --color-surface-navigation: var(--haar-150);
+  --color-surface-navigation-hover: var(--haar-200);
+  --color-surface-navigation-active: var(--haar-300);
+  --color-surface-navigation-selected: rgba(79, 109, 138, 0.16);
+  --color-surface-navigation-selected-hover: rgba(79, 109, 138, 0.24);
+  --color-text-navigation-primary: var(--haar-800);
+  --color-text-navigation-secondary: var(--haar-700);
+  --color-text-navigation-muted: #57636f;  /* 4.9:1 on --haar-150 (AA) */
+  --color-text-navigation-selected: var(--haar-900);
+  --color-text-navigation-hover: var(--haar-900);
+  --color-text-navigation-section: #57636f;  /* 4.9:1 on --haar-150 (AA) */
+  --color-text-navigation-brand: var(--haar-600);
+  --color-border-navigation: rgba(37, 45, 54, 0.12);
+  --color-divider-navigation: rgba(37, 45, 54, 0.10);
+  --color-divider-navigation-subtle: rgba(37, 45, 54, 0.06);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--haar-150);
+  --color-scrollbar-thumb: var(--haar-300);
+  --color-scrollbar-thumb-hover: var(--haar-400);
+
+  /* Tab indicator (fill mode) */
+  --tab-indicator-color: transparent;
+  --tab-indicator-height: 0px;
+
+  /* Terminal — ink on fog, desaturated ANSI (all >= 3:1, normal set >= 4.5:1) */
+  --color-terminal-bg: #e6ebef;
+  --color-terminal-fg: #1d252d;
+  --color-terminal-cursor: var(--haar-steel-600);
+  --color-terminal-black: #e6ebef;
+  --color-terminal-red: #a63b3b;
+  --color-terminal-green: #3b7448;
+  --color-terminal-yellow: #82611a;
+  --color-terminal-blue: #35618c;
+  --color-terminal-magenta: #7a4f8e;
+  --color-terminal-cyan: #24707a;
+  --color-terminal-white: #1d252d;
+  --color-terminal-bright-black: #5b6874;
+  --color-terminal-bright-red: #bd4a45;
+  --color-terminal-bright-green: #4a8b58;
+  --color-terminal-bright-yellow: #986f1e;
+  --color-terminal-bright-blue: #4373a5;
+  --color-terminal-bright-magenta: #8d60a2;
+  --color-terminal-bright-cyan: #2c8590;
+  --color-terminal-bright-white: #0b0f13;
+  --color-terminal-selection-bg: #4f6d8a40;
+}
+
+/* Abyss Theme — deep ocean: near-black navy, bioluminescent teal accent (dark base) */
+:root.abyss {
+  /* Backgrounds — TWO-TONE: navy chrome, deeper editor */
+  --color-bg-primary: var(--abyss-900);
+  --color-bg-secondary: var(--abyss-850);
+  --color-bg-tertiary: var(--abyss-700);
+  --color-bg-hover: var(--abyss-700);
+  --color-bg-active: var(--abyss-600);
+  --color-bg-chrome: var(--abyss-900);
+  --color-bg-editor: var(--abyss-950);   /* SUNKEN — the trench */
+
+  /* Surfaces */
+  --color-surface-primary: var(--abyss-850);
+  --color-surface-secondary: var(--abyss-800);
+  --color-surface-tertiary: var(--abyss-700);
+  --color-surface-hover: rgba(159, 227, 216, 0.05);
+
+  /* Text — cold water whites */
+  --color-text-primary: var(--abyss-100);
+  --color-text-secondary: var(--abyss-200);
+  --color-text-tertiary: var(--abyss-300);
+  --color-text-muted: #7897ab;  /* 6.2:1 on --abyss-900 (AA) */
+  --color-text-disabled: var(--abyss-500);
+
+  /* Borders — faint, lit by the accent */
+  --color-border-primary: rgba(159, 227, 216, 0.10);
+  --color-border-secondary: rgba(159, 227, 216, 0.06);
+  --color-border-hover: rgba(159, 227, 216, 0.16);
+  --color-border-focus: var(--abyss-glow-500);
+
+  /* Interactive — single bioluminescent teal accent */
+  --color-interactive-primary: var(--abyss-glow-500);
+  --color-interactive-hover: var(--abyss-glow-400);
+  --color-interactive-active: var(--abyss-glow-300);
+  --color-interactive-text: var(--abyss-glow-400);
+  --color-focus-ring: var(--abyss-glow-500);
+  --color-interactive-rgb: 77 184 171;
+
+  /* Interactive on dark */
+  --color-text-interactive-on-dark: var(--abyss-glow-400);
+  --color-text-interactive-on-dark-hover: var(--abyss-glow-300);
+  --color-text-interactive-on-dark-active: var(--abyss-glow-400);
+  --color-text-interactive-on-dark-focus: var(--abyss-glow-400);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--abyss-850);
+  --color-surface-interactive-hover: var(--abyss-700);
+  --color-interactive-surface: rgba(77, 184, 171, 0.14);
+  --color-interactive-surface-hover: rgba(77, 184, 171, 0.24);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: rgba(159, 227, 216, 0.06);
+  --color-border-interactive: rgba(159, 227, 216, 0.10);
+  --color-interactive-border: rgba(77, 184, 171, 0.5);
+  --color-interactive-border-hover: rgba(77, 184, 171, 0.7);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: #7897ab;  /* 6.2:1 on --abyss-900 (AA) */
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(77, 184, 171, 0.4);
+
+  /* Status — sea-life tones, dark text on fills */
+  --color-status-success: #6cbf8a;
+  --color-status-success-hover: #57a976;
+  --color-status-warning: #d9b567;
+  --color-status-warning-hover: #c4a052;
+  --color-status-error: #e07a6e;
+  --color-status-error-hover: #cc6559;
+  --color-status-info: var(--abyss-glow-400);
+  --color-status-neutral: var(--abyss-400);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--abyss-100);
+  --color-text-on-secondary: var(--abyss-200);
+  --color-text-on-tertiary: var(--abyss-200);
+  --color-text-on-surface: var(--abyss-200);
+  --color-text-on-interactive: var(--abyss-950);
+  --color-text-on-status-success: var(--abyss-950);
+  --color-text-on-status-warning: var(--abyss-950);
+  --color-text-on-status-error: var(--abyss-950);
+  --color-text-on-status-info: var(--abyss-950);
+  --color-text-on-navigation: var(--abyss-200);
+
+  /* Buttons — glowing teal fill carries ink text (8:1) */
+  --color-button-primary-bg: var(--abyss-glow-500);
+  --color-button-primary-hover: var(--abyss-glow-400);
+  --color-button-primary-text: var(--abyss-950);
+  --color-button-secondary-bg: var(--abyss-700);
+  --color-button-secondary-hover: var(--abyss-600);
+  --color-button-secondary-text: var(--abyss-100);
+  --color-button-ghost-hover: var(--abyss-800);
+  --color-button-ghost-text: var(--abyss-300);
+
+  /* Cards */
+  --color-card-bg: var(--abyss-850);
+  --color-card-border: rgba(159, 227, 216, 0.10);
+  --color-card-nested-bg: var(--abyss-800);
+
+  /* Forms */
+  --color-input-bg: var(--abyss-950);
+  --color-input-border: rgba(159, 227, 216, 0.14);
+  --color-input-focus: var(--abyss-glow-500);
+  --color-input-text: var(--abyss-100);
+  --color-input-placeholder: #7b9aae;  /* 6.7:1 on --abyss-950 (AA) */
+
+  /* Modal */
+  --color-modal-overlay: rgba(2, 6, 12, 0.7);
+  --color-modal-bg: var(--abyss-850);
+
+  /* Navigation */
+  --color-surface-navigation: var(--abyss-900);
+  --color-surface-navigation-hover: var(--abyss-850);
+  --color-surface-navigation-active: var(--abyss-700);
+  --color-surface-navigation-selected: rgba(77, 184, 171, 0.14);
+  --color-surface-navigation-selected-hover: rgba(77, 184, 171, 0.20);
+  --color-text-navigation-primary: var(--abyss-200);
+  --color-text-navigation-secondary: var(--abyss-300);
+  --color-text-navigation-muted: #7897ab;  /* 6.2:1 on --abyss-900 (AA) */
+  --color-text-navigation-selected: var(--abyss-100);
+  --color-text-navigation-hover: var(--abyss-100);
+  --color-text-navigation-section: #7897ab;  /* 6.2:1 on --abyss-900 (AA) */
+  --color-text-navigation-brand: var(--abyss-300);
+  --color-border-navigation: rgba(159, 227, 216, 0.08);
+  --color-divider-navigation: rgba(159, 227, 216, 0.06);
+  --color-divider-navigation-subtle: rgba(159, 227, 216, 0.03);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--abyss-900);
+  --color-scrollbar-thumb: rgba(159, 227, 216, 0.14);
+  --color-scrollbar-thumb-hover: rgba(159, 227, 216, 0.28);
+
+  /* Tab indicator — UNDERLINE mode (glow line) */
+  --tab-indicator-color: var(--abyss-glow-500);
+  --tab-indicator-height: 3px;
+
+  /* Terminal — trench black, sea-life ANSI (all >= 3:1 on bg) */
+  --color-terminal-bg: var(--abyss-950);
+  --color-terminal-fg: var(--abyss-100);
+  --color-terminal-cursor: var(--abyss-glow-400);
+  --color-terminal-black: var(--abyss-950);
+  --color-terminal-red: #d9776b;
+  --color-terminal-green: #6dbf8d;
+  --color-terminal-yellow: #d6b56c;
+  --color-terminal-blue: #6ea3d4;
+  --color-terminal-magenta: #b391c8;
+  --color-terminal-cyan: #5fcabf;
+  --color-terminal-white: var(--abyss-100);
+  --color-terminal-bright-black: var(--abyss-400);
+  --color-terminal-bright-red: #ea9084;
+  --color-terminal-bright-green: #8dd3a6;
+  --color-terminal-bright-yellow: #e5c98a;
+  --color-terminal-bright-blue: #8ebae2;
+  --color-terminal-bright-magenta: #c9abd9;
+  --color-terminal-bright-cyan: #8ce0d6;
+  --color-terminal-bright-white: #f2f9fb;
+  --color-terminal-selection-bg: #4db8ab40;
+}
+
+/* Understory Theme — forest floor: moss greens, bark-brown chrome, lichen accent (dark base) */
+:root.understory {
+  /* Backgrounds — TWO-TONE: bark chrome, moss floor editor */
+  --color-bg-primary: var(--under-900);
+  --color-bg-secondary: var(--under-850);
+  --color-bg-tertiary: var(--under-700);
+  --color-bg-hover: var(--under-700);
+  --color-bg-active: var(--under-600);
+  --color-bg-chrome: var(--under-bark-850);   /* bark */
+  --color-bg-editor: var(--under-950);        /* SUNKEN — moss floor */
+
+  /* Surfaces */
+  --color-surface-primary: var(--under-850);
+  --color-surface-secondary: var(--under-800);
+  --color-surface-tertiary: var(--under-700);
+  --color-surface-hover: rgba(211, 221, 168, 0.05);
+
+  /* Text — pale lichen-cream */
+  --color-text-primary: var(--under-100);
+  --color-text-secondary: var(--under-200);
+  --color-text-tertiary: var(--under-300);
+  --color-text-muted: #85937a;  /* 5.5:1 on --under-900 (AA) */
+  --color-text-disabled: var(--under-500);
+
+  /* Borders — bark lines */
+  --color-border-primary: var(--under-bark-700);
+  --color-border-secondary: var(--under-bark-800);
+  --color-border-hover: var(--under-bark-600);
+  --color-border-focus: var(--under-lichen-500);
+
+  /* Interactive — single lichen accent */
+  --color-interactive-primary: var(--under-lichen-500);
+  --color-interactive-hover: var(--under-lichen-400);
+  --color-interactive-active: var(--under-lichen-300);
+  --color-interactive-text: var(--under-lichen-400);
+  --color-focus-ring: var(--under-lichen-500);
+  --color-interactive-rgb: 166 181 109;
+
+  /* Interactive on dark */
+  --color-text-interactive-on-dark: var(--under-lichen-400);
+  --color-text-interactive-on-dark-hover: var(--under-lichen-300);
+  --color-text-interactive-on-dark-active: var(--under-lichen-400);
+  --color-text-interactive-on-dark-focus: var(--under-lichen-400);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--under-850);
+  --color-surface-interactive-hover: var(--under-700);
+  --color-interactive-surface: rgba(166, 181, 109, 0.14);
+  --color-interactive-surface-hover: rgba(166, 181, 109, 0.24);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: rgba(211, 221, 168, 0.06);
+  --color-border-interactive: rgba(211, 221, 168, 0.10);
+  --color-interactive-border: rgba(166, 181, 109, 0.5);
+  --color-interactive-border-hover: rgba(166, 181, 109, 0.7);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: #85937a;  /* 5.5:1 on --under-900 (AA) */
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(166, 181, 109, 0.4);
+
+  /* Status — moss, lichen gold, rust; dark text on fills */
+  --color-status-success: #8bb56e;
+  --color-status-success-hover: #78a25c;
+  --color-status-warning: #d1b35c;
+  --color-status-warning-hover: #bd9f49;
+  --color-status-error: #d0705b;
+  --color-status-error-hover: #bb5c48;
+  --color-status-info: var(--under-lichen-400);
+  --color-status-neutral: var(--under-400);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--under-100);
+  --color-text-on-secondary: var(--under-200);
+  --color-text-on-tertiary: var(--under-200);
+  --color-text-on-surface: var(--under-200);
+  --color-text-on-interactive: var(--under-950);
+  --color-text-on-status-success: var(--under-950);
+  --color-text-on-status-warning: var(--under-950);
+  --color-text-on-status-error: var(--under-950);
+  --color-text-on-status-info: var(--under-950);
+  --color-text-on-navigation: var(--under-200);
+
+  /* Buttons — lichen fill carries moss-black text (9:1) */
+  --color-button-primary-bg: var(--under-lichen-500);
+  --color-button-primary-hover: var(--under-lichen-400);
+  --color-button-primary-text: var(--under-950);
+  --color-button-secondary-bg: var(--under-700);
+  --color-button-secondary-hover: var(--under-600);
+  --color-button-secondary-text: var(--under-100);
+  --color-button-ghost-hover: var(--under-800);
+  --color-button-ghost-text: var(--under-300);
+
+  /* Cards */
+  --color-card-bg: var(--under-850);
+  --color-card-border: var(--under-bark-700);
+  --color-card-nested-bg: var(--under-800);
+
+  /* Forms */
+  --color-input-bg: var(--under-950);
+  --color-input-border: var(--under-bark-600);
+  --color-input-focus: var(--under-lichen-500);
+  --color-input-text: var(--under-100);
+  --color-input-placeholder: #88967d;  /* 6.1:1 on --under-950 (AA) */
+
+  /* Modal */
+  --color-modal-overlay: rgba(6, 8, 5, 0.65);
+  --color-modal-bg: var(--under-850);
+
+  /* Navigation — bark sidebar */
+  --color-surface-navigation: var(--under-bark-850);
+  --color-surface-navigation-hover: var(--under-bark-800);
+  --color-surface-navigation-active: var(--under-bark-700);
+  --color-surface-navigation-selected: rgba(166, 181, 109, 0.14);
+  --color-surface-navigation-selected-hover: rgba(166, 181, 109, 0.20);
+  --color-text-navigation-primary: var(--under-200);
+  --color-text-navigation-secondary: var(--under-300);
+  --color-text-navigation-muted: #85937a;  /* 5.4:1 on --under-bark-850 (AA) */
+  --color-text-navigation-selected: var(--under-100);
+  --color-text-navigation-hover: var(--under-100);
+  --color-text-navigation-section: #85937a;  /* 5.4:1 on --under-bark-850 (AA) */
+  --color-text-navigation-brand: var(--under-300);
+  --color-border-navigation: var(--under-bark-700);
+  --color-divider-navigation: var(--under-bark-800);
+  --color-divider-navigation-subtle: rgba(211, 221, 168, 0.03);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--under-900);
+  --color-scrollbar-thumb: rgba(211, 221, 168, 0.14);
+  --color-scrollbar-thumb-hover: rgba(211, 221, 168, 0.28);
+
+  /* Tab indicator — UNDERLINE mode (lichen line) */
+  --tab-indicator-color: var(--under-lichen-500);
+  --tab-indicator-height: 3px;
+
+  /* Terminal — moss floor, woodland ANSI (all >= 3:1 on bg) */
+  --color-terminal-bg: var(--under-950);
+  --color-terminal-fg: var(--under-100);
+  --color-terminal-cursor: var(--under-lichen-400);
+  --color-terminal-black: var(--under-950);
+  --color-terminal-red: #d0705b;
+  --color-terminal-green: #8bb56e;
+  --color-terminal-yellow: #cdb35c;
+  --color-terminal-blue: #7d9fb3;
+  --color-terminal-magenta: #b48ea6;
+  --color-terminal-cyan: #78b3a2;
+  --color-terminal-white: var(--under-100);
+  --color-terminal-bright-black: var(--under-400);
+  --color-terminal-bright-red: #e08b78;
+  --color-terminal-bright-green: #a6cb8a;
+  --color-terminal-bright-yellow: #dcc57e;
+  --color-terminal-bright-blue: #9ab7c8;
+  --color-terminal-bright-magenta: #c9a9bd;
+  --color-terminal-bright-cyan: #98c9ba;
+  --color-terminal-bright-white: #f3f5ec;
+  --color-terminal-selection-bg: #a6b56d40;
+}
+
 /* Light Rounded — inherits light tokens, overrides shell/chrome behavior */
 :root.light-rounded {
   --color-bg-chrome: var(--gh-light-50);
@@ -1731,6 +3950,522 @@
   --color-surface-navigation-active: rgb(220 230 236);
 }
 
+/* ==========================================================================
+   Accessibility-first themes
+   colorblind-safe  — dark; every semantic color is Okabe-Ito
+   low-fatigue      — warm sepia-dark for hours-long sessions
+   high-legibility  — light; 7:1+ body text, color only for state
+   ========================================================================== */
+
+/* Colorblind Safe — dark theme whose semantic colors (success/warn/error/info,
+   diff add/remove, terminal ANSI) come from the Okabe-Ito palette so they stay
+   distinguishable under protanopia, deuteranopia and tritanopia. */
+:root.colorblind-safe {
+  /* Backgrounds */
+  --color-bg-primary: var(--cbs-900);
+  --color-bg-secondary: var(--cbs-850);
+  --color-bg-tertiary: var(--cbs-700);
+  --color-bg-hover: var(--cbs-700);
+  --color-bg-active: var(--cbs-600);
+  --color-bg-chrome: var(--cbs-900);
+  --color-bg-editor: var(--cbs-950);   /* sunken editor/terminal */
+
+  /* Surfaces */
+  --color-surface-primary: var(--cbs-850);
+  --color-surface-secondary: var(--cbs-800);
+  --color-surface-tertiary: var(--cbs-700);
+  --color-surface-hover: rgba(255, 255, 255, 0.05);
+
+  /* Text */
+  --color-text-primary: var(--cbs-100);
+  --color-text-secondary: var(--cbs-200);
+  --color-text-tertiary: var(--cbs-300);
+  --color-text-muted: #8c97a4;   /* 6.1:1 on --cbs-900, 5.7:1 on --cbs-850 */
+  --color-text-disabled: var(--cbs-500);
+
+  /* Borders */
+  --color-border-primary: var(--cbs-700);
+  --color-border-secondary: var(--cbs-800);
+  --color-border-hover: var(--cbs-600);
+  --color-border-focus: var(--okabe-sky);
+
+  /* Interactive — Okabe-Ito blue for filled controls, sky blue for text/rings */
+  --color-interactive-primary: var(--okabe-blue);
+  --color-interactive-hover: #005f96;
+  --color-interactive-active: #004f7d;
+  --color-interactive-text: var(--okabe-sky);
+  --color-focus-ring: var(--okabe-sky);
+  --color-interactive-rgb: 86 180 233;
+
+  --color-text-interactive-on-dark: var(--okabe-sky);
+  --color-text-interactive-on-dark-hover: var(--okabe-sky-bright);
+  --color-text-interactive-on-dark-active: var(--okabe-sky);
+  --color-text-interactive-on-dark-focus: var(--okabe-sky);
+
+  --color-surface-interactive: var(--cbs-850);
+  --color-surface-interactive-hover: var(--cbs-700);
+  --color-interactive-surface: rgba(86, 180, 233, 0.15);
+  --color-interactive-surface-hover: rgba(86, 180, 233, 0.25);
+
+  --color-border-interactive-subtle: rgba(255, 255, 255, 0.08);
+  --color-border-interactive: rgba(255, 255, 255, 0.14);
+  --color-interactive-border: rgba(86, 180, 233, 0.5);
+  --color-interactive-border-hover: rgba(86, 180, 233, 0.7);
+
+  --color-text-interactive-muted: #8c97a4;   /* 6.1:1 on --cbs-900 */
+  /* Painted focus ring (Select trigger, tabs, settings rows) — 0.85 alpha so it
+     clears 3:1 (WCAG 2.4.11/1.4.11) instead of the 0.4 wash other themes use */
+  --color-focus-ring-subtle: rgba(86, 180, 233, 0.85);
+
+  /* Status — Okabe-Ito, exact values. Chips use black text (white fails on
+     bluish green and vermillion). */
+  --color-status-success: var(--okabe-green);
+  --color-status-success-hover: #00875f;
+  --color-status-warning: var(--okabe-orange);
+  --color-status-warning-hover: #c98a00;
+  --color-status-error: var(--okabe-vermillion);
+  --color-status-error-hover: #b85100;
+  --color-status-info: var(--okabe-sky);
+  --color-status-neutral: #8c97a4;
+
+  /* Context-aware text */
+  --color-text-on-primary: var(--cbs-100);
+  --color-text-on-secondary: var(--cbs-200);
+  --color-text-on-tertiary: var(--cbs-200);
+  --color-text-on-surface: var(--cbs-200);
+  --color-text-on-interactive: rgb(255 255 255);
+  --color-text-on-status-success: rgb(0 0 0);
+  --color-text-on-status-warning: rgb(0 0 0);
+  --color-text-on-status-error: rgb(0 0 0);
+  --color-text-on-status-info: rgb(0 0 0);
+  --color-text-on-navigation: var(--cbs-200);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--okabe-blue);
+  --color-button-primary-hover: #005f96;
+  --color-button-primary-text: rgb(255 255 255);
+  --color-button-secondary-bg: var(--cbs-700);
+  --color-button-secondary-hover: var(--cbs-600);
+  --color-button-secondary-text: var(--cbs-100);
+  --color-button-ghost-hover: var(--cbs-800);
+  --color-button-ghost-text: var(--cbs-300);
+
+  /* Cards */
+  --color-card-bg: var(--cbs-850);
+  --color-card-border: var(--cbs-700);
+  --color-card-nested-bg: var(--cbs-800);
+
+  /* Forms — input border clears 3:1 (WCAG 1.4.11) so the field boundary is
+     perceivable without relying on color */
+  --color-input-bg: var(--cbs-950);
+  --color-input-border: var(--cbs-500);
+  --color-input-focus: var(--okabe-sky);
+  --color-input-text: var(--cbs-100);
+  --color-input-placeholder: #8c97a4;
+
+  /* Modal */
+  --color-modal-overlay: rgba(0, 0, 0, 0.65);
+  --color-modal-bg: var(--cbs-850);
+
+  /* Navigation */
+  --color-surface-navigation: var(--cbs-900);
+  --color-surface-navigation-hover: var(--cbs-850);
+  --color-surface-navigation-active: var(--cbs-700);
+  --color-surface-navigation-selected: rgba(86, 180, 233, 0.16);
+  --color-surface-navigation-selected-hover: rgba(86, 180, 233, 0.22);
+  --color-text-navigation-primary: var(--cbs-200);
+  --color-text-navigation-secondary: var(--cbs-300);
+  --color-text-navigation-muted: #8c97a4;
+  --color-text-navigation-selected: var(--cbs-100);
+  --color-text-navigation-hover: var(--cbs-100);
+  --color-text-navigation-section: #8c97a4;
+  --color-text-navigation-brand: var(--cbs-300);
+  --color-border-navigation: var(--cbs-700);
+  --color-divider-navigation: var(--cbs-800);
+  --color-divider-navigation-subtle: rgba(255, 255, 255, 0.04);
+
+  /* Scrollbar — thumb clears 3:1 against the track */
+  --color-scrollbar-track: var(--cbs-900);
+  --color-scrollbar-thumb: var(--cbs-500);
+  --color-scrollbar-thumb-hover: var(--cbs-400);
+
+  /* Tab indicator — underline in sky blue */
+  --tab-indicator-color: var(--okabe-sky);
+  --tab-indicator-height: 3px;
+
+  /* Diff view (git-diff-view) — bluish green (add) vs vermillion (remove) mixed
+     over the editor bg at 26% / 40% / 52%. 26% is the lowest content tint whose
+     add/remove pair keeps ΔE ≥ 15 under protanopia (see check-theme-contrast). */
+  --color-diff-add-bg: #08332b;
+  --color-diff-del-bg: #40230d;
+  --color-diff-add-gutter: #074839;
+  --color-diff-del-gutter: #5c2e0b;
+  --color-diff-add-highlight: #055944;
+  --color-diff-del-highlight: #743809;
+  --color-diff-hunk-bg: #172934;
+  --color-diff-hunk-gutter: #234357;
+
+  /* Terminal — Okabe-Ito ANSI mapping:
+     red→vermillion, green→bluish green, yellow→yellow, blue→blue (lifted),
+     magenta→reddish purple, cyan→sky blue. Cursor is Okabe yellow so it never
+     shares a hue with links or selection. */
+  --color-terminal-bg: var(--cbs-950);
+  --color-terminal-fg: var(--cbs-100);
+  --color-terminal-cursor: var(--okabe-yellow);
+  --color-terminal-black: var(--cbs-950);
+  --color-terminal-red: var(--okabe-vermillion);
+  --color-terminal-green: var(--okabe-green-lift);
+  --color-terminal-yellow: var(--okabe-yellow);
+  --color-terminal-blue: var(--okabe-blue-lift);
+  --color-terminal-magenta: var(--okabe-purple);
+  --color-terminal-cyan: var(--okabe-sky-lift);
+  --color-terminal-white: var(--cbs-200);
+  --color-terminal-bright-black: var(--cbs-400);
+  --color-terminal-bright-red: var(--okabe-vermillion-bright);
+  --color-terminal-bright-green: var(--okabe-green-bright);
+  --color-terminal-bright-yellow: var(--okabe-yellow-bright);
+  --color-terminal-bright-blue: var(--okabe-blue-bright);
+  --color-terminal-bright-magenta: var(--okabe-purple-bright);
+  --color-terminal-bright-cyan: var(--okabe-sky-bright);
+  --color-terminal-bright-white: rgb(255 255 255);
+}
+
+/* Low Fatigue — warm sepia-dark for hours of reading: mid-dark backgrounds,
+   parchment text (never pure white), a honey-gold accent and a desaturated,
+   low-blue palette. Text stays ≥ 4.5:1 but avoids the 18:1 glare of black/white. */
+:root.low-fatigue {
+  /* Backgrounds */
+  --color-bg-primary: var(--lf-900);
+  --color-bg-secondary: var(--lf-850);
+  --color-bg-tertiary: var(--lf-700);
+  --color-bg-hover: var(--lf-700);
+  --color-bg-active: var(--lf-600);
+  --color-bg-chrome: var(--lf-900);
+  --color-bg-editor: var(--lf-950);   /* sunken editor/terminal */
+
+  /* Surfaces */
+  --color-surface-primary: var(--lf-850);
+  --color-surface-secondary: var(--lf-800);
+  --color-surface-tertiary: var(--lf-700);
+  --color-surface-hover: rgba(240, 232, 216, 0.05);
+
+  /* Text — warm parchment ramp */
+  --color-text-primary: var(--lf-100);
+  --color-text-secondary: var(--lf-200);
+  --color-text-tertiary: var(--lf-300);
+  --color-text-muted: #a09079;   /* 5.1:1 on --lf-900, 4.6:1 on --lf-850 */
+  --color-text-disabled: var(--lf-500);
+
+  /* Borders */
+  --color-border-primary: var(--lf-700);
+  --color-border-secondary: var(--lf-800);
+  --color-border-hover: var(--lf-600);
+  --color-border-focus: var(--lf-gold);
+
+  /* Interactive — honey gold, dark text on filled controls (no white anywhere) */
+  --color-interactive-primary: var(--lf-gold);
+  --color-interactive-hover: var(--lf-gold-hover);
+  --color-interactive-active: var(--lf-gold-active);
+  --color-interactive-text: var(--lf-gold-text);
+  --color-focus-ring: var(--lf-gold);
+  --color-interactive-rgb: 209 165 74;
+
+  --color-text-interactive-on-dark: var(--lf-gold-text);
+  --color-text-interactive-on-dark-hover: var(--lf-gold-hover);
+  --color-text-interactive-on-dark-active: var(--lf-gold-text);
+  --color-text-interactive-on-dark-focus: var(--lf-gold-text);
+
+  --color-surface-interactive: var(--lf-850);
+  --color-surface-interactive-hover: var(--lf-700);
+  --color-interactive-surface: rgba(209, 165, 74, 0.15);
+  --color-interactive-surface-hover: rgba(209, 165, 74, 0.25);
+
+  --color-border-interactive-subtle: rgba(240, 232, 216, 0.07);
+  --color-border-interactive: rgba(240, 232, 216, 0.12);
+  --color-interactive-border: rgba(209, 165, 74, 0.5);
+  --color-interactive-border-hover: rgba(209, 165, 74, 0.7);
+
+  --color-text-interactive-muted: #a09079;   /* 5.1:1 on --lf-900 */
+  --color-focus-ring-subtle: rgba(209, 165, 74, 0.85);   /* painted focus ring ≥ 3:1 */
+
+  /* Status — desaturated warm set: sage / burnt orange / soft brick / dusty teal.
+     Chips use dark text so no pure white ever lands on a saturated fill. */
+  --color-status-success: #a8c487;
+  --color-status-success-hover: #94b272;
+  --color-status-warning: #e08b47;
+  --color-status-warning-hover: #cf7a36;
+  --color-status-error: #d4715c;
+  --color-status-error-hover: #c4634f;
+  --color-status-info: #8fb1b8;
+  --color-status-neutral: #a09079;
+
+  /* Context-aware text */
+  --color-text-on-primary: var(--lf-100);
+  --color-text-on-secondary: var(--lf-200);
+  --color-text-on-tertiary: var(--lf-200);
+  --color-text-on-surface: var(--lf-200);
+  --color-text-on-interactive: var(--lf-950);
+  --color-text-on-status-success: var(--lf-950);
+  --color-text-on-status-warning: var(--lf-950);
+  --color-text-on-status-error: var(--lf-950);
+  --color-text-on-status-info: var(--lf-950);
+  --color-text-on-navigation: var(--lf-200);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--lf-gold);
+  --color-button-primary-hover: var(--lf-gold-hover);
+  --color-button-primary-text: var(--lf-950);
+  --color-button-secondary-bg: var(--lf-700);
+  --color-button-secondary-hover: var(--lf-600);
+  --color-button-secondary-text: var(--lf-100);
+  --color-button-ghost-hover: var(--lf-800);
+  --color-button-ghost-text: var(--lf-300);
+
+  /* Cards */
+  --color-card-bg: var(--lf-850);
+  --color-card-border: var(--lf-700);
+  --color-card-nested-bg: var(--lf-800);
+
+  /* Forms */
+  --color-input-bg: var(--lf-950);
+  --color-input-border: #7a6b5c;   /* 3.3:1 on --lf-950 (WCAG 1.4.11) */
+  --color-input-focus: var(--lf-gold);
+  --color-input-text: var(--lf-100);
+  --color-input-placeholder: #a09079;
+
+  /* Modal */
+  --color-modal-overlay: rgba(20, 16, 12, 0.6);
+  --color-modal-bg: var(--lf-850);
+
+  /* Navigation */
+  --color-surface-navigation: var(--lf-900);
+  --color-surface-navigation-hover: var(--lf-850);
+  --color-surface-navigation-active: var(--lf-700);
+  --color-surface-navigation-selected: rgba(209, 165, 74, 0.16);
+  --color-surface-navigation-selected-hover: rgba(209, 165, 74, 0.22);
+  --color-text-navigation-primary: var(--lf-200);
+  --color-text-navigation-secondary: var(--lf-300);
+  --color-text-navigation-muted: #a09079;
+  --color-text-navigation-selected: var(--lf-100);
+  --color-text-navigation-hover: var(--lf-100);
+  --color-text-navigation-section: #a09079;
+  --color-text-navigation-brand: var(--lf-300);
+  --color-border-navigation: var(--lf-700);
+  --color-divider-navigation: var(--lf-800);
+  --color-divider-navigation-subtle: rgba(240, 232, 216, 0.04);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--lf-900);
+  --color-scrollbar-thumb: #7a6b5c;   /* 3.1:1 on the track */
+  --color-scrollbar-thumb-hover: var(--lf-400);
+
+  /* Tab indicator — gold underline */
+  --tab-indicator-color: var(--lf-gold);
+  --tab-indicator-height: 3px;
+
+  /* Diff view — sage (add) vs soft brick (remove) over the editor bg */
+  --color-diff-add-bg: #3a3d2d;
+  --color-diff-del-bg: #432c25;
+  --color-diff-add-gutter: #50583f;
+  --color-diff-del-gutter: #603a30;
+  --color-diff-add-highlight: #616c4d;
+  --color-diff-del-highlight: #764438;
+  --color-diff-hunk-bg: #313331;
+  --color-diff-hunk-gutter: #434b4b;
+
+  /* Terminal — warm, muted, every color ≥ 4.5:1 on the sunken background;
+     "blue" is a desaturated steel so blue-light stays low; bright white is
+     parchment, not #fff */
+  --color-terminal-bg: var(--lf-950);
+  --color-terminal-fg: var(--lf-100);
+  --color-terminal-cursor: var(--lf-gold);
+  --color-terminal-black: var(--lf-950);
+  --color-terminal-red: #d4715c;
+  --color-terminal-green: #a8c487;
+  --color-terminal-yellow: #d1a54a;
+  --color-terminal-blue: #8fa4bd;
+  --color-terminal-magenta: #c493a8;
+  --color-terminal-cyan: #86b3ab;
+  --color-terminal-white: var(--lf-200);
+  --color-terminal-bright-black: #9c8c74;
+  --color-terminal-bright-red: #e5978a;
+  --color-terminal-bright-green: #b7cf95;
+  --color-terminal-bright-yellow: #e2be74;
+  --color-terminal-bright-blue: #a9bacf;
+  --color-terminal-bright-magenta: #d6adc0;
+  --color-terminal-bright-cyan: #a3c9c1;
+  --color-terminal-bright-white: var(--lf-50);
+}
+
+/* High Legibility — light theme built for maximal text contrast: body text
+   ≥ 7:1 (AAA), 3:1+ borders and focus rings, and no color anywhere except to
+   signal state (links/focus/selection in one blue; success/warning/error in
+   dark, AAA-clearing tones). Composes on the `light` base class. */
+:root.high-legibility {
+  /* Backgrounds */
+  --color-bg-primary: var(--hl-white);
+  --color-bg-secondary: var(--hl-50);
+  --color-bg-tertiary: var(--hl-100);
+  --color-bg-hover: var(--hl-100);
+  --color-bg-active: var(--hl-200);
+  --color-bg-chrome: var(--hl-50);
+  --color-bg-editor: var(--hl-white);
+
+  /* Surfaces */
+  --color-surface-primary: var(--hl-white);
+  --color-surface-secondary: var(--hl-50);
+  --color-surface-tertiary: var(--hl-100);
+  --color-surface-hover: var(--hl-100);
+
+  /* Text — every step ≥ 7:1 on white except disabled */
+  --color-text-primary: var(--hl-900);
+  --color-text-secondary: var(--hl-800);
+  --color-text-tertiary: var(--hl-700);
+  --color-text-muted: var(--hl-600);
+  --color-text-disabled: var(--hl-400);
+
+  /* Borders — solid grays; primary/input borders clear 3:1 (1.4.11) */
+  --color-border-primary: var(--hl-500);
+  --color-border-secondary: #a8a8a8;
+  --color-border-tertiary: var(--hl-300);
+  --color-border-hover: var(--hl-600);
+  --color-border-focus: var(--hl-blue);
+
+  /* Interactive — one blue, 8.2:1 on white */
+  --color-interactive: var(--hl-blue);
+  --color-interactive-primary: var(--hl-blue);
+  --color-interactive-hover: var(--hl-blue-hover);
+  --color-interactive-active: var(--hl-blue-active);
+  --color-interactive-text: var(--hl-blue);
+  --color-interactive-rgb: 30 64 175;
+  --color-focus-ring: var(--hl-blue);
+
+  --color-text-interactive-on-dark: var(--hl-blue);
+  --color-text-interactive-on-dark-hover: var(--hl-blue-hover);
+  --color-text-interactive-on-dark-active: var(--hl-blue);
+  --color-text-interactive-on-dark-focus: var(--hl-blue);
+
+  --color-surface-interactive: var(--hl-50);
+  --color-surface-interactive-hover: var(--hl-100);
+  --color-interactive-surface: var(--hl-blue-tint);
+  --color-interactive-surface-hover: #d0d8f0;
+  --color-border-interactive-subtle: #a8a8a8;
+  --color-border-interactive: var(--hl-500);
+  --color-interactive-border: var(--hl-blue);
+  --color-interactive-border-hover: var(--hl-blue-hover);
+  --color-text-interactive-muted: var(--hl-600);
+  --color-focus-ring-subtle: var(--hl-blue);   /* painted focus ring, opaque — 8.7:1 */
+
+  /* Status — dark tones that clear 7:1 as text on white; white text on fills */
+  --color-status-success: var(--hl-green);
+  --color-status-success-hover: #084a1f;
+  --color-status-warning: var(--hl-amber);
+  --color-status-warning-hover: #603b00;
+  --color-status-error: var(--hl-red);
+  --color-status-error-hover: #850f15;
+  --color-status-info: var(--hl-blue);
+  --color-status-neutral: var(--hl-600);
+
+  /* Context-aware text */
+  --color-text-on-primary: var(--hl-900);
+  --color-text-on-secondary: var(--hl-900);
+  --color-text-on-tertiary: var(--hl-800);
+  --color-text-on-surface: var(--hl-900);
+  --color-text-on-interactive: var(--hl-white);
+  --color-text-on-status-success: var(--hl-white);
+  --color-text-on-status-warning: var(--hl-white);
+  --color-text-on-status-error: var(--hl-white);
+  --color-text-on-status-info: var(--hl-white);
+  --color-text-on-navigation: var(--hl-900);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--hl-blue);
+  --color-button-primary-hover: var(--hl-blue-hover);
+  --color-button-primary-text: var(--hl-white);
+  --color-button-secondary-bg: var(--hl-white);
+  --color-button-secondary-hover: var(--hl-100);
+  --color-button-secondary-text: var(--hl-900);
+  --color-button-ghost-hover: var(--hl-100);
+  --color-button-ghost-text: var(--hl-800);
+
+  /* Cards */
+  --color-card-bg: var(--hl-white);
+  --color-card-border: var(--hl-500);
+  --color-card-nested-bg: var(--hl-50);
+
+  /* Forms */
+  --color-input-bg: var(--hl-white);
+  --color-input-border: var(--hl-500);
+  --color-input-focus: var(--hl-blue);
+  --color-input-text: var(--hl-900);
+  --color-input-placeholder: var(--hl-600);
+
+  /* Modal */
+  --color-modal-overlay: rgba(17, 17, 17, 0.55);
+  --color-modal-bg: var(--hl-white);
+
+  /* Navigation — selection is a blue tint + black text, no other color */
+  --color-surface-navigation: var(--hl-50);
+  --color-surface-navigation-hover: var(--hl-100);
+  --color-surface-navigation-active: var(--hl-200);
+  --color-surface-navigation-selected: var(--hl-blue-tint);
+  --color-surface-navigation-selected-hover: #d0d8f0;
+  --color-text-navigation-primary: var(--hl-900);
+  --color-text-navigation-secondary: var(--hl-800);
+  --color-text-navigation-muted: var(--hl-600);
+  --color-text-navigation-selected: var(--hl-900);
+  --color-text-navigation-hover: var(--hl-900);
+  --color-text-navigation-section: var(--hl-600);
+  --color-text-navigation-brand: var(--hl-700);
+  --color-border-navigation: #a8a8a8;
+  --color-divider-navigation: #a8a8a8;
+  --color-divider-navigation-subtle: var(--hl-300);
+
+  /* Scrollbar — thumb ≥ 3:1 on track */
+  --color-scrollbar-track: var(--hl-50);
+  --color-scrollbar-thumb: var(--hl-500);
+  --color-scrollbar-thumb-hover: var(--hl-600);
+
+  /* Tab indicator — blue underline */
+  --tab-indicator-color: var(--hl-blue);
+  --tab-indicator-height: 3px;
+
+  /* Diff view — stronger tints than the light default; gutter numbers stay ≥ 7:1 */
+  --color-diff-add-bg: #d3f2da;
+  --color-diff-del-bg: #fbdcdc;
+  --color-diff-add-gutter: #a9e3b6;
+  --color-diff-del-gutter: #f4b9b9;
+  --color-diff-add-highlight: #8fd6a1;
+  --color-diff-del-highlight: #f2a3a3;
+  --color-diff-hunk-bg: #e4e8f5;
+  --color-diff-hunk-gutter: #c8d1ee;
+
+  /* Terminal — black on white; ANSI colors are the darkest value of each hue
+     that stays distinguishable from its bright sibling, all ≥ 4.5:1 on white
+     (normal set ≥ 7:1). ANSI "white" is dark gray so light-on-light output
+     stays readable, matching the existing light theme. */
+  --color-terminal-bg: var(--hl-white);
+  --color-terminal-fg: rgb(0 0 0);
+  --color-terminal-cursor: var(--hl-blue);
+  --color-terminal-selection-bg: #1e40af40;
+  --color-terminal-black: rgb(0 0 0);
+  --color-terminal-red: var(--hl-red);
+  --color-terminal-green: var(--hl-green);
+  --color-terminal-yellow: var(--hl-amber);
+  --color-terminal-blue: var(--hl-blue);
+  --color-terminal-magenta: #7a1f7d;
+  --color-terminal-cyan: #005c6b;
+  --color-terminal-white: var(--hl-700);
+  --color-terminal-bright-black: var(--hl-600);
+  --color-terminal-bright-red: #c1272d;
+  --color-terminal-bright-green: #0f7a35;
+  --color-terminal-bright-yellow: #8a5a00;
+  --color-terminal-bright-blue: var(--hl-blue-active);
+  --color-terminal-bright-magenta: #952b98;
+  --color-terminal-bright-cyan: #007486;
+  --color-terminal-bright-white: rgb(0 0 0);
+}
+
 /* ==========================================================================
    High Contrast — opt-in AAA overrides (Settings → Appearance → High contrast)
    Stamped as an additive `high-contrast` class on <html>/<body> alongside the
@@ -1828,3 +4563,123 @@
   --color-text-navigation-muted: #b59888;
   --color-text-navigation-section: #b59888;
 }
+
+/* Synthwave */
+:root.high-contrast.synthwave {
+  --color-text-muted: #bcaee0;              /* 9.39:1 on --syn-900 */
+  --color-text-interactive-muted: #bcaee0;
+  --color-text-navigation-muted: #bcaee0;
+  --color-text-navigation-section: #bcaee0;
+}
+
+/* Acid Terminal */
+:root.high-contrast.acid {
+  --color-text-muted: #a9b9a9;              /* 9.07:1 on --acid-900 */
+  --color-text-interactive-muted: #a9b9a9;
+  --color-text-navigation-muted: #a9b9a9;
+  --color-text-navigation-section: #a9b9a9;
+}
+
+/* Tokyo Rain */
+:root.high-contrast.tokyo-rain {
+  --color-text-muted: #a7b3cb;              /* 8.90:1 on --rain-900 */
+  --color-text-interactive-muted: #a7b3cb;
+  --color-text-navigation-muted: #a7b3cb;
+  --color-text-navigation-section: #a7b3cb;
+}
+
+/* Folio */
+:root.high-contrast.folio {
+  --color-text-muted: #4f4740;              /* 8.0:1 on --folio-paper */
+  --color-text-interactive-muted: #4f4740;
+  --color-text-navigation-muted: #4f4740;
+  --color-text-navigation-section: #4f4740;
+}
+
+/* Newsprint */
+:root.high-contrast.newsprint {
+  --color-text-muted: #4a5056;              /* 7.3:1 on --news-paper */
+  --color-text-interactive-muted: #4a5056;
+  --color-text-navigation-muted: #4a5056;
+  --color-text-navigation-section: #4a5056;
+}
+
+/* Walnut */
+:root.high-contrast.walnut {
+  --color-text-muted: #bba992;              /* 7.9:1 on --walnut-900 */
+  --color-text-interactive-muted: #bba992;
+  --color-text-navigation-muted: #bba992;
+  --color-text-navigation-section: #bba992;
+}
+
+/* Amber CRT */
+:root.high-contrast.amber-crt {
+  --color-text-muted: #c09a42;              /* 7.2:1 on --crt-900 */
+  --color-text-interactive-muted: #c09a42;
+  --color-text-navigation-muted: #c09a42;
+  --color-text-navigation-section: #c09a42;
+}
+
+/* Teletype */
+:root.high-contrast.teletype {
+  --color-text-muted: #5c4c37;              /* 7.2:1 on --tty-paper-100 */
+  --color-text-interactive-muted: #5c4c37;
+  --color-text-navigation-muted: #5c4c37;
+  --color-text-navigation-section: #5c4c37;
+}
+
+/* Dot Matrix */
+:root.high-contrast.dot-matrix {
+  --color-text-muted: #8fac5c;              /* 7.3:1 on --lcd-900 */
+  --color-text-interactive-muted: #8fac5c;
+  --color-text-navigation-muted: #8fac5c;
+  --color-text-navigation-section: #8fac5c;
+}
+
+/* Haar */
+:root.high-contrast.haar {
+  --color-text-muted: #414b55;              /* 7.7:1 on --haar-100 */
+  --color-text-interactive-muted: #414b55;
+  --color-text-navigation-muted: #414b55;   /* 7.1:1 on --haar-150 */
+  --color-text-navigation-section: #414b55;
+}
+
+/* Abyss */
+:root.high-contrast.abyss {
+  --color-text-muted: #8aa7ba;              /* 7.5:1 on --abyss-900 */
+  --color-text-interactive-muted: #8aa7ba;
+  --color-text-navigation-muted: #8aa7ba;
+  --color-text-navigation-section: #8aa7ba;
+}
+
+/* Understory */
+:root.high-contrast.understory {
+  --color-text-muted: #a8b59b;              /* 8.3:1 on --under-900 */
+  --color-text-interactive-muted: #a8b59b;
+  --color-text-navigation-muted: #a8b59b;   /* 8.1:1 on --under-bark-850 */
+  --color-text-navigation-section: #a8b59b;
+}
+
+/* Colorblind Safe */
+:root.high-contrast.colorblind-safe {
+  --color-text-muted: #a4aeba;              /* 8.1:1 on --cbs-900 */
+  --color-text-interactive-muted: #a4aeba;
+  --color-text-navigation-muted: #a4aeba;
+  --color-text-navigation-section: #a4aeba;
+}
+
+/* Low Fatigue */
+:root.high-contrast.low-fatigue {
+  --color-text-muted: #bbab93;              /* 7.0:1 on --lf-900 */
+  --color-text-interactive-muted: #bbab93;
+  --color-text-navigation-muted: #bbab93;
+  --color-text-navigation-section: #bbab93;
+}
+
+/* High Legibility — already AAA; the toggle pushes muted text to ~10:1 */
+:root.high-contrast.high-legibility {
+  --color-text-muted: #404040;              /* 10.4:1 on white */
+  --color-text-interactive-muted: #404040;
+  --color-text-navigation-muted: #404040;
+  --color-text-navigation-section: #404040;
+}
diff --git a/frontend/src/styles/tokens/effects.css b/frontend/src/styles/tokens/effects.css
index 5694de9b..ac4e632a 100644
--- a/frontend/src/styles/tokens/effects.css
+++ b/frontend/src/styles/tokens/effects.css
@@ -195,6 +195,57 @@
   --panel-shell-shadow: var(--shadow-sm);
 }
 
+/* Synthwave Theme — soft rounded shells, magenta glow lives here only */
+:root.synthwave {
+  --button-radius: var(--radius-md);
+  --card-radius: var(--radius-lg);
+  --input-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-xs);
+  --app-shell-radius: var(--radius-xl);
+  --panel-shell-radius: var(--radius-lg);
+  --panel-shell-glow: rgba(255, 95, 215, 0.10);
+  --panel-shell-shadow:
+    0 10px 22px rgba(0, 0, 0, 0.28),
+    0 0 0 1px var(--panel-shell-glow),
+    inset 0 1px 0 rgba(255, 95, 215, 0.06);
+}
+
+/* Acid Terminal Theme — tight radii, lime hairline glow */
+:root.acid {
+  --button-radius: var(--radius-default);
+  --card-radius: var(--radius-md);
+  --input-radius: var(--radius-default);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-none);
+  --app-shell-radius: 0.625rem;
+  --panel-shell-radius: 0.5rem;
+  --panel-shell-glow: rgba(180, 255, 58, 0.08);
+  --panel-shell-shadow:
+    0 8px 18px rgba(0, 0, 0, 0.26),
+    0 0 0 1px var(--panel-shell-glow),
+    inset 0 1px 0 rgba(180, 255, 58, 0.05);
+}
+
+/* Tokyo Rain Theme — rounded shells, cool blue rain glow */
+:root.tokyo-rain {
+  --button-radius: var(--radius-lg);
+  --card-radius: var(--radius-xl);
+  --input-radius: var(--radius-lg);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-sm);
+  --app-shell-radius: var(--radius-2xl);
+  --panel-shell-radius: var(--radius-xl);
+  --panel-shell-glow: rgba(92, 179, 255, 0.10);
+  --panel-shell-shadow:
+    0 12px 24px rgba(0, 0, 0, 0.30),
+    0 0 0 1px var(--panel-shell-glow),
+    inset 0 1px 0 rgba(92, 179, 255, 0.06);
+}
+
 /* Light Rounded — Forge-like rounded light shells */
 :root.light-rounded {
   --button-radius: var(--radius-lg);
@@ -207,3 +258,163 @@
   --panel-shell-radius: var(--radius-xl);
   --panel-shell-shadow: var(--shadow-sm);
 }
+
+/* Folio / Newsprint / Walnut deliberately keep the flat, edge-to-edge shell
+   treatment of the base light/dark themes (no --app-shell-radius /
+   --panel-shell-* islands, no index.css shell borders): a printed sheet is
+   one surface with rule lines, not a stack of cards. */
+
+/* Folio — set type: crisp corners, no drop shadows, depth from tonal steps only */
+:root.folio {
+  --button-radius: var(--radius-sm);
+  --card-radius: var(--radius-default);
+  --input-radius: var(--radius-sm);
+  --modal-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-none);
+  --dropdown-shadow: 0 6px 18px rgba(31, 27, 23, 0.14);
+}
+
+/* Newsprint — column rules, square-ish corners, no drop shadows */
+:root.newsprint {
+  --button-radius: var(--radius-sm);
+  --card-radius: var(--radius-default);
+  --input-radius: var(--radius-sm);
+  --modal-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-none);
+  --dropdown-shadow: 0 6px 18px rgba(36, 39, 43, 0.16);
+}
+
+/* Walnut — soft-bound: gentle radius, shallow shadows */
+:root.walnut {
+  --button-radius: var(--radius-md);
+  --card-radius: var(--radius-lg);
+  --input-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-xs);
+  --dropdown-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
+}
+
+/* Amber CRT — soft bezel radii, warm phosphor glow instead of drop shadows */
+:root.amber-crt {
+  --button-radius: var(--radius-md);
+  --card-radius: var(--radius-lg);
+  --input-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-none);
+  --app-shell-radius: var(--radius-xl);
+  --panel-shell-radius: var(--radius-lg);
+  --panel-shell-shadow: 0 0 22px rgba(255, 176, 0, 0.06);
+}
+
+/* Teletype — Braun-style rounded shells, quiet paper shadows */
+:root.teletype {
+  --button-radius: var(--radius-lg);
+  --card-radius: var(--radius-xl);
+  --input-radius: var(--radius-lg);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-sm);
+  --app-shell-radius: var(--radius-2xl);
+  --panel-shell-radius: var(--radius-xl);
+  --panel-shell-shadow: var(--shadow-sm);
+}
+
+/* Dot Matrix — tight pixel radii, no shadows (LCD has no depth) */
+:root.dot-matrix {
+  --button-radius: var(--radius-sm);
+  --card-radius: var(--radius-default);
+  --input-radius: var(--radius-sm);
+  --modal-radius: var(--radius-default);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-none);
+  --modal-shadow: var(--shadow-none);
+  --app-shell-radius: var(--radius-md);
+  --panel-shell-radius: var(--radius-default);
+  --panel-shell-shadow: var(--shadow-none);
+}
+
+/* Haar — soft fog radii, whisper shadows */
+:root.haar {
+  --button-radius: var(--radius-lg);
+  --card-radius: var(--radius-xl);
+  --input-radius: var(--radius-lg);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-sm);
+  --app-shell-radius: var(--radius-2xl);
+  --panel-shell-radius: var(--radius-xl);
+  --panel-shell-shadow: var(--shadow-sm);
+}
+
+/* Abyss — deep, rounded shells with pressure-depth shadows */
+:root.abyss {
+  --button-radius: var(--radius-lg);
+  --card-radius: var(--radius-xl);
+  --input-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-sm);
+  --app-shell-radius: var(--radius-xl);
+  --panel-shell-radius: var(--radius-lg);
+  --panel-shell-shadow: var(--shadow-sm);
+}
+
+/* Understory — organic radii, matte surfaces */
+:root.understory {
+  --button-radius: var(--radius-lg);
+  --card-radius: var(--radius-xl);
+  --input-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-xs);
+  --app-shell-radius: var(--radius-xl);
+  --panel-shell-radius: var(--radius-lg);
+  --panel-shell-shadow: var(--shadow-xs);
+}
+
+/* Colorblind Safe — clean rounded shells, no button shadows */
+:root.colorblind-safe {
+  --button-radius: var(--radius-md);
+  --card-radius: var(--radius-lg);
+  --input-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-xs);
+  --app-shell-radius: var(--radius-xl);
+  --panel-shell-radius: var(--radius-lg);
+  --panel-shell-shadow: var(--shadow-xs);
+}
+
+/* Low Fatigue — soft radii, minimal shadows (nothing sharp for long sessions) */
+:root.low-fatigue {
+  --button-radius: var(--radius-lg);
+  --card-radius: var(--radius-xl);
+  --input-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-xs);
+  --app-shell-radius: var(--radius-xl);
+  --panel-shell-radius: var(--radius-lg);
+  --panel-shell-shadow: var(--shadow-xs);
+}
+
+/* High Legibility — modest radii, flat surfaces; edges come from borders, not shadows */
+:root.high-legibility {
+  --button-radius: var(--radius-md);
+  --card-radius: var(--radius-lg);
+  --input-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-none);
+  --modal-shadow: var(--shadow-lg);
+  --app-shell-radius: var(--radius-lg);
+  --panel-shell-radius: var(--radius-md);
+  --panel-shell-shadow: var(--shadow-none);
+}
diff --git a/frontend/src/styles/tokens/spacing.css b/frontend/src/styles/tokens/spacing.css
index 2de487e1..68f28cff 100644
--- a/frontend/src/styles/tokens/spacing.css
+++ b/frontend/src/styles/tokens/spacing.css
@@ -121,6 +121,40 @@
   --panel-shell-gap: var(--space-3);
 }
 
+/* Synthwave Theme — medium density */
+:root.synthwave {
+  --panel-tab-height: 2rem;
+  --button-padding-x: var(--space-3-5);
+  --button-padding-y: var(--space-1-5);
+  --card-padding: var(--space-3);
+  --app-frame-padding: var(--space-2-5);
+  --app-frame-gap: var(--space-2-5);
+  --panel-shell-gap: var(--space-2-5);
+}
+
+/* Acid Terminal Theme — compact terminal density */
+:root.acid {
+  --panel-tab-height: 1.75rem;
+  --button-padding-x: var(--space-3);
+  --button-padding-y: var(--space-1-5);
+  --card-padding: var(--space-2);
+  --card-padding-lg: var(--space-4);
+  --app-frame-padding: var(--space-2);
+  --app-frame-gap: var(--space-2);
+  --panel-shell-gap: var(--space-2);
+}
+
+/* Tokyo Rain Theme — spacious density */
+:root.tokyo-rain {
+  --panel-tab-height: 2.25rem;
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --card-padding: var(--space-3);
+  --app-frame-padding: var(--space-3);
+  --app-frame-gap: var(--space-3);
+  --panel-shell-gap: var(--space-3);
+}
+
 /* Light Rounded — light palette with islanded shell layout */
 :root.light-rounded {
   --panel-tab-height: 2.5rem;
@@ -131,3 +165,96 @@
   --app-frame-gap: var(--space-2-5);
   --panel-shell-gap: var(--space-2-5);
 }
+
+/* Amber CRT — medium density, islanded shells */
+:root.amber-crt {
+  --panel-tab-height: 2.25rem;
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --card-padding: var(--space-3);
+  --app-frame-padding: var(--space-2-5);
+  --app-frame-gap: var(--space-2-5);
+  --panel-shell-gap: var(--space-2-5);
+}
+
+/* Teletype — roomy paper margins */
+:root.teletype {
+  --panel-tab-height: 2.5rem;
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --card-padding: var(--space-3);
+  --app-frame-padding: var(--space-2-5);
+  --app-frame-gap: var(--space-2-5);
+  --panel-shell-gap: var(--space-2-5);
+}
+
+/* Dot Matrix — compact LCD density */
+:root.dot-matrix {
+  --panel-tab-height: 1.875rem;      /* 30px */
+  --button-padding-x: var(--space-3);
+  --button-padding-y: var(--space-1-5);
+  --card-padding: var(--space-2);
+  --app-frame-padding: var(--space-2);
+  --app-frame-gap: var(--space-2);
+  --panel-shell-gap: var(--space-2);
+}
+
+/* Haar — airy fog spacing, islanded shells */
+:root.haar {
+  --panel-tab-height: 2.5rem;
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --card-padding: var(--space-3);
+  --app-frame-padding: var(--space-2-5);
+  --app-frame-gap: var(--space-2-5);
+  --panel-shell-gap: var(--space-2-5);
+}
+
+/* Abyss — medium density, islanded shells */
+:root.abyss {
+  --panel-tab-height: 2.25rem;
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --card-padding: var(--space-3);
+  --app-frame-padding: var(--space-2-5);
+  --app-frame-gap: var(--space-2-5);
+  --panel-shell-gap: var(--space-2-5);
+}
+
+/* Understory — medium density, islanded shells */
+:root.understory {
+  --panel-tab-height: 2.25rem;
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --card-padding: var(--space-3);
+  --app-frame-padding: var(--space-2-5);
+  --app-frame-gap: var(--space-2-5);
+  --panel-shell-gap: var(--space-2-5);
+}
+
+/* Colorblind Safe — standard density with islanded shells */
+:root.colorblind-safe {
+  --panel-tab-height: 2.25rem;
+  --app-frame-padding: var(--space-2-5);
+  --app-frame-gap: var(--space-2-5);
+  --panel-shell-gap: var(--space-2-5);
+}
+
+/* Low Fatigue — slightly relaxed density; taller tabs and more breathing room */
+:root.low-fatigue {
+  --panel-tab-height: 2.5rem;
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --card-padding: var(--space-3);
+  --app-frame-padding: var(--space-3);
+  --app-frame-gap: var(--space-3);
+  --panel-shell-gap: var(--space-3);
+}
+
+/* High Legibility — standard density; larger tab targets */
+:root.high-legibility {
+  --panel-tab-height: 2.5rem;
+  --app-frame-padding: var(--space-2-5);
+  --app-frame-gap: var(--space-2-5);
+  --panel-shell-gap: var(--space-2-5);
+}
diff --git a/frontend/src/types/config.ts b/frontend/src/types/config.ts
index 1b7b33f0..ccedf280 100644
--- a/frontend/src/types/config.ts
+++ b/frontend/src/types/config.ts
@@ -81,7 +81,7 @@ export interface AppConfig {
   stravuApiKey?: string;
   stravuServerUrl?: string;
   // Theme preference
-  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta';
+  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta' | 'synthwave' | 'acid' | 'tokyo-rain' | 'folio' | 'newsprint' | 'walnut' | 'amber-crt' | 'teletype' | 'dot-matrix' | 'haar' | 'abyss' | 'understory' | 'colorblind-safe' | 'low-fatigue' | 'high-legibility';
   // Opt-in high contrast mode: raises muted chrome text to AAA and the terminal's
   // minimumContrastRatio so dim CLI output stays legible
   highContrast?: boolean;
diff --git a/frontend/src/utils/themeOptions.ts b/frontend/src/utils/themeOptions.ts
new file mode 100644
index 00000000..fb9e0be8
--- /dev/null
+++ b/frontend/src/utils/themeOptions.ts
@@ -0,0 +1,67 @@
+import type { Theme } from '../contexts/themeContextValue';
+
+export type ThemeFamily = 'Standard' | 'Neon' | 'Editorial' | 'Retro' | 'Atmosphere' | 'Accessibility';
+
+export interface ThemeOption {
+  id: Theme;
+  label: string;
+  /** One-line vibe shown under the label in theme pickers. */
+  description: string;
+  /** Picker group. The Appearance Select renders one labelled group per family; the Home dropdown is flat. */
+  family: ThemeFamily;
+}
+
+// Picker order: the original themes first (their long-standing order), then the
+// 15 batch themes grouped by family — neon, editorial, retro, atmosphere,
+// accessibility. Every Theme id must appear here exactly once.
+export const THEME_OPTIONS = [
+  { id: 'light-rounded', label: 'Light (rounded)', description: 'Clean white with rounded, islanded panels', family: 'Standard' },
+  { id: 'light', label: 'Light (sharp)', description: 'Clean white, flat edge-to-edge chrome', family: 'Standard' },
+  { id: 'forge', label: 'Forge', description: 'IntelliJ-style two-tone graphite with a blue accent', family: 'Standard' },
+  { id: 'night-owl', label: 'Night Owl', description: 'Warm rose and crimson, no blue light', family: 'Standard' },
+  { id: 'night-owl-oled', label: 'Night Owl (OLED)', description: 'Night Owl on pure-black foundations', family: 'Standard' },
+  { id: 'dusk', label: 'Dusk', description: 'Achromatic navy-gray with soft radii', family: 'Standard' },
+  { id: 'dusk-oled', label: 'Dusk (OLED)', description: 'Dusk on pure-black foundations', family: 'Standard' },
+  { id: 'ember', label: 'Ember', description: 'Synthwave graphite with a copper-pink glow', family: 'Standard' },
+  { id: 'aurora', label: 'Aurora', description: 'Rosé Pine-inspired romantic dark', family: 'Standard' },
+  { id: 'terracotta', label: 'Terracotta', description: 'Warm dusty earth tones, no blue light', family: 'Standard' },
+  { id: 'dark', label: 'Dark (sharp)', description: 'GitHub-style dark, flat edge-to-edge chrome', family: 'Standard' },
+  { id: 'oled', label: 'OLED Black (sharp)', description: 'True black for OLED displays', family: 'Standard' },
+  { id: 'synthwave', label: 'Synthwave', description: 'Violet-black with magenta and cyan neon accents.', family: 'Neon' },
+  { id: 'acid', label: 'Acid Terminal', description: 'Charcoal-black with electric lime and amber accents.', family: 'Neon' },
+  { id: 'tokyo-rain', label: 'Tokyo Rain', description: 'Blue-black with pink and blue signage accents.', family: 'Neon' },
+  { id: 'folio', label: 'Folio', description: 'Paper & ink — warm cream, near-black type, one vermilion accent.', family: 'Editorial' },
+  { id: 'newsprint', label: 'Newsprint', description: 'Cool grey stock, graphite type, halftone surfaces, ink-blue accent.', family: 'Editorial' },
+  { id: 'walnut', label: 'Walnut', description: 'Vellum & walnut — warm brown-black, parchment type, brass accent.', family: 'Editorial' },
+  { id: 'amber-crt', label: 'Amber CRT', description: 'Amber phosphor on black-brown glass', family: 'Retro' },
+  { id: 'teletype', label: 'Teletype', description: 'Brown ink on warm paper, burnt-orange accents', family: 'Retro' },
+  { id: 'dot-matrix', label: 'Dot Matrix', description: 'Monochrome LCD green on olive-black', family: 'Retro' },
+  { id: 'haar', label: 'Haar', description: 'Pre-dawn sea fog — cold blue-white surfaces, ink text', family: 'Atmosphere' },
+  { id: 'abyss', label: 'Abyss', description: 'Deep ocean — near-black navy, bioluminescent teal accent', family: 'Atmosphere' },
+  { id: 'understory', label: 'Understory', description: 'Forest floor — moss greens, bark-brown chrome, lichen accent', family: 'Atmosphere' },
+  { id: 'colorblind-safe', label: 'Colorblind Safe', description: 'Dark. Okabe-Ito status, diff and terminal colors, readable with any color-vision deficiency.', family: 'Accessibility' },
+  { id: 'low-fatigue', label: 'Low Fatigue', description: 'Warm sepia-dark for long sessions: low blue, no pure white, soft ≥4.5:1 text.', family: 'Accessibility' },
+  { id: 'high-legibility', label: 'High Legibility', description: 'Light. 7:1+ body text, crisp 3:1 borders and focus rings, color only for state.', family: 'Accessibility' },
+] as const satisfies readonly ThemeOption[];
+
+type CoveredTheme = (typeof THEME_OPTIONS)[number]['id'];
+
+// SAFETY: the cast narrows Object.fromEntries' string-keyed result to the ids that are
+// literally present in THEME_OPTIONS; assigning that to Record<Theme, string> is a
+// compile-time check that every Theme id has an entry (a missing id fails typecheck).
+const THEME_LABELS: Record<Theme, string> = Object.fromEntries(
+  THEME_OPTIONS.map((option) => [option.id, option.label]),
+) as Record<CoveredTheme, string>;
+
+export const getThemeLabel = (theme: Theme): string => THEME_LABELS[theme];
+
+/** THEME_OPTIONS partitioned by family, in first-appearance order. */
+export const THEME_OPTION_GROUPS: ReadonlyArray<{ family: ThemeFamily; options: readonly ThemeOption[] }> = (() => {
+  const groups: Array<{ family: ThemeFamily; options: ThemeOption[] }> = [];
+  for (const option of THEME_OPTIONS) {
+    const group = groups.find((g) => g.family === option.family);
+    if (group) group.options.push(option);
+    else groups.push({ family: option.family, options: [option] });
+  }
+  return groups;
+})();
diff --git a/main/src/types/config.ts b/main/src/types/config.ts
index dffa889c..46415ea0 100644
--- a/main/src/types/config.ts
+++ b/main/src/types/config.ts
@@ -67,7 +67,7 @@ export interface AppConfig {
   stravuApiKey?: string;
   stravuServerUrl?: string;
   // Theme preference
-  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta';
+  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta' | 'synthwave' | 'acid' | 'tokyo-rain' | 'folio' | 'newsprint' | 'walnut' | 'amber-crt' | 'teletype' | 'dot-matrix' | 'haar' | 'abyss' | 'understory' | 'colorblind-safe' | 'low-fatigue' | 'high-legibility';
   // Opt-in high contrast mode: raises muted chrome text to AAA and the terminal's
   // minimumContrastRatio so dim CLI output stays legible
   highContrast?: boolean;
@@ -167,7 +167,7 @@ export interface UpdateConfigRequest {
   keepAwakeWhileSessionsActive?: boolean;
   stravuApiKey?: string;
   stravuServerUrl?: string;
-  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta';
+  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta' | 'synthwave' | 'acid' | 'tokyo-rain' | 'folio' | 'newsprint' | 'walnut' | 'amber-crt' | 'teletype' | 'dot-matrix' | 'haar' | 'abyss' | 'understory' | 'colorblind-safe' | 'low-fatigue' | 'high-legibility';
   highContrast?: boolean;
   uiScale?: number;
   notifications?: {
diff --git a/package.json b/package.json
index a0786934..a5ed8e0b 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,8 @@
     "deadcode": "knip --reporter compact",
     "perf:scan": "node scripts/pane-run-script.js --react-scan",
     "a11y:scan": "playwright test tests/accessibility.spec.ts",
+    "theme:contrast": "node scripts/check-theme-contrast.mjs",
+    "theme:screenshots": "playwright test -c playwright.themes.config.ts",
     "typecheck": "pnpm run -r typecheck",
     "postinstall": "electron-builder install-app-deps",
     "electron:rebuild": "pnpm exec electron-rebuild -f -w better-sqlite3-multiple-ciphers -m ./main",
diff --git a/playwright.themes.config.ts b/playwright.themes.config.ts
new file mode 100644
index 00000000..4b429342
--- /dev/null
+++ b/playwright.themes.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from '@playwright/test';
+import baseConfig from './playwright.config';
+
+// `pnpm theme:screenshots` — runs only the theme evidence spec and lets it write
+// into screenshots/themes/ (tracked). The default config runs the same spec but
+// keeps its screenshots in the Playwright output directory.
+process.env.PANE_THEME_SCREENSHOTS = '1';
+
+export default defineConfig({
+  ...baseConfig,
+  testMatch: ['**/theme-screenshots.spec.ts'],
+  workers: 1,
+});
diff --git a/screenshots/themes/batch/abyss.png b/screenshots/themes/batch/abyss.png
new file mode 100644
index 00000000..861bcf8b
Binary files /dev/null and b/screenshots/themes/batch/abyss.png differ
diff --git a/screenshots/themes/batch/acid.png b/screenshots/themes/batch/acid.png
new file mode 100644
index 00000000..02c03b98
Binary files /dev/null and b/screenshots/themes/batch/acid.png differ
diff --git a/screenshots/themes/batch/amber-crt.png b/screenshots/themes/batch/amber-crt.png
new file mode 100644
index 00000000..0c317355
Binary files /dev/null and b/screenshots/themes/batch/amber-crt.png differ
diff --git a/screenshots/themes/batch/appearance-picker-full-list.png b/screenshots/themes/batch/appearance-picker-full-list.png
new file mode 100644
index 00000000..298a9032
Binary files /dev/null and b/screenshots/themes/batch/appearance-picker-full-list.png differ
diff --git a/screenshots/themes/batch/appearance-picker.png b/screenshots/themes/batch/appearance-picker.png
new file mode 100644
index 00000000..a9f815da
Binary files /dev/null and b/screenshots/themes/batch/appearance-picker.png differ
diff --git a/screenshots/themes/batch/colorblind-safe-deuteranopia.png b/screenshots/themes/batch/colorblind-safe-deuteranopia.png
new file mode 100644
index 00000000..67b90bba
Binary files /dev/null and b/screenshots/themes/batch/colorblind-safe-deuteranopia.png differ
diff --git a/screenshots/themes/batch/colorblind-safe-protanopia.png b/screenshots/themes/batch/colorblind-safe-protanopia.png
new file mode 100644
index 00000000..6ca79b35
Binary files /dev/null and b/screenshots/themes/batch/colorblind-safe-protanopia.png differ
diff --git a/screenshots/themes/batch/colorblind-safe-tritanopia.png b/screenshots/themes/batch/colorblind-safe-tritanopia.png
new file mode 100644
index 00000000..d96f4ffd
Binary files /dev/null and b/screenshots/themes/batch/colorblind-safe-tritanopia.png differ
diff --git a/screenshots/themes/batch/colorblind-safe.png b/screenshots/themes/batch/colorblind-safe.png
new file mode 100644
index 00000000..304952fd
Binary files /dev/null and b/screenshots/themes/batch/colorblind-safe.png differ
diff --git a/screenshots/themes/batch/dot-matrix.png b/screenshots/themes/batch/dot-matrix.png
new file mode 100644
index 00000000..85e35529
Binary files /dev/null and b/screenshots/themes/batch/dot-matrix.png differ
diff --git a/screenshots/themes/batch/folio-high-contrast.png b/screenshots/themes/batch/folio-high-contrast.png
new file mode 100644
index 00000000..6320e92b
Binary files /dev/null and b/screenshots/themes/batch/folio-high-contrast.png differ
diff --git a/screenshots/themes/batch/folio.png b/screenshots/themes/batch/folio.png
new file mode 100644
index 00000000..83047301
Binary files /dev/null and b/screenshots/themes/batch/folio.png differ
diff --git a/screenshots/themes/batch/haar.png b/screenshots/themes/batch/haar.png
new file mode 100644
index 00000000..b6a96961
Binary files /dev/null and b/screenshots/themes/batch/haar.png differ
diff --git a/screenshots/themes/batch/high-legibility.png b/screenshots/themes/batch/high-legibility.png
new file mode 100644
index 00000000..f307ce42
Binary files /dev/null and b/screenshots/themes/batch/high-legibility.png differ
diff --git a/screenshots/themes/batch/low-fatigue.png b/screenshots/themes/batch/low-fatigue.png
new file mode 100644
index 00000000..dcc97452
Binary files /dev/null and b/screenshots/themes/batch/low-fatigue.png differ
diff --git a/screenshots/themes/batch/newsprint.png b/screenshots/themes/batch/newsprint.png
new file mode 100644
index 00000000..ec99cf54
Binary files /dev/null and b/screenshots/themes/batch/newsprint.png differ
diff --git a/screenshots/themes/batch/synthwave-high-contrast.png b/screenshots/themes/batch/synthwave-high-contrast.png
new file mode 100644
index 00000000..65bb4ace
Binary files /dev/null and b/screenshots/themes/batch/synthwave-high-contrast.png differ
diff --git a/screenshots/themes/batch/synthwave.png b/screenshots/themes/batch/synthwave.png
new file mode 100644
index 00000000..2ce7af78
Binary files /dev/null and b/screenshots/themes/batch/synthwave.png differ
diff --git a/screenshots/themes/batch/teletype.png b/screenshots/themes/batch/teletype.png
new file mode 100644
index 00000000..414c54be
Binary files /dev/null and b/screenshots/themes/batch/teletype.png differ
diff --git a/screenshots/themes/batch/tokyo-rain.png b/screenshots/themes/batch/tokyo-rain.png
new file mode 100644
index 00000000..2fa980d8
Binary files /dev/null and b/screenshots/themes/batch/tokyo-rain.png differ
diff --git a/screenshots/themes/batch/understory.png b/screenshots/themes/batch/understory.png
new file mode 100644
index 00000000..34f066d8
Binary files /dev/null and b/screenshots/themes/batch/understory.png differ
diff --git a/screenshots/themes/batch/walnut.png b/screenshots/themes/batch/walnut.png
new file mode 100644
index 00000000..52377464
Binary files /dev/null and b/screenshots/themes/batch/walnut.png differ
diff --git a/scripts/README.md b/scripts/README.md
index a384b6c7..d8f7b8f6 100644
--- a/scripts/README.md
+++ b/scripts/README.md
@@ -34,4 +34,27 @@ node scripts/generate-notices.js
 The script helps ensure Pane complies with open source license requirements by:
 - Including all third-party license texts in distributions
 - Identifying packages with missing license information
-- Supporting the license-compliance GitHub workflow
\ No newline at end of file
+- Supporting the license-compliance GitHub workflow
+
+## check-theme-contrast.mjs
+
+Contrast and colour-vision-deficiency gate for Pane themes. Parses
+`frontend/src/styles/tokens/colors.css`, composes each theme's tokens the way
+`ThemeProvider` composes classes, and measures WCAG 2.x contrast for text,
+UI (3:1) and terminal ANSI pairs. Simulates protanopia, deuteranopia and
+tritanopia (Machado 2009 matrices) for the status, diff and ANSI palettes.
+
+```bash
+pnpm theme:contrast                    # gate every theme in GATED_THEMES (the 15 batch themes)
+pnpm theme:contrast -- --all --verbose # report every theme (report only, always exit 0)
+pnpm theme:contrast -- --markdown --cvd
+```
+
+Only the themes in `GATED_THEMES` fail the exit code; every other theme is
+report-only so existing debt does not block CI. Each gated theme carries the
+profile its family was designed to (`body` / `ui` / `terminal` / `status`
+minimums; `strictUi` adds the hairline pairs — 1px input border, scrollbar
+thumb, subtle focus ring — that only the accessibility family commits to;
+`cvd` gates the colour-vision simulation). Add a theme to `THEME_CLASSES` (and
+to `GATED_THEMES` when it should be enforced) when adding one to
+`themeContextValue.ts`.
diff --git a/scripts/check-theme-contrast.mjs b/scripts/check-theme-contrast.mjs
new file mode 100644
index 00000000..2ee8f663
--- /dev/null
+++ b/scripts/check-theme-contrast.mjs
@@ -0,0 +1,542 @@
+#!/usr/bin/env node
+/**
+ * Theme contrast + color-vision-deficiency (CVD) gate for Pane themes.
+ *
+ * Reads frontend/src/styles/tokens/colors.css, resolves each theme's semantic
+ * tokens (following the same class composition ThemeProvider applies), and
+ * measures WCAG 2.x contrast for the text/UI/terminal pairs listed below.
+ *
+ *   node scripts/check-theme-contrast.mjs                 # gate every theme in GATED_THEMES
+ *   node scripts/check-theme-contrast.mjs --themes dusk    # report any theme(s)
+ *   node scripts/check-theme-contrast.mjs --all            # report every theme (report only, exit 0)
+ *   node scripts/check-theme-contrast.mjs --markdown       # PR-ready tables
+ *   node scripts/check-theme-contrast.mjs --cvd            # add CVD simulation tables
+ *   node scripts/check-theme-contrast.mjs --verbose        # print passing rows too
+ *
+ * Exit code is 1 when a gated theme fails a threshold. Themes not listed in
+ * GATED_THEMES (the twelve original themes) are report-only so existing debt
+ * does not block CI. Each gated theme carries its own profile — see
+ * GATED_THEMES: `strictUi` additionally gates the hairline pairs (1px input
+ * border, scrollbar thumb, the subtle focus ring) and the "on-dark" link text
+ * on the page background, which only the accessibility family commits to.
+ *
+ * CVD simulation uses the Machado, Oliveira & Fernandes (2009) severity-1.0
+ * matrices applied in linear sRGB — the same matrices as the SVG filters used
+ * for the simulated screenshots in tests/theme-screenshots.spec.ts.
+ */
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const COLORS_CSS = path.join(here, '..', 'frontend', 'src', 'styles', 'tokens', 'colors.css');
+
+// Mirrors THEME_CLASSES in frontend/src/contexts/ThemeProvider.tsx.
+const THEME_CLASSES = {
+  'light': ['light'],
+  'light-rounded': ['light', 'light-rounded'],
+  'dark': ['dark'],
+  'oled': ['dark', 'oled'],
+  'dusk': ['dark', 'dusk'],
+  'dusk-oled': ['dark', 'dusk', 'dusk-oled'],
+  'forge': ['dark', 'forge'],
+  'ember': ['dark', 'ember'],
+  'aurora': ['dark', 'aurora'],
+  'night-owl': ['dark', 'night-owl'],
+  'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
+  'terracotta': ['dark', 'terracotta'],
+  'synthwave': ['dark', 'synthwave'],
+  'acid': ['dark', 'acid'],
+  'tokyo-rain': ['dark', 'tokyo-rain'],
+  'folio': ['light', 'folio'],
+  'newsprint': ['light', 'newsprint'],
+  'walnut': ['dark', 'walnut'],
+  'amber-crt': ['dark', 'amber-crt'],
+  'teletype': ['light', 'teletype'],
+  'dot-matrix': ['dark', 'dot-matrix'],
+  'haar': ['light', 'haar'],
+  'abyss': ['dark', 'abyss'],
+  'understory': ['dark', 'understory'],
+  'colorblind-safe': ['dark', 'colorblind-safe'],
+  'low-fatigue': ['dark', 'low-fatigue'],
+  'high-legibility': ['light', 'high-legibility'],
+};
+
+// Themes that must pass, each with the bar its family was designed to.
+//   body      minimum for text pairs (4.5 = AA; high-legibility promises AAA)
+//   ui        minimum for painted UI (focus ring, input focus, accent, cursor)
+//   terminal  minimum for the 16 ANSI colours on the terminal background
+//   status    minimum for status colours on the page background (defaults to body)
+//   strictUi  also gate hairline pairs (1px input border, scrollbar thumb, subtle
+//             focus ring) and "on-dark" link text on the page background — the
+//             accessibility family's promise; every other Pane theme keeps these
+//             as report-only rows
+//   cvd       also gate the colour-vision-deficiency simulation (Okabe-Ito theme)
+const STANDARD = { body: 4.5, ui: 3, terminal: 4.5 };
+const GATED_THEMES = {
+  // neon (#451)
+  'synthwave': STANDARD,
+  'acid': STANDARD,
+  'tokyo-rain': STANDARD,
+  // editorial (#453)
+  'folio': STANDARD,
+  'newsprint': STANDARD,
+  'walnut': STANDARD,
+  // retro (#454)
+  'amber-crt': STANDARD,
+  'teletype': STANDARD,
+  'dot-matrix': STANDARD,
+  // atmosphere (#456) — designed to the 3:1 UI bar for ANSI and status colours
+  'haar': { body: 4.5, ui: 3, terminal: 3, status: 3 },
+  'abyss': STANDARD,
+  'understory': STANDARD,
+  // accessibility
+  'colorblind-safe': { body: 4.5, ui: 3, terminal: 4.5, strictUi: true, cvd: true },
+  'low-fatigue': { body: 4.5, ui: 3, terminal: 4.5, strictUi: true },
+  'high-legibility': { body: 7, ui: 3, terminal: 4.5, strictUi: true },
+};
+
+// ---------- CSS parsing ----------
+
+function parseBlocks(rawCss) {
+  const css = rawCss.replace(/\/\*[\s\S]*?\*\//g, '');
+  const blocks = new Map(); // selector -> Map(var, value) (later blocks with the same selector are merged)
+  const re = /([^{}]+)\{([^{}]*)\}/g;
+  let match;
+  while ((match = re.exec(css)) !== null) {
+    const selector = match[1].trim();
+    const body = match[2];
+    const vars = blocks.get(selector) ?? new Map();
+    for (const decl of body.split(';')) {
+      const idx = decl.indexOf(':');
+      if (idx === -1) continue;
+      const name = decl.slice(0, idx).trim();
+      if (!name.startsWith('--')) continue;
+      const value = decl.slice(idx + 1).trim();
+      vars.set(name, value);
+    }
+    blocks.set(selector, vars);
+  }
+  return blocks;
+}
+
+function tokensFor(blocks, theme, highContrast = false) {
+  const classes = THEME_CLASSES[theme];
+  if (!classes) throw new Error(`Unknown theme "${theme}"`);
+  const merged = new Map(blocks.get(':root') ?? []);
+  const apply = (selector) => {
+    for (const [name, value] of blocks.get(selector) ?? []) merged.set(name, value);
+  };
+  for (const cls of classes) apply(`:root.${cls}`);
+  if (highContrast) for (const cls of classes) apply(`:root.high-contrast.${cls}`);
+  return merged;
+}
+
+// ---------- color math ----------
+
+function parseColor(raw) {
+  const value = raw.trim();
+  let m = value.match(/^#([0-9a-f]{3,8})$/i);
+  if (m) {
+    const hex = m[1];
+    if (hex.length === 3 || hex.length === 4) {
+      const [r, g, b, a] = hex.split('').map((c) => parseInt(c + c, 16));
+      return { r, g, b, a: hex.length === 4 ? a / 255 : 1 };
+    }
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
+    return { r, g, b, a };
+  }
+  m = value.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.]+%?))?\s*\)$/i);
+  if (m) {
+    let a = 1;
+    if (m[4] !== undefined) a = m[4].endsWith('%') ? parseFloat(m[4]) / 100 : parseFloat(m[4]);
+    return { r: +m[1], g: +m[2], b: +m[3], a };
+  }
+  if (value === 'transparent') return { r: 0, g: 0, b: 0, a: 0 };
+  return null;
+}
+
+function resolve(tokens, name, seen = new Set()) {
+  const raw = tokens.get(name);
+  if (raw === undefined) return undefined;
+  if (seen.has(name)) return undefined;
+  seen.add(name);
+  // rgba(var(--x-rgb), 0.5) → expand the triplet
+  const value = raw.replace(/var\((--[\w-]+)\)/g, (_, ref) => {
+    const inner = resolve(tokens, ref, new Set(seen));
+    return inner === undefined ? _ : inner;
+  });
+  return value;
+}
+
+function color(tokens, name) {
+  const value = resolve(tokens, name);
+  return value === undefined ? null : parseColor(value);
+}
+
+function composite(fg, bg) {
+  if (!fg) return null;
+  if (fg.a >= 1 || !bg) return { r: fg.r, g: fg.g, b: fg.b, a: 1 };
+  const a = fg.a;
+  return {
+    r: fg.r * a + bg.r * (1 - a),
+    g: fg.g * a + bg.g * (1 - a),
+    b: fg.b * a + bg.b * (1 - a),
+    a: 1,
+  };
+}
+
+const lin = (c) => {
+  const s = c / 255;
+  return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+};
+const delin = (l) => {
+  const v = l <= 0.0031308 ? l * 12.92 : 1.055 * l ** (1 / 2.4) - 0.055;
+  return Math.max(0, Math.min(255, Math.round(v * 255)));
+};
+
+function luminance({ r, g, b }) {
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+function contrast(a, b) {
+  const la = luminance(a);
+  const lb = luminance(b);
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+function hex({ r, g, b }) {
+  return '#' + [r, g, b].map((v) => Math.round(v).toString(16).padStart(2, '0')).join('');
+}
+
+// Machado, Oliveira & Fernandes 2009 — severity 1.0, applied in linear RGB.
+const CVD_MATRICES = {
+  protanopia: [
+    [0.152286, 1.052583, -0.204868],
+    [0.114503, 0.786281, 0.099216],
+    [-0.003882, -0.048116, 1.051998],
+  ],
+  deuteranopia: [
+    [0.367322, 0.860646, -0.227968],
+    [0.280085, 0.672501, 0.047413],
+    [-0.011820, 0.042940, 0.968881],
+  ],
+  tritanopia: [
+    [1.255528, -0.076749, -0.178779],
+    [-0.078411, 0.930809, 0.147602],
+    [0.004733, 0.691367, 0.303900],
+  ],
+};
+
+function simulate(c, kind) {
+  const m = CVD_MATRICES[kind];
+  const v = [lin(c.r), lin(c.g), lin(c.b)];
+  const out = m.map((row) => row[0] * v[0] + row[1] * v[1] + row[2] * v[2]);
+  return { r: delin(out[0]), g: delin(out[1]), b: delin(out[2]), a: 1 };
+}
+
+// CIE76 ΔE in Lab (D65) — coarse but adequate for "are these two colors confusable".
+function toLab(c) {
+  const [r, g, b] = [lin(c.r), lin(c.g), lin(c.b)];
+  let x = (0.4124 * r + 0.3576 * g + 0.1805 * b) / 0.95047;
+  let y = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 1.0;
+  let z = (0.0193 * r + 0.1192 * g + 0.9505 * b) / 1.08883;
+  const f = (t) => (t > 0.008856 ? Math.cbrt(t) : 7.787 * t + 16 / 116);
+  x = f(x); y = f(y); z = f(z);
+  return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+}
+function deltaE(a, b) {
+  const [l1, a1, b1] = toLab(a);
+  const [l2, a2, b2] = toLab(b);
+  return Math.hypot(l1 - l2, a1 - a2, b1 - b2);
+}
+
+// ---------- checks ----------
+
+const TEXT_ON_SURFACES = [
+  ['--color-text-primary', '--color-bg-primary'],
+  ['--color-text-primary', '--color-bg-secondary'],
+  ['--color-text-primary', '--color-surface-primary'],
+  ['--color-text-primary', '--color-surface-secondary'],
+  ['--color-text-primary', '--color-bg-chrome'],
+  ['--color-text-primary', '--color-bg-editor'],
+  ['--color-text-secondary', '--color-bg-primary'],
+  ['--color-text-secondary', '--color-surface-primary'],
+  ['--color-text-secondary', '--color-surface-secondary'],
+  ['--color-text-tertiary', '--color-bg-primary'],
+  ['--color-text-tertiary', '--color-surface-secondary'],
+  ['--color-text-muted', '--color-bg-primary'],
+  ['--color-text-muted', '--color-surface-primary'],
+  ['--color-text-interactive-muted', '--color-bg-primary'],
+  ['--color-text-navigation-primary', '--color-surface-navigation'],
+  ['--color-text-navigation-secondary', '--color-surface-navigation'],
+  ['--color-text-navigation-muted', '--color-surface-navigation'],
+  ['--color-text-navigation-section', '--color-surface-navigation'],
+  ['--color-text-navigation-selected', '--color-surface-navigation-selected'],
+  ['--color-text-navigation-hover', '--color-surface-navigation-hover'],
+  ['--color-text-on-surface', '--color-surface-secondary'],
+  ['--color-text-on-tertiary', '--color-bg-tertiary'],
+  ['--color-interactive-text', '--color-bg-primary'],
+  ['--color-interactive-text', '--color-surface-primary'],
+  ['--color-text-interactive-on-dark', '--color-bg-primary', 'strict'],
+  ['--color-button-primary-text', '--color-button-primary-bg'],
+  ['--color-button-primary-text', '--color-button-primary-hover'],
+  ['--color-button-secondary-text', '--color-button-secondary-bg'],
+  ['--color-button-secondary-text', '--color-button-secondary-hover'],
+  ['--color-button-ghost-text', '--color-bg-primary'],
+  ['--color-button-ghost-text', '--color-button-ghost-hover'],
+  ['--color-input-text', '--color-input-bg'],
+  ['--color-input-placeholder', '--color-input-bg'],
+  ['--color-text-on-status-success', '--color-status-success'],
+  ['--color-text-on-status-warning', '--color-status-warning'],
+  ['--color-text-on-status-error', '--color-status-error'],
+  ['--color-text-on-status-info', '--color-status-info'],
+  ['--color-text-on-interactive', '--color-interactive-primary'],
+  ['--color-status-success', '--color-bg-primary', 'status'],
+  ['--color-status-warning', '--color-bg-primary', 'status'],
+  ['--color-status-error', '--color-bg-primary', 'status'],
+  ['--color-status-info', '--color-bg-primary', 'status'],
+  ['--color-status-neutral', '--color-bg-primary', 'status'],
+  ['--color-text-primary', '--color-modal-bg'],
+  ['--color-text-primary', '--color-card-bg'],
+  ['--color-text-secondary', '--color-card-nested-bg'],
+];
+
+// Non-text UI (3:1 — WCAG 1.4.11)
+const UI_ON_SURFACES = [
+  ['--color-focus-ring', '--color-bg-primary'],
+  ['--color-focus-ring', '--color-surface-primary'],
+  // The ring components actually paint (Select trigger, tabs, settings rows) — alpha
+  // composited over the surface it sits on.
+  ['--color-focus-ring-subtle', '--color-bg-primary', 'strict'],
+  ['--color-focus-ring-subtle', '--color-surface-primary', 'strict'],
+  ['--color-input-focus', '--color-input-bg'],
+  ['--color-input-border', '--color-input-bg', 'strict'],
+  ['--color-border-focus', '--color-bg-primary'],
+  ['--color-interactive-primary', '--color-bg-primary'],
+  ['--color-scrollbar-thumb', '--color-scrollbar-track', 'strict'],
+  ['--color-terminal-cursor', '--color-terminal-bg'],
+];
+
+const TERMINAL_FG = [
+  'fg', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white',
+  'bright-black', 'bright-red', 'bright-green', 'bright-yellow', 'bright-blue',
+  'bright-magenta', 'bright-cyan', 'bright-white',
+].map((n) => `--color-terminal-${n}`);
+
+function measure(tokens, fgName, bgName) {
+  const bg = composite(color(tokens, bgName), composite(color(tokens, '--color-bg-primary'), null));
+  const fg = composite(color(tokens, fgName), bg);
+  if (!fg || !bg) return null;
+  return { fg, bg, ratio: contrast(fg, bg) };
+}
+
+function runTheme(theme, blocks, opts) {
+  const gate = GATED_THEMES[theme] ?? null;
+  const bodyMin = gate?.body ?? 4.5;
+  const uiMin = gate?.ui ?? 3;
+  const terminalMin = gate?.terminal ?? 4.5;
+  const statusMin = gate?.status ?? bodyMin;
+  // Ungated themes get the full report; gated themes without strictUi keep the
+  // hairline rows visible but informational.
+  const strictUi = gate ? Boolean(gate.strictUi) : true;
+  const results = [];
+  const variants = [['', false], [' + high-contrast', true]];
+  for (const [suffix, hc] of variants) {
+    const tokens = tokensFor(blocks, theme, hc);
+    const push = (kind, fgName, bgName, min, tag) => {
+      const info = tag === 'strict' && !strictUi;
+      const m = measure(tokens, fgName, bgName);
+      if (!m) {
+        results.push({ variant: suffix, kind, fg: fgName, bg: bgName, ratio: null, min, pass: info, missing: true, info });
+        return;
+      }
+      const pass = m.ratio >= min - 1e-9;
+      results.push({ variant: suffix, kind, fg: fgName, bg: bgName, ratio: m.ratio, min, pass: info || pass, below: !pass, info, fgHex: hex(m.fg), bgHex: hex(m.bg) });
+    };
+    for (const [fg, bg, tag] of TEXT_ON_SURFACES) push('text', fg, bg, tag === 'status' ? statusMin : bodyMin, tag);
+    for (const [fg, bg, tag] of UI_ON_SURFACES) push('ui', fg, bg, uiMin, tag);
+    if (hc) {
+      // The High contrast toggle promises AAA (7:1) for the muted family (PR #362).
+      for (const fg of ['--color-text-muted', '--color-text-interactive-muted', '--color-text-navigation-muted', '--color-text-navigation-section']) {
+        push('text-aaa', fg, '--color-bg-primary', Math.max(7, bodyMin));
+      }
+    }
+    for (const fg of TERMINAL_FG) push('terminal', fg, '--color-terminal-bg', terminalMin);
+    if (!hc) {
+      // Disabled text is exempt from 1.4.3 but must still be perceivable: report only.
+      const m = measure(tokens, '--color-text-disabled', '--color-bg-primary');
+      if (m) results.push({ variant: suffix, kind: 'info', fg: '--color-text-disabled', bg: '--color-bg-primary', ratio: m.ratio, min: 0, pass: true, info: true, fgHex: hex(m.fg), bgHex: hex(m.bg) });
+    }
+  }
+
+  let cvd = null;
+  if (opts.cvd || gate?.cvd) cvd = runCvd(tokensFor(blocks, theme, false));
+  return { theme, gate, bodyMin, uiMin, terminalMin, statusMin, results, cvd };
+}
+
+// Semantic pairs that must stay distinguishable for every CVD type.
+const CVD_SETS = [
+  { name: 'status', bg: '--color-bg-primary', tokens: ['--color-status-success', '--color-status-warning', '--color-status-error', '--color-status-info'] },
+  { name: 'diff-text', bg: '--color-bg-editor', tokens: ['--color-status-success', '--color-status-error'] },
+  // The actual diff line backgrounds (git-diff-view tints), where defined by the theme.
+  { name: 'diff-bg', bg: '--color-bg-editor', tokens: ['--color-diff-add-bg', '--color-diff-del-bg'], optional: true },
+  { name: 'diff-gutter', bg: '--color-bg-editor', tokens: ['--color-diff-add-gutter', '--color-diff-del-gutter'], optional: true },
+  { name: 'ansi', bg: '--color-terminal-bg', tokens: ['--color-terminal-red', '--color-terminal-green', '--color-terminal-yellow', '--color-terminal-blue', '--color-terminal-magenta', '--color-terminal-cyan'] },
+  { name: 'ansi-bright', bg: '--color-terminal-bg', tokens: ['--color-terminal-bright-red', '--color-terminal-bright-green', '--color-terminal-bright-yellow', '--color-terminal-bright-blue', '--color-terminal-bright-magenta', '--color-terminal-bright-cyan'] },
+];
+const CVD_MIN_DELTA_E = 15; // CIE76; ~6× a just-noticeable difference — swatches read as different colors side by side
+
+function runCvd(tokens) {
+  const out = [];
+  for (const set of CVD_SETS) {
+    const bg = composite(color(tokens, set.bg), composite(color(tokens, '--color-bg-primary'), null));
+    const colors = set.tokens.map((t) => [t, composite(color(tokens, t), bg)]).filter(([, c]) => c);
+    if (set.optional && colors.length < set.tokens.length) continue; // theme does not define these tokens
+    for (const kind of ['normal', ...Object.keys(CVD_MATRICES)]) {
+      const sim = colors.map(([t, c]) => [t, kind === 'normal' ? c : simulate(c, kind)]);
+      let worst = null;
+      for (let i = 0; i < sim.length; i += 1) {
+        for (let j = i + 1; j < sim.length; j += 1) {
+          const dE = deltaE(sim[i][1], sim[j][1]);
+          if (!worst || dE < worst.dE) worst = { a: sim[i][0], b: sim[j][0], dE, aHex: hex(sim[i][1]), bHex: hex(sim[j][1]) };
+        }
+      }
+      // Also each simulated color must remain readable on the (simulated) background.
+      const simBg = kind === 'normal' ? bg : simulate(bg, kind);
+      const minOnBg = Math.min(...sim.map(([, c]) => contrast(c, simBg)));
+      out.push({ set: set.name, kind, worst, minOnBg, pass: worst ? worst.dE >= CVD_MIN_DELTA_E : true });
+    }
+  }
+  return out;
+}
+
+// ---------- reporting ----------
+
+const fmt = (n) => (n === null || n === undefined ? '—' : n.toFixed(2));
+const short = (name) => name.replace(/^--color-/, '');
+
+function printText(report, showAll) {
+  const { theme, gate, results, cvd } = report;
+  const failures = results.filter((r) => !r.pass);
+  const statusNote = gate && report.statusMin !== report.bodyMin ? `, status ≥ ${report.statusMin}:1` : '';
+  console.log(`\n== ${theme}${gate ? ` (gated: text ≥ ${report.bodyMin}:1, UI ≥ ${report.uiMin}:1, terminal ≥ ${report.terminalMin}:1${statusNote}${gate.strictUi ? ', hairlines gated' : ''})` : ' (report only)'} ==`);
+  for (const r of results) {
+    if (!showAll && r.pass && !r.below) continue;
+    const status = r.missing ? (r.info ? 'n/a ' : 'MISSING') : r.info ? (r.below ? 'low ' : 'ok  ') : r.pass ? 'ok  ' : 'FAIL';
+    const note = r.info && r.below ? '  (report only)' : '';
+    console.log(`  ${status} ${r.kind.padEnd(8)} ${short(r.fg).padEnd(34)} on ${short(r.bg).padEnd(30)} ${fmt(r.ratio).padStart(6)}:1  (min ${r.min})${r.variant}${note}`);
+  }
+  const gated = results.filter((r) => !r.info);
+  console.log(`  ${gated.length - failures.length}/${gated.length} checks pass`);
+  if (cvd) {
+    console.log('  CVD simulation (Machado 2009, severity 1.0) — worst pair ΔE (CIE76), min contrast on bg:');
+    const cvdGated = Boolean(gate?.cvd);
+    for (const row of cvd) {
+      const status = row.pass ? 'ok  ' : cvdGated ? 'FAIL' : 'low ';
+      console.log(`  ${status} ${row.set.padEnd(12)} ${row.kind.padEnd(13)} ΔE ${fmt(row.worst?.dE).padStart(6)}  (${short(row.worst?.a ?? '')} vs ${short(row.worst?.b ?? '')})  min ${fmt(row.minOnBg)}:1`);
+    }
+  }
+}
+
+function printMarkdown(report) {
+  const { theme, results, cvd } = report;
+  const base = results.filter((r) => r.variant === '');
+  const pick = (fg, bg) => base.find((r) => r.fg === fg && r.bg === bg);
+  const row = (label, fg, bg) => {
+    const r = pick(fg, bg);
+    if (!r) return null;
+    return `| ${label} | \`${r.fgHex}\` on \`${r.bgHex}\` | ${fmt(r.ratio)}:1 | ${r.pass ? '✅' : '❌'} |`;
+  };
+  console.log(`\n#### ${theme} — measured contrast (WCAG 2.x)\n`);
+  console.log('| Pair | Colors | Ratio | Pass |');
+  console.log('|---|---|---|---|');
+  const rows = [
+    row('Body text / bg', '--color-text-primary', '--color-bg-primary'),
+    row('Body text / editor', '--color-text-primary', '--color-bg-editor'),
+    row('Secondary text / bg', '--color-text-secondary', '--color-bg-primary'),
+    row('Tertiary text / bg', '--color-text-tertiary', '--color-bg-primary'),
+    row('Muted text / bg', '--color-text-muted', '--color-bg-primary'),
+    row('Sidebar text / sidebar', '--color-text-navigation-primary', '--color-surface-navigation'),
+    row('Sidebar muted / sidebar', '--color-text-navigation-muted', '--color-surface-navigation'),
+    row('Link text / bg', '--color-interactive-text', '--color-bg-primary'),
+    row('Primary button', '--color-button-primary-text', '--color-button-primary-bg'),
+    row('Secondary button', '--color-button-secondary-text', '--color-button-secondary-bg'),
+    row('Input text / input', '--color-input-text', '--color-input-bg'),
+    row('Placeholder / input', '--color-input-placeholder', '--color-input-bg'),
+    row('Success / bg', '--color-status-success', '--color-bg-primary'),
+    row('Warning / bg', '--color-status-warning', '--color-bg-primary'),
+    row('Error / bg', '--color-status-error', '--color-bg-primary'),
+    row('Info / bg', '--color-status-info', '--color-bg-primary'),
+    row('Text on success chip', '--color-text-on-status-success', '--color-status-success'),
+    row('Text on error chip', '--color-text-on-status-error', '--color-status-error'),
+    row('Focus ring / bg (UI 3:1)', '--color-focus-ring', '--color-bg-primary'),
+    row('Terminal fg / terminal bg', '--color-terminal-fg', '--color-terminal-bg'),
+  ].filter(Boolean);
+  for (const r of rows) console.log(r);
+  const term = base.filter((r) => r.kind === 'terminal' && r.fg !== '--color-terminal-fg');
+  const worstTerm = term.reduce((acc, r) => (acc === null || r.ratio < acc.ratio ? r : acc), null);
+  if (worstTerm) console.log(`| Terminal ANSI (worst of 15) | \`${worstTerm.fgHex}\` (${short(worstTerm.fg)}) on \`${worstTerm.bgHex}\` | ${fmt(worstTerm.ratio)}:1 | ${worstTerm.pass ? '✅' : '❌'} |`);
+  const gatedBase = base.filter((r) => !r.info);
+  const total = gatedBase.length;
+  const passing = gatedBase.filter((r) => r.pass).length;
+  const hc = results.filter((r) => r.variant !== '');
+  const hcPassing = hc.filter((r) => r.pass).length;
+  console.log(`\n${passing}/${total} token pairs pass at this theme's thresholds; ${hcPassing}/${hc.length} with High contrast on.`);
+  if (cvd) {
+    console.log(`\n#### ${theme} — CVD simulation (Machado 2009, severity 1.0; worst pairwise ΔE, CIE76)\n`);
+    console.log('| Set | Normal | Protanopia | Deuteranopia | Tritanopia |');
+    console.log('|---|---|---|---|---|');
+    for (const setName of [...new Set(cvd.map((c) => c.set))]) {
+      const cells = ['normal', 'protanopia', 'deuteranopia', 'tritanopia'].map((k) => {
+        const r = cvd.find((c) => c.set === setName && c.kind === k);
+        return r ? `${fmt(r.worst?.dE)} ${r.pass ? '✅' : '❌'}` : '—';
+      });
+      console.log(`| ${setName} | ${cells.join(' | ')} |`);
+    }
+    console.log(`\nΔE ≥ ${CVD_MIN_DELTA_E} between every pair in a set is the pass bar (below that two swatches read as the same color at a glance).`);
+  }
+}
+
+// ---------- main ----------
+
+const args = process.argv.slice(2);
+const flag = (name) => args.includes(name);
+const themesArg = args.find((a) => a.startsWith('--themes='))?.slice('--themes='.length)
+  ?? (args.includes('--themes') ? args[args.indexOf('--themes') + 1] : null);
+const showAll = flag('--verbose');
+const markdown = flag('--markdown');
+const cvd = flag('--cvd');
+
+const css = readFileSync(COLORS_CSS, 'utf8');
+const blocks = parseBlocks(css);
+const themes = flag('--all')
+  ? Object.keys(THEME_CLASSES)
+  : themesArg
+    ? themesArg.split(',').map((t) => t.trim()).filter(Boolean)
+    : Object.keys(GATED_THEMES);
+const unknown = themes.filter((t) => !THEME_CLASSES[t]);
+if (unknown.length) {
+  console.error(`Unknown theme(s): ${unknown.join(', ')}. Known: ${Object.keys(THEME_CLASSES).join(', ')}`);
+  process.exit(2);
+}
+
+let failed = false;
+const reportOnly = flag('--all');
+for (const theme of themes) {
+  const report = runTheme(theme, blocks, { cvd });
+  if (markdown) printMarkdown(report);
+  else printText(report, showAll);
+  if (report.gate && !reportOnly) {
+    if (report.results.some((r) => !r.pass)) failed = true;
+    if (report.gate.cvd && report.cvd?.some((r) => !r.pass)) failed = true;
+  }
+}
+if (failed) {
+  console.error('\nTheme contrast gate FAILED.');
+  process.exit(1);
+}
diff --git a/tests/accessibility.spec.ts b/tests/accessibility.spec.ts
index 0a4f8f22..9e671d1d 100644
--- a/tests/accessibility.spec.ts
+++ b/tests/accessibility.spec.ts
@@ -250,7 +250,7 @@ test('Home and About are axe-clean and the modal contains and restores focus', a
   await expect(dialog).toBeHidden();
   await expect(aboutButton).toBeFocused();
 
-  const themeTrigger = page.getByRole('button', { name: /\(sharp\)|\(rounded\)|OLED|Dusk|Forge|Ember|Aurora|Night Owl|Terracotta/ }).last();
+  const themeTrigger = page.getByRole('button', { name: /\(sharp\)|\(rounded\)|OLED|Dusk|Forge|Ember|Aurora|Night Owl|Terracotta|Synthwave|Acid Terminal|Tokyo Rain|Folio|Newsprint|Walnut|Amber CRT|Teletype|Dot Matrix|Haar|Abyss|Understory|Colorblind Safe|Low Fatigue|High Legibility/ }).last();
   await themeTrigger.focus();
   await page.keyboard.press('Enter');
   await expect(page.getByRole('menu')).toBeVisible();
@@ -262,9 +262,10 @@ test('Home and About are axe-clean and the modal contains and restores focus', a
 test('Night Owl recent-pane metadata remains axe-clean', async ({ page }) => {
   await openDesktop(page);
 
-  const themeTrigger = page.getByRole('button', { name: /\(sharp\)|\(rounded\)|OLED|Dusk|Forge|Ember|Aurora|Night Owl|Terracotta/ }).last();
+  const themeTrigger = page.getByRole('button', { name: /\(sharp\)|\(rounded\)|OLED|Dusk|Forge|Ember|Aurora|Night Owl|Terracotta|Synthwave|Acid Terminal|Tokyo Rain|Folio|Newsprint|Walnut|Amber CRT|Teletype|Dot Matrix|Haar|Abyss|Understory|Colorblind Safe|Low Fatigue|High Legibility/ }).last();
   await themeTrigger.click();
-  await page.getByRole('menuitemradio', { name: 'Night Owl', exact: true }).click();
+  // Item names include the picker description, so match the label prefix (and not the OLED variant).
+  await page.getByRole('menuitemradio', { name: /^Night Owl(?! \(OLED\))/ }).click();
   await expect(themeTrigger).toHaveText(/Night Owl/);
   await expectNoAxeViolations(page);
 });
diff --git a/tests/dropdown-keyboard-nav.spec.ts b/tests/dropdown-keyboard-nav.spec.ts
index 393f9009..cd8003c8 100644
--- a/tests/dropdown-keyboard-nav.spec.ts
+++ b/tests/dropdown-keyboard-nav.spec.ts
@@ -60,13 +60,15 @@ test.describe('Dropdown keyboard navigation', () => {
     const focusedItem = page.locator('[role="menuitemradio"]:focus');
     await expect(focusedItem).toHaveText(/Light \(rounded\)/);
 
-    // ArrowDown moves to the next item (Forge), ArrowUp moves back.
+    // ArrowDown moves to the next item (Light (sharp)), ArrowUp moves back.
+    // Item order comes from THEME_OPTIONS in frontend/src/utils/themeOptions.ts.
     await page.keyboard.press('ArrowDown');
-    await expect(focusedItem).toHaveText(/Forge/);
+    await expect(focusedItem).toHaveText(/Light \(sharp\)/);
     await page.keyboard.press('ArrowUp');
     await expect(focusedItem).toHaveText(/Light \(rounded\)/);
 
-    // Navigate to Forge and select it with Enter.
+    // Navigate to Forge (third item) and select it with Enter.
+    await page.keyboard.press('ArrowDown');
     await page.keyboard.press('ArrowDown');
     await expect(focusedItem).toHaveText(/Forge/);
     await page.keyboard.press('Enter');
@@ -96,17 +98,15 @@ test.describe('Dropdown keyboard navigation', () => {
 
     await expect(page.getByRole('menu')).toBeVisible({ timeout: 5000 });
 
-    await page.keyboard.press('ArrowDown'); // move highlight to Forge
+    await page.keyboard.press('ArrowDown'); // move highlight to Light (sharp)
     await page.keyboard.press('Escape');
 
     await expect(page.getByRole('menu')).toHaveCount(0);
-    // Highlighting Forge then pressing Escape must NOT commit the theme:
+    // Highlighting another item then pressing Escape must NOT commit the theme:
     // the document still carries the original light-rounded theme classes.
     const themeClasses = await page.evaluate(() => ({
-      forge: document.documentElement.classList.contains('forge'),
       lightRounded: document.documentElement.classList.contains('light-rounded'),
     }));
-    expect(themeClasses.forge).toBe(false);
     expect(themeClasses.lightRounded).toBe(true);
   });
 });
diff --git a/tests/settings.spec.ts b/tests/settings.spec.ts
index f7e32fe0..4e9d5a2b 100644
--- a/tests/settings.spec.ts
+++ b/tests/settings.spec.ts
@@ -344,7 +344,8 @@ test.describe('Settings', () => {
     await bootSettings(page, { initialConfig: { theme: 'light-rounded' } });
     await page.getByRole('button', { name: 'Appearance', exact: true }).click();
     await page.getByRole('combobox', { name: 'Theme' }).click();
-    await page.getByRole('option', { name: 'Night Owl', exact: true }).click();
+    // Options carry their picker description in the accessible name; match the label prefix (not the OLED variant).
+    await page.getByRole('option', { name: /^Night Owl(?! \(OLED\))/ }).click();
     await expect(page.locator('html')).toHaveClass(/night-owl/);
     await expect(page.getByRole('dialog', { name: 'Pane Settings' })).toBeVisible();
     await page.screenshot({ path: 'test-results/settings-dark.png' });
diff --git a/tests/theme-screenshots.spec.ts b/tests/theme-screenshots.spec.ts
new file mode 100644
index 00000000..938ddeb0
--- /dev/null
+++ b/tests/theme-screenshots.spec.ts
@@ -0,0 +1,426 @@
+import { expect, test, type Page, type TestInfo } from '@playwright/test';
+import { mkdirSync } from 'node:fs';
+import path from 'node:path';
+import { installElectronApiMock } from './electronApiMock';
+
+/**
+ * Evidence screenshots for the 15 batch themes (neon, editorial, retro,
+ * atmosphere and accessibility families).
+ *
+ * Writes `screenshots/themes/batch/<theme-id>.png` (the same view for every
+ * theme: sidebar + a session with the terminal dock and the diff/review panel
+ * visible), `<theme-id>-high-contrast.png` for one light and one dark theme,
+ * colour-vision-deficiency simulations for the colorblind-safe theme, and the
+ * Appearance picker showing the full grouped list.
+ *
+ * Run: `pnpm theme:screenshots` (uses playwright.themes.config.ts, which sets
+ * PANE_THEME_SCREENSHOTS=1 so the files land in screenshots/themes/batch/).
+ * Under a plain `pnpm test` the same assertions run but screenshots go to the
+ * Playwright output directory. A Vite dev server is enough — the electron API
+ * is mocked.
+ */
+
+// Committed evidence lives in screenshots/themes/batch/. Only the dedicated
+// `pnpm theme:screenshots` config (playwright.themes.config.ts) sets
+// PANE_THEME_SCREENSHOTS, so a plain `pnpm test` never rewrites tracked PNGs.
+const WRITE_TO_REPO = process.env.PANE_THEME_SCREENSHOTS === '1';
+const OUTPUT_DIR = path.resolve(__dirname, '..', 'screenshots', 'themes', 'batch');
+// Family order matches THEME_OPTIONS (frontend/src/utils/themeOptions.ts).
+const BATCH_THEMES = [
+  'synthwave', 'acid', 'tokyo-rain',
+  'folio', 'newsprint', 'walnut',
+  'amber-crt', 'teletype', 'dot-matrix',
+  'haar', 'abyss', 'understory',
+  'colorblind-safe', 'low-fatigue', 'high-legibility',
+] as const;
+type BatchTheme = (typeof BATCH_THEMES)[number];
+const CVD_THEME: BatchTheme = 'colorblind-safe';
+// High-contrast mode is asserted for every theme; captured for one light and one dark theme.
+const HIGH_CONTRAST_CAPTURES: readonly BatchTheme[] = ['folio', 'synthwave'];
+const PICKER_LABELS = [
+  'Synthwave', 'Acid Terminal', 'Tokyo Rain',
+  'Folio', 'Newsprint', 'Walnut',
+  'Amber CRT', 'Teletype', 'Dot Matrix',
+  'Haar', 'Abyss', 'Understory',
+  'Colorblind Safe', 'Low Fatigue', 'High Legibility',
+];
+const PICKER_GROUPS = ['Standard', 'Neon', 'Editorial', 'Retro', 'Atmosphere', 'Accessibility'];
+
+// Machado, Oliveira & Fernandes (2009) severity-1.0 matrices — the same ones
+// scripts/check-theme-contrast.mjs uses, applied here as an SVG feColorMatrix
+// (which operates in linearRGB by default, matching the script).
+const CVD_MATRICES = {
+  protanopia: [
+    [0.152286, 1.052583, -0.204868],
+    [0.114503, 0.786281, 0.099216],
+    [-0.003882, -0.048116, 1.051998],
+  ],
+  deuteranopia: [
+    [0.367322, 0.860646, -0.227968],
+    [0.280085, 0.672501, 0.047413],
+    [-0.011820, 0.042940, 0.968881],
+  ],
+  tritanopia: [
+    [1.255528, -0.076749, -0.178779],
+    [-0.078411, 0.930809, 0.147602],
+    [0.004733, 0.691367, 0.303900],
+  ],
+} satisfies Record<string, number[][]>;
+type CvdKind = keyof typeof CVD_MATRICES;
+// SAFETY: CVD_MATRICES is a closed object literal, so its runtime keys are exactly CvdKind.
+const CVD_KINDS = Object.keys(CVD_MATRICES) as CvdKind[];
+
+const project = {
+  id: 610,
+  name: 'pane',
+  path: '/tmp/theme-fixture/pane',
+  active: true,
+  created_at: new Date(0).toISOString(),
+  updated_at: new Date(0).toISOString(),
+};
+
+const session = {
+  id: 'theme-session',
+  name: 'themes-batch-15',
+  worktreePath: '/tmp/theme-fixture/pane/worktrees/themes-batch-15',
+  prompt: 'Add 15 themes: neon, editorial, retro, atmosphere, and accessibility families',
+  status: 'stopped',
+  createdAt: new Date(0).toISOString(),
+  lastActivity: new Date(0).toISOString(),
+  output: [],
+  jsonMessages: [],
+  isRunning: false,
+  permissionMode: 'ignore',
+  projectId: project.id,
+  displayOrder: 0,
+  isFavorite: false,
+  toolType: 'none',
+  archived: false,
+  gitStatus: {
+    state: 'ahead',
+    ahead: 2,
+    behind: 0,
+    hasUncommittedChanges: true,
+    hasUntrackedFiles: true,
+    filesChanged: 3,
+    additions: 41,
+    deletions: 6,
+    totalCommits: 2,
+  },
+};
+
+const secondSession = {
+  ...session,
+  id: 'theme-session-2',
+  name: 'issue-402-sidebar-focus',
+  worktreePath: '/tmp/theme-fixture/pane/worktrees/issue-402',
+  status: 'running',
+  isRunning: true,
+  displayOrder: 1,
+  gitStatus: { ...session.gitStatus, state: 'clean', hasUncommittedChanges: false, hasUntrackedFiles: false },
+};
+
+const panels = [
+  {
+    id: 'theme-terminal',
+    sessionId: session.id,
+    type: 'terminal',
+    title: 'Terminal',
+    state: { isActive: false, hasBeenViewed: true, customState: { isInitialized: true } },
+    metadata: { createdAt: new Date(0).toISOString(), lastActiveAt: new Date(0).toISOString(), position: 0, permanent: true },
+  },
+  {
+    id: 'theme-explorer',
+    sessionId: session.id,
+    type: 'explorer',
+    title: 'Explorer',
+    state: { isActive: false, hasBeenViewed: true },
+    metadata: { createdAt: new Date(1).toISOString(), lastActiveAt: new Date(1).toISOString(), position: 1, permanent: true },
+  },
+  {
+    id: 'theme-diff',
+    sessionId: session.id,
+    type: 'diff',
+    title: 'Diff',
+    state: { isActive: true, hasBeenViewed: true },
+    metadata: { createdAt: new Date(2).toISOString(), lastActiveAt: new Date(2).toISOString(), position: 2, permanent: true },
+  },
+];
+
+const executions = [{
+  id: 1,
+  session_id: session.id,
+  execution_sequence: 1,
+  after_commit_hash: 'ba7c415e5c',
+  commit_message: 'Add 15 themes across five families',
+  timestamp: '2026-08-18T12:00:00.000Z',
+  stats_additions: 41,
+  stats_deletions: 6,
+  stats_files_changed: 3,
+  author: 'Pane',
+  comparison_branch: 'origin/main',
+  history_source: 'branch',
+}];
+
+const combinedDiff = {
+  diff: [
+    'diff --git a/frontend/src/contexts/themeContextValue.ts b/frontend/src/contexts/themeContextValue.ts',
+    'index 1111111..2222222 100644',
+    '--- a/frontend/src/contexts/themeContextValue.ts',
+    '+++ b/frontend/src/contexts/themeContextValue.ts',
+    '@@ -1,6 +1,14 @@',
+    ' import { createContext } from \'react\';',
+    ' ',
+    '-export type Theme = \'light\' | \'light-rounded\' | \'dark\' | \'terracotta\';',
+    '+export type Theme =',
+    '+  | \'light\'',
+    '+  | \'light-rounded\'',
+    '+  | \'dark\'',
+    '+  | \'terracotta\'',
+    '+  | \'synthwave\'',
+    '+  | \'folio\'',
+    '+  | \'amber-crt\'',
+    '+  | \'haar\'',
+    '+  | \'colorblind-safe\';',
+    '+',
+    '+export const isLightTheme = (theme: Theme): boolean => THEME_CLASSES[theme][0] === \'light\';',
+    ' ',
+    ' export interface ThemeContextType {',
+    '   theme: Theme;',
+    '@@ -12,4 +20,3 @@ export interface ThemeContextType {',
+    '   highContrast: boolean;',
+    ' }',
+    ' ',
+    '-export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);',
+    '-',
+    '+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);',
+  ].join('\n'),
+  stats: { additions: 41, deletions: 6, filesChanged: 3 },
+  changedFiles: ['frontend/src/contexts/themeContextValue.ts'],
+};
+
+// A realistic slice of terminal output: prompt, git status, a test summary and
+// a full 16-colour ANSI swatch so every terminal token is visible in the shot.
+const ESC = '\u001b[';
+const ansi = (code: string, text: string) => `${ESC}${code}m${text}${ESC}0m`;
+const swatchRow = (label: string, base: number) => {
+  const names = ['blk', 'red', 'grn', 'ylw', 'blu', 'mag', 'cyn', 'wht'];
+  const cells = names.map((name, i) => ansi(String(base + i), ` ${name} `)).join(' ');
+  return `${label} ${cells}`;
+};
+const terminalScrollback = [
+  `${ansi('1;32', '➜')} ${ansi('1;36', 'pane')} ${ansi('1;34', 'git:(')}${ansi('1;31', 'themes-batch-15')}${ansi('1;34', ')')} ${ansi('33', '✗')} git status --short`,
+  ` ${ansi('32', 'M')} frontend/src/styles/tokens/colors.css`,
+  ` ${ansi('32', 'M')} frontend/src/index.css`,
+  `${ansi('31', '??')} scripts/check-theme-contrast.mjs`,
+  '',
+  `${ansi('1;32', '➜')} ${ansi('1;36', 'pane')} pnpm theme:contrast`,
+  `${ansi('1', '== synthwave (gated: text ≥ 4.5:1, UI ≥ 3:1, terminal ≥ 4.5:1) ==')}`,
+  `  ${ansi('2', '138/138 checks pass')}`,
+  `${ansi('1', '== colorblind-safe (gated: text ≥ 4.5:1, UI ≥ 3:1, terminal ≥ 4.5:1, hairlines gated) ==')}`,
+  `  ${ansi('32', 'ok')}   status       deuteranopia  ΔE  18.38  min 5.00:1`,
+  `  ${ansi('2', '148/148 checks pass')}`,
+  '',
+  `${ansi('1;32', '➜')} ${ansi('1;36', 'pane')} ${ansi('2', '# sample status lines (theme swatch, not a real run)')}`,
+  `  ${ansi('32', 'ok  ')} success   ${ansi('2', 'sample line in the success colour')}`,
+  `  ${ansi('33', 'warn')} warning   ${ansi('2', 'sample line in the warning colour')}`,
+  `  ${ansi('31', 'FAIL')} error     ${ansi('2', 'sample line in the error colour')}`,
+  `  ${ansi('1;32', 'bold green')} ${ansi('2', '·')} ${ansi('1;33', 'bold yellow')} ${ansi('2', '·')} ${ansi('1;31', 'bold red')} ${ansi('2', '·')} ${ansi('1;34', 'bold blue')}`,
+  '',
+  swatchRow('normal', 30),
+  swatchRow('bright', 90),
+  swatchRow('bg    ', 40),
+  '',
+  `${ansi('1;32', '➜')} ${ansi('1;36', 'pane')} ${ansi('2', 'claude')} `,
+].join('\r\n');
+
+async function openSession(page: Page, theme: string, opts: { highContrast?: boolean } = {}): Promise<void> {
+  const highContrast = opts.highContrast === true;
+  await page.addInitScript(({ themeId, hc }) => {
+    window.localStorage.setItem('theme', themeId);
+    if (hc) window.localStorage.setItem('high-contrast', 'true');
+  }, { themeId: theme, hc: highContrast });
+  await installElectronApiMock(page, {
+    initialConfig: { theme, highContrast },
+    initialProjects: [project],
+    initialSessions: [session, secondSession],
+    initialPanels: panels,
+    initialExecutions: executions,
+    initialCombinedDiff: combinedDiff,
+    initialTerminalStates: { 'theme-terminal': { scrollbackBuffer: terminalScrollback } },
+    initialUiState: { expandedProjects: [project.id] },
+    activeProjectId: project.id,
+  });
+  await page.goto('/', { waitUntil: 'domcontentloaded', timeout: 30_000 });
+  await expect(page.locator('[data-testid="sidebar"]').first()).toBeVisible({ timeout: 15_000 });
+  await expect(page.locator('html')).toHaveClass(new RegExp(`\\b${theme}\\b`));
+  if (highContrast) await expect(page.locator('html')).toHaveClass(/\bhigh-contrast\b/);
+
+  const expandRepo = page.getByRole('button', { name: /^Expand repository pane$/ });
+  if (await expandRepo.isVisible().catch(() => false)) await expandRepo.click();
+  await page.getByRole('button', { name: session.name, exact: true }).click();
+  await expect(page.getByRole('tab', { name: 'Review', exact: true })).toBeVisible();
+  await page.getByRole('tab', { name: 'Review', exact: true }).click();
+
+  const expandTerminal = page.getByRole('button', { name: 'Expand terminal', exact: true });
+  if (await expandTerminal.isVisible().catch(() => false)) await expandTerminal.click();
+  await expect(page.locator('.pane-terminal-shell-body .xterm-screen').first()).toBeVisible({ timeout: 15_000 });
+  await expect(page.getByRole('status', { name: 'Loading terminal' })).toHaveCount(0);
+  // Expand the single changed file so the diff view (add/remove tints) is visible.
+  const expandFile = page.getByRole('button', { name: /^Expand diff for frontend\/src\/contexts\/themeContextValue\.ts$/ });
+  await expect(expandFile).toBeVisible({ timeout: 15_000 });
+  await expandFile.click();
+  await expect(page.locator('.diff-tailwindcss-wrapper').first()).toBeVisible({ timeout: 15_000 });
+  // Let xterm replay + shiki highlighting settle before capturing.
+  await page.mouse.move(4, 4);
+  await page.waitForTimeout(600);
+}
+
+async function applyCvdFilter(page: Page, kind: CvdKind | null): Promise<void> {
+  await page.evaluate(({ id, matrix }) => {
+    document.getElementById('pane-cvd-filter')?.remove();
+    document.getElementById('pane-cvd-style')?.remove();
+    if (!id || !matrix) return;
+    const values = matrix.map((row) => [...row, 0, 0].join(' ')).join(' ') + ' 0 0 0 1 0';
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.id = 'pane-cvd-filter';
+    svg.setAttribute('width', '0');
+    svg.setAttribute('height', '0');
+    svg.style.position = 'absolute';
+    svg.innerHTML = `<filter id="pane-cvd" color-interpolation-filters="linearRGB"><feColorMatrix type="matrix" values="${values}"/></filter>`;
+    document.body.appendChild(svg);
+    const style = document.createElement('style');
+    style.id = 'pane-cvd-style';
+    style.textContent = 'html { filter: url(#pane-cvd); }';
+    document.head.appendChild(style);
+  }, { id: kind, matrix: kind ? CVD_MATRICES[kind] : null });
+  await page.waitForTimeout(150);
+}
+
+test.use({ viewport: { width: 1440, height: 900 } });
+test.beforeAll(() => {
+  if (WRITE_TO_REPO) mkdirSync(OUTPUT_DIR, { recursive: true });
+});
+
+const outputFile = (testInfo: TestInfo, name: string): string => (
+  WRITE_TO_REPO ? path.join(OUTPUT_DIR, name) : testInfo.outputPath(name)
+);
+
+for (const theme of BATCH_THEMES) {
+  test(`${theme}: main view screenshot`, async ({ page }, testInfo) => {
+    await openSession(page, theme);
+    const file = outputFile(testInfo, `${theme}.png`);
+    await page.screenshot({ path: file });
+    await testInfo.attach(`${theme}.png`, { path: file, contentType: 'image/png' });
+
+    if (theme === CVD_THEME) {
+      for (const kind of CVD_KINDS) {
+        await applyCvdFilter(page, kind);
+        const simFile = outputFile(testInfo, `${theme}-${kind}.png`);
+        await page.screenshot({ path: simFile });
+        await testInfo.attach(`${theme}-${kind}.png`, { path: simFile, contentType: 'image/png' });
+      }
+      await applyCvdFilter(page, null);
+    }
+  });
+
+  test(`${theme}: high-contrast mode composes on top`, async ({ page }, testInfo) => {
+    await openSession(page, theme, { highContrast: true });
+    // The high-contrast block must actually change the muted token for this theme:
+    // read it with the class on, then with the class removed, and require a difference.
+    const [withHc, withoutHc] = await page.evaluate(() => {
+      const read = () => getComputedStyle(document.documentElement).getPropertyValue('--color-text-muted').trim();
+      const on = read();
+      document.documentElement.classList.remove('high-contrast');
+      const off = read();
+      document.documentElement.classList.add('high-contrast');
+      return [on, off];
+    });
+    expect(withHc).not.toBe('');
+    expect(withHc).not.toBe(withoutHc);
+    testInfo.annotations.push({ type: 'muted-token', description: `${theme}: ${withoutHc} → ${withHc} with high-contrast` });
+
+    if (HIGH_CONTRAST_CAPTURES.includes(theme)) {
+      const file = outputFile(testInfo, `${theme}-high-contrast.png`);
+      await page.screenshot({ path: file });
+      await testInfo.attach(`${theme}-high-contrast.png`, { path: file, contentType: 'image/png' });
+    }
+  });
+}
+
+test('appearance picker shows all 15 themes, grouped by family', async ({ page }, testInfo) => {
+  // Tall viewport so the whole grouped list is on screen for the capture.
+  await page.setViewportSize({ width: 1440, height: 1700 });
+  await page.addInitScript(() => { window.localStorage.setItem('theme', 'colorblind-safe'); });
+  await installElectronApiMock(page, {
+    initialConfig: { theme: 'colorblind-safe' },
+    initialProjects: [project],
+    initialSessions: [session],
+    initialPanels: panels,
+    activeProjectId: project.id,
+  });
+  await page.goto('/', { waitUntil: 'domcontentloaded', timeout: 30_000 });
+  await expect(page.locator('[data-testid="sidebar"]').first()).toBeVisible({ timeout: 15_000 });
+  const collapse = page.getByRole('button', { name: 'Collapse sidebar' });
+  if (await collapse.isVisible().catch(() => false)) await collapse.click();
+  await page.getByRole('button', { name: 'Settings' }).first().click();
+  const dialog = page.getByRole('dialog', { name: 'Pane Settings' });
+  await expect(dialog).toBeVisible();
+  await page.getByRole('navigation', { name: 'Settings categories' }).getByRole('button', { name: 'Appearance', exact: true }).click();
+  await expect(page.getByRole('heading', { name: 'Appearance', exact: true })).toBeVisible();
+
+  const trigger = page.getByRole('combobox', { name: 'Theme' });
+  await expect(trigger).toHaveText('Colorblind Safe');
+  await trigger.click();
+  for (const label of PICKER_LABELS) {
+    await expect(page.getByRole('option', { name: new RegExp(`^${label}`) })).toBeVisible();
+  }
+  for (const group of PICKER_GROUPS) {
+    await expect(page.getByRole('group', { name: group })).toBeVisible();
+  }
+  // As the user sees it: the popover is a scroll box (SelectContent caps at max-h-96), opened
+  // at the current selection. Scroll to the top so the first groups are in frame.
+  await page.locator('[data-radix-select-viewport]').evaluate((el) => { el.scrollTop = 0; });
+  await page.getByRole('option', { name: /^Synthwave/ }).hover();
+  await page.waitForTimeout(200);
+  const file = outputFile(testInfo, 'appearance-picker.png');
+  await page.screenshot({ path: file });
+  await testInfo.attach('appearance-picker.png', { path: file, contentType: 'image/png' });
+
+  // Capture-only: lift the popover height cap and pin the popper near the top of a tall
+  // viewport so every group and entry is in one frame. (In the app the list scrolls;
+  // nothing here changes shipped styles — the override is removed again below.)
+  await page.keyboard.press('Escape');
+  await expect(page.getByRole('listbox')).toHaveCount(0);
+  await page.setViewportSize({ width: 1440, height: 2400 });
+  await trigger.click();
+  await expect(page.getByRole('listbox')).toBeVisible();
+  await page.evaluate(() => {
+    const wrapper = document.querySelector<HTMLElement>('[data-radix-popper-content-wrapper]');
+    const left = wrapper ? Math.round(wrapper.getBoundingClientRect().left) : 0;
+    const style = document.createElement('style');
+    style.id = 'pane-picker-unroll';
+    style.textContent = [
+      '[data-radix-popper-content-wrapper], [data-radix-popper-content-wrapper] > *, [data-radix-select-viewport] { max-height: none !important; height: auto !important; }',
+      `[data-radix-popper-content-wrapper] { transform: translate(${left}px, 24px) !important; }`,
+    ].join('\n');
+    document.head.appendChild(style);
+  });
+  await expect(page.getByRole('option', { name: /^High Legibility/ })).toBeInViewport();
+  await page.waitForTimeout(400);
+  const fullFile = outputFile(testInfo, 'appearance-picker-full-list.png');
+  await page.screenshot({ path: fullFile });
+  await testInfo.attach('appearance-picker-full-list.png', { path: fullFile, contentType: 'image/png' });
+  await page.evaluate(() => document.getElementById('pane-picker-unroll')?.remove());
+  await page.keyboard.press('Escape');
+  await expect(page.getByRole('listbox')).toHaveCount(0);
+  await page.setViewportSize({ width: 1440, height: 1700 });
+  await trigger.click();
+  await expect(page.getByRole('listbox')).toBeVisible();
+
+  // Selecting through the picker persists the id to config.
+  await page.getByRole('option', { name: /^High Legibility/ }).click();
+  await expect(trigger).toHaveText('High Legibility');
+  await expect(page.locator('html')).toHaveClass(/\bhigh-legibility\b/);
+  await expect(page.locator('html')).toHaveClass(/\blight\b/);
+});