eidotter 0.22.2 → 0.24.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eidotter",
-  "version": "0.22.2",
+  "version": "0.24.2",
   "type": "module",
   "description": "A DOS Themed Design System",
   "main": "./dist/index.umd.js",
@@ -54,12 +54,15 @@
     "build-tokens": "node style-dictionary.config.mjs",
     "lint": "eslint src/ --report-unused-disable-directives --max-warnings 0",
     "lint-tokens": "node scripts/lint-token-refs.mjs",
+    "check-contrast": "node scripts/check-contrast.mjs",
+    "test-a11y": "test-storybook --url http://127.0.0.1:6007 --maxWorkers 2 --no-cache",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build -o docs",
     "test": "jest",
     "create-component": "ts-node scripts/create-component.ts",
     "sync-to-figma": "ts-node scripts/sync-to-figma.ts",
+    "sync-figma-to-swift": "ts-node scripts/sync-figma-to-swift.ts",
     "validate-tokens": "node scripts/validate-tokens.cjs"
   },
   "repository": {
@@ -98,13 +101,14 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@figma/plugin-typings": "^1.107.0-beta.2",
-    "@figma/rest-api-spec": "^0.37.0",
+    "@figma/rest-api-spec": "^0.38.0",
     "@storybook/addon-a11y": "^10.2.7",
     "@storybook/addon-designs": "^11.1.2",
     "@storybook/addon-docs": "^10.2.7",
     "@storybook/addon-links": "^10.2.7",
     "@storybook/react": "^10.2.7",
     "@storybook/react-vite": "^10.2.7",
+    "@storybook/test-runner": "^0.24.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -114,8 +118,9 @@
     "@types/node": "^25.0.3",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-react": "^6.0.2",
     "autoprefixer": "^10.4.27",
+    "axe-playwright": "^2.2.2",
     "chromatic": "^16.2.0",
     "cross-env": "^10.1.0",
     "dotenv": "^17.3.1",

package/src/styles/theme.amber-mono.css

@@ -29,124 +29,16 @@
   --color-cga-magenta-glow: rgba(255, 85, 255, 0.5); /** Magenta glow at 50% opacity */
   --color-cga-blue-glow: rgba(85, 85, 255, 0.5); /** Blue glow at 50% opacity */
   --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
-  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. */
+  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. Lives in base (T1) so all themes inherit it; the rest of color.semantic.* lives in web.tokens.json (T2). */
   --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
-  --typography-font-family-primary: 'Perfect DOS VGA 437', monospace; /** Perfect DOS VGA 437 by Zeh Fernando (free-for-any-use; ships with bundled LICENSE.txt). Pixel-perfect-vector TTF — every glyph outline is axis-aligned, scales cleanly to any size. The `monospace` fallback preserves DOS aesthetic on @font-face failure. */
-  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Perfect-DOS-or-nothing rendering. */
-  --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
-  --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
-  --typography-font-size-text-md: 1.375rem; /** 22px — default body text */
-  --typography-font-size-text-lg: 1.5rem; /** 24px — large body text */
-  --typography-font-size-text-xl: 1.625rem; /** 26px — extra large body text */
-  --typography-font-size-display-xs: 1.875rem; /** 30px — smallest heading */
-  --typography-font-size-display-sm: 2.25rem; /** 36px — small heading */
-  --typography-font-size-display-md: 2.625rem; /** 42px — medium heading */
-  --typography-font-size-display-lg: 3.5rem; /** 56px — large heading */
-  --typography-font-size-display-xl: 4.125rem; /** 66px — extra large heading */
-  --typography-font-size-display-2xl: 4.875rem; /** 78px — hero heading */
-  --typography-font-weight-regular: 400;
-  --typography-font-weight-semibold: 400;
-  --typography-font-weight-bold: 400;
-  --typography-line-height-text-xs: 1.125rem; /** 18px */
-  --typography-line-height-text-sm: 1.25rem; /** 20px */
-  --typography-line-height-text-md: 1.5rem; /** 24px */
-  --typography-line-height-text-lg: 1.75rem; /** 28px */
-  --typography-line-height-text-xl: 1.875rem; /** 30px */
-  --typography-line-height-display-xs: 2rem; /** 32px */
-  --typography-line-height-display-sm: 2.375rem; /** 38px */
-  --typography-line-height-display-md: 2.75rem; /** 44px */
-  --typography-line-height-display-lg: 3.75rem; /** 60px */
-  --typography-line-height-display-xl: 4.5rem; /** 72px */
-  --typography-line-height-display-2xl: 5.625rem; /** 90px */
-  --spacing-0: 0;
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-8: 32px;
-  --spacing-10: 40px;
-  --spacing-12: 48px;
-  --spacing-16: 64px;
-  --border-radius-none: 0;
-  --border-radius-sm: 2px;
-  --border-radius-base: 4px;
-  --border-width-thin: 1px;
-  --border-width-medium: 2px;
-  --border-width-thick: 4px;
-  --shadow-none: none;
-  --shadow-drop: 2px 2px 0px 0px #080500; /** Hard drop shadow, DOS window style (amber-warm near-black) */
-  --shadow-glow-xs: 0px 0px 8px 0px #FFB00080; /** Extra small phosphor glow (subtle hover) */
-  --shadow-glow-sm: 0px 0px 10px 0px #FFB00080; /** Small phosphor glow (button hover) */
-  --shadow-glow-md: 0px 0px 20px 0px #FFB00080; /** Medium phosphor glow (container/card) */
-  --shadow-glow-lg: 0px 0px 30px 0px #FFB00080; /** Large phosphor glow (emphasis) */
-  --shadow-glow-xs-red: 0px 0px 8px 0px #FF555580; /** Extra small red phosphor glow */
-  --shadow-glow-sm-red: 0px 0px 10px 0px #FF555580; /** Small red phosphor glow */
-  --shadow-glow-md-red: 0px 0px 20px 0px #FF555580; /** Medium red phosphor glow */
-  --shadow-glow-lg-red: 0px 0px 30px 0px #FF555580; /** Large red phosphor glow */
-  --shadow-glow-xs-green: 0px 0px 8px 0px #55FF5580; /** Extra small green phosphor glow */
-  --shadow-glow-sm-green: 0px 0px 10px 0px #55FF5580; /** Small green phosphor glow */
-  --shadow-glow-md-green: 0px 0px 20px 0px #55FF5580; /** Medium green phosphor glow */
-  --shadow-glow-lg-green: 0px 0px 30px 0px #55FF5580; /** Large green phosphor glow */
-  --shadow-glow-xs-cyan: 0px 0px 8px 0px #55FFFF80; /** Extra small cyan phosphor glow */
-  --shadow-glow-sm-cyan: 0px 0px 10px 0px #55FFFF80; /** Small cyan phosphor glow */
-  --shadow-glow-md-cyan: 0px 0px 20px 0px #55FFFF80; /** Medium cyan phosphor glow */
-  --shadow-glow-lg-cyan: 0px 0px 30px 0px #55FFFF80; /** Large cyan phosphor glow */
-  --shadow-glow-xs-magenta: 0px 0px 8px 0px #FF55FF80; /** Extra small magenta phosphor glow */
-  --shadow-glow-sm-magenta: 0px 0px 10px 0px #FF55FF80; /** Small magenta phosphor glow */
-  --shadow-glow-md-magenta: 0px 0px 20px 0px #FF55FF80; /** Medium magenta phosphor glow */
-  --shadow-glow-lg-magenta: 0px 0px 30px 0px #FF55FF80; /** Large magenta phosphor glow */
-  --shadow-glow-xs-blue: 0px 0px 8px 0px #5555FF80; /** Extra small blue phosphor glow */
-  --shadow-glow-sm-blue: 0px 0px 10px 0px #5555FF80; /** Small blue phosphor glow */
-  --shadow-glow-md-blue: 0px 0px 20px 0px #5555FF80; /** Medium blue phosphor glow */
-  --shadow-glow-lg-blue: 0px 0px 30px 0px #5555FF80; /** Large blue phosphor glow */
-  --shadow-glow-xs-white: 0px 0px 8px 0px #FFFFFF80; /** Extra small white phosphor glow */
-  --shadow-glow-sm-white: 0px 0px 10px 0px #FFFFFF80; /** Small white phosphor glow */
-  --shadow-glow-md-white: 0px 0px 20px 0px #FFFFFF80; /** Medium white phosphor glow */
-  --shadow-glow-lg-white: 0px 0px 30px 0px #FFFFFF80; /** Large white phosphor glow */
-  --duration-instant: 0ms;
-  --duration-fast: 100ms;
-  --duration-normal: 200ms;
-  --duration-slow: 400ms;
-  --duration-power-off: 400ms; /** CRT power-off animation */
-  --duration-power-on: 600ms; /** CRT power-on animation (phosphor warm-up) */
-  --opacity-0: 0; /** Fully transparent */
-  --opacity-10: 0.1; /** Subtle hover overlays */
-  --opacity-25: 0.25; /** Light overlays */
-  --opacity-50: 0.5; /** Disabled states, medium overlays */
-  --opacity-75: 0.75; /** Heavy overlays */
-  --opacity-80: 0.8; /** Modal backdrop */
-  --opacity-100: 1; /** Fully opaque */
-  --z-index-base: 0; /** Default stacking context */
-  --z-index-dropdown: 1000; /** Dropdowns and popovers */
-  --z-index-sticky: 1020; /** Sticky headers and navs */
-  --z-index-fixed: 1030; /** Fixed position elements */
-  --z-index-modal: 1040; /** Modal dialogs */
-  --z-index-popover: 1050; /** Popovers above modals */
-  --z-index-tooltip: 1060; /** Tooltips (topmost) */
-  --focus-ring-width: 2px; /** Focus ring thickness */
-  --focus-ring-offset: 2px; /** Gap between element and ring */
-  --effects-overlay: rgba(8, 5, 0, 0.8); /** Modal/dialog backdrop overlay (amber-warm) */
-  --effects-scanline-light: rgba(255, 176, 0, 0.05); /** CRT scanline light band */
-  --effects-scanline-dark: rgba(255, 176, 0, 0.02); /** CRT scanline dark band */
-  --effects-vignette-glow: rgba(255, 176, 0, 0.12); /** Inner screen glow vignette */
-  --effects-vignette-edge: rgba(8, 5, 0, 0.3); /** Vignette edge darkening (amber-warm) */
-  --effects-vignette-corner: rgba(8, 5, 0, 0.5); /** Vignette corner darkening (amber-warm) */
-  --effects-screen-tint: rgba(255, 176, 0, 0.1); /** Subtle amber screen tint */
-  --effects-drop-shadow: rgba(8, 5, 0, 0.5); /** Terminal window drop shadow (amber-warm) */
-  --effects-phosphor-glow: rgba(255, 176, 0, 0.12); /** Phosphor bloom/bleeding glow for CRT effects */
-  --effects-bloom-outer: rgba(255, 176, 0, 0.05); /** Outer phosphor bloom layer (faint glow) */
-  --effects-bloom-center: rgba(255, 176, 0, 0.03); /** Center phosphor bloom highlight */
-  --effects-crt-background: #060300; /** Dark warm-black for CRT screen (not pure black) */
-  --color-semantic-background-primary: var(--color-cga-black);
-  --color-semantic-background-secondary: var(--color-cga-dark-gray);
-  --color-semantic-background-accent: var(--color-cga-amber);
   --color-semantic-text-primary: var(--color-cga-amber);
   --color-semantic-text-secondary: var(--color-cga-black);
   --color-semantic-text-accent: var(--color-cga-yellow);
   --color-semantic-text-disabled: var(--color-cga-amber-dim);
   --color-semantic-text-muted: var(--color-cga-light-gray);
+  --color-semantic-background-primary: var(--color-cga-black);
+  --color-semantic-background-secondary: var(--color-cga-dark-gray);
+  --color-semantic-background-accent: var(--color-cga-amber);
   --color-semantic-border-default: var(--color-cga-amber);
   --color-semantic-border-focus: var(--color-cga-amber-bright);
   --color-semantic-border-hover: var(--color-cga-yellow);
@@ -163,5 +55,4 @@
   --color-semantic-alert-success: var(--color-cga-green);
   --color-semantic-alert-warning: var(--color-cga-cyan);
   --color-semantic-alert-error: var(--color-cga-red);
-  --focus-ring-color: var(--color-cga-yellow); /** Focus ring color (accent) */
 }

package/src/styles/theme.cga-amber.css

@@ -11,7 +11,7 @@
   --color-cga-magenta: #aa00aa;
   --color-cga-brown: #aa5500;
   --color-cga-light-gray: #adaaa5; /** Warm light gray (~3% amber) */
-  --color-cga-dark-gray: #5a5852; /** Warm mid-gray (~3% amber) */
+  --color-cga-dark-gray: #3a3935; /** Warm dark-gray (~3% amber). Darkened from #5A5852 in v0.23 so text-primary (#ADAAA5) passes WCAG AA on bg-secondary surfaces (4.99:1, per scripts/check-contrast.mjs). Disabled-state usage still leverages it; disabled UI is exempt from contrast minimums per WCAG 2.1 SC 1.4.3. */
   --color-cga-bright-blue: #5555ff;
   --color-cga-bright-green: #55ff55;
   --color-cga-bright-cyan: #55ffff;
@@ -29,128 +29,20 @@
   --color-cga-magenta-glow: rgba(255, 85, 255, 0.5); /** Magenta glow at 50% opacity */
   --color-cga-blue-glow: rgba(85, 85, 255, 0.5); /** Blue glow at 50% opacity */
   --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
-  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. */
+  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. Lives in base (T1) so all themes inherit it; the rest of color.semantic.* lives in web.tokens.json (T2). */
   --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
   --color-semantic-alert-info: #0a1828;
   --color-semantic-alert-success: #122010;
   --color-semantic-alert-warning: #352800;
   --color-semantic-alert-error: #430500;
-  --typography-font-family-primary: 'Perfect DOS VGA 437', monospace; /** Perfect DOS VGA 437 by Zeh Fernando (free-for-any-use; ships with bundled LICENSE.txt). Pixel-perfect-vector TTF — every glyph outline is axis-aligned, scales cleanly to any size. The `monospace` fallback preserves DOS aesthetic on @font-face failure. */
-  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Perfect-DOS-or-nothing rendering. */
-  --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
-  --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
-  --typography-font-size-text-md: 1.375rem; /** 22px — default body text */
-  --typography-font-size-text-lg: 1.5rem; /** 24px — large body text */
-  --typography-font-size-text-xl: 1.625rem; /** 26px — extra large body text */
-  --typography-font-size-display-xs: 1.875rem; /** 30px — smallest heading */
-  --typography-font-size-display-sm: 2.25rem; /** 36px — small heading */
-  --typography-font-size-display-md: 2.625rem; /** 42px — medium heading */
-  --typography-font-size-display-lg: 3.5rem; /** 56px — large heading */
-  --typography-font-size-display-xl: 4.125rem; /** 66px — extra large heading */
-  --typography-font-size-display-2xl: 4.875rem; /** 78px — hero heading */
-  --typography-font-weight-regular: 400;
-  --typography-font-weight-semibold: 400;
-  --typography-font-weight-bold: 400;
-  --typography-line-height-text-xs: 1.125rem; /** 18px */
-  --typography-line-height-text-sm: 1.25rem; /** 20px */
-  --typography-line-height-text-md: 1.5rem; /** 24px */
-  --typography-line-height-text-lg: 1.75rem; /** 28px */
-  --typography-line-height-text-xl: 1.875rem; /** 30px */
-  --typography-line-height-display-xs: 2rem; /** 32px */
-  --typography-line-height-display-sm: 2.375rem; /** 38px */
-  --typography-line-height-display-md: 2.75rem; /** 44px */
-  --typography-line-height-display-lg: 3.75rem; /** 60px */
-  --typography-line-height-display-xl: 4.5rem; /** 72px */
-  --typography-line-height-display-2xl: 5.625rem; /** 90px */
-  --spacing-0: 0;
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-8: 32px;
-  --spacing-10: 40px;
-  --spacing-12: 48px;
-  --spacing-16: 64px;
-  --border-radius-none: 0;
-  --border-radius-sm: 2px;
-  --border-radius-base: 4px;
-  --border-width-thin: 1px;
-  --border-width-medium: 2px;
-  --border-width-thick: 4px;
-  --shadow-none: none;
-  --shadow-drop: 2px 2px 0px 0px #080500; /** Hard drop shadow, DOS window style (amber-warm near-black) */
-  --shadow-glow-xs: 0px 0px 8px 0px #FFB00080; /** Extra small phosphor glow (subtle hover) */
-  --shadow-glow-sm: 0px 0px 10px 0px #FFB00080; /** Small phosphor glow (button hover) */
-  --shadow-glow-md: 0px 0px 20px 0px #FFB00080; /** Medium phosphor glow (container/card) */
-  --shadow-glow-lg: 0px 0px 30px 0px #FFB00080; /** Large phosphor glow (emphasis) */
-  --shadow-glow-xs-red: 0px 0px 8px 0px #FF555580; /** Extra small red phosphor glow */
-  --shadow-glow-sm-red: 0px 0px 10px 0px #FF555580; /** Small red phosphor glow */
-  --shadow-glow-md-red: 0px 0px 20px 0px #FF555580; /** Medium red phosphor glow */
-  --shadow-glow-lg-red: 0px 0px 30px 0px #FF555580; /** Large red phosphor glow */
-  --shadow-glow-xs-green: 0px 0px 8px 0px #55FF5580; /** Extra small green phosphor glow */
-  --shadow-glow-sm-green: 0px 0px 10px 0px #55FF5580; /** Small green phosphor glow */
-  --shadow-glow-md-green: 0px 0px 20px 0px #55FF5580; /** Medium green phosphor glow */
-  --shadow-glow-lg-green: 0px 0px 30px 0px #55FF5580; /** Large green phosphor glow */
-  --shadow-glow-xs-cyan: 0px 0px 8px 0px #55FFFF80; /** Extra small cyan phosphor glow */
-  --shadow-glow-sm-cyan: 0px 0px 10px 0px #55FFFF80; /** Small cyan phosphor glow */
-  --shadow-glow-md-cyan: 0px 0px 20px 0px #55FFFF80; /** Medium cyan phosphor glow */
-  --shadow-glow-lg-cyan: 0px 0px 30px 0px #55FFFF80; /** Large cyan phosphor glow */
-  --shadow-glow-xs-magenta: 0px 0px 8px 0px #FF55FF80; /** Extra small magenta phosphor glow */
-  --shadow-glow-sm-magenta: 0px 0px 10px 0px #FF55FF80; /** Small magenta phosphor glow */
-  --shadow-glow-md-magenta: 0px 0px 20px 0px #FF55FF80; /** Medium magenta phosphor glow */
-  --shadow-glow-lg-magenta: 0px 0px 30px 0px #FF55FF80; /** Large magenta phosphor glow */
-  --shadow-glow-xs-blue: 0px 0px 8px 0px #5555FF80; /** Extra small blue phosphor glow */
-  --shadow-glow-sm-blue: 0px 0px 10px 0px #5555FF80; /** Small blue phosphor glow */
-  --shadow-glow-md-blue: 0px 0px 20px 0px #5555FF80; /** Medium blue phosphor glow */
-  --shadow-glow-lg-blue: 0px 0px 30px 0px #5555FF80; /** Large blue phosphor glow */
-  --shadow-glow-xs-white: 0px 0px 8px 0px #FFFFFF80; /** Extra small white phosphor glow */
-  --shadow-glow-sm-white: 0px 0px 10px 0px #FFFFFF80; /** Small white phosphor glow */
-  --shadow-glow-md-white: 0px 0px 20px 0px #FFFFFF80; /** Medium white phosphor glow */
-  --shadow-glow-lg-white: 0px 0px 30px 0px #FFFFFF80; /** Large white phosphor glow */
-  --duration-instant: 0ms;
-  --duration-fast: 100ms;
-  --duration-normal: 200ms;
-  --duration-slow: 400ms;
-  --duration-power-off: 400ms; /** CRT power-off animation */
-  --duration-power-on: 600ms; /** CRT power-on animation (phosphor warm-up) */
-  --opacity-0: 0; /** Fully transparent */
-  --opacity-10: 0.1; /** Subtle hover overlays */
-  --opacity-25: 0.25; /** Light overlays */
-  --opacity-50: 0.5; /** Disabled states, medium overlays */
-  --opacity-75: 0.75; /** Heavy overlays */
-  --opacity-80: 0.8; /** Modal backdrop */
-  --opacity-100: 1; /** Fully opaque */
-  --z-index-base: 0; /** Default stacking context */
-  --z-index-dropdown: 1000; /** Dropdowns and popovers */
-  --z-index-sticky: 1020; /** Sticky headers and navs */
-  --z-index-fixed: 1030; /** Fixed position elements */
-  --z-index-modal: 1040; /** Modal dialogs */
-  --z-index-popover: 1050; /** Popovers above modals */
-  --z-index-tooltip: 1060; /** Tooltips (topmost) */
-  --focus-ring-width: 2px; /** Focus ring thickness */
-  --focus-ring-offset: 2px; /** Gap between element and ring */
-  --effects-overlay: rgba(8, 5, 0, 0.8); /** Modal/dialog backdrop overlay (amber-warm) */
-  --effects-scanline-light: rgba(255, 176, 0, 0.05); /** CRT scanline light band */
-  --effects-scanline-dark: rgba(255, 176, 0, 0.02); /** CRT scanline dark band */
-  --effects-vignette-glow: rgba(255, 176, 0, 0.12); /** Inner screen glow vignette */
-  --effects-vignette-edge: rgba(8, 5, 0, 0.3); /** Vignette edge darkening (amber-warm) */
-  --effects-vignette-corner: rgba(8, 5, 0, 0.5); /** Vignette corner darkening (amber-warm) */
-  --effects-screen-tint: rgba(255, 176, 0, 0.1); /** Subtle amber screen tint */
-  --effects-drop-shadow: rgba(8, 5, 0, 0.5); /** Terminal window drop shadow (amber-warm) */
-  --effects-phosphor-glow: rgba(255, 176, 0, 0.12); /** Phosphor bloom/bleeding glow for CRT effects */
-  --effects-bloom-outer: rgba(255, 176, 0, 0.05); /** Outer phosphor bloom layer (faint glow) */
-  --effects-bloom-center: rgba(255, 176, 0, 0.03); /** Center phosphor bloom highlight */
-  --effects-crt-background: #060300; /** Dark warm-black for CRT screen (not pure black) */
-  --color-semantic-background-primary: var(--color-cga-black);
-  --color-semantic-background-secondary: var(--color-cga-dark-gray);
-  --color-semantic-background-accent: var(--color-cga-blue);
   --color-semantic-text-primary: var(--color-cga-light-gray);
   --color-semantic-text-secondary: var(--color-cga-black);
   --color-semantic-text-accent: var(--color-cga-amber);
   --color-semantic-text-disabled: var(--color-cga-dark-gray);
   --color-semantic-text-muted: var(--color-cga-brown);
+  --color-semantic-background-primary: var(--color-cga-black);
+  --color-semantic-background-secondary: var(--color-cga-dark-gray);
+  --color-semantic-background-accent: var(--color-cga-blue);
   --color-semantic-border-default: var(--color-cga-light-gray);
   --color-semantic-border-focus: var(--color-cga-amber);
   --color-semantic-border-hover: var(--color-cga-amber-bright);
@@ -163,5 +55,4 @@
   --color-semantic-status-warning: var(--color-cga-yellow);
   --color-semantic-status-error: var(--color-cga-bright-red);
   --color-semantic-status-info: var(--color-cga-bright-cyan);
-  --focus-ring-color: var(--color-cga-yellow); /** Focus ring color (accent) */
 }

package/src/styles/theme.cga-mode4-p0.css

@@ -29,16 +29,16 @@
   --color-cga-magenta-glow: rgba(255, 85, 255, 0.5); /** Magenta glow at 50% opacity */
   --color-cga-blue-glow: rgba(85, 85, 255, 0.5); /** Blue glow at 50% opacity */
   --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
-  --color-semantic-background-primary: #050300;
-  --color-semantic-background-secondary: #050300;
-  --color-semantic-background-accent: #00ff00;
+  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. Lives in base (T1) so all themes inherit it; the rest of color.semantic.* lives in web.tokens.json (T2). */
+  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
   --color-semantic-text-primary: #ffff00;
   --color-semantic-text-secondary: #050300;
   --color-semantic-text-accent: #00ff00;
   --color-semantic-text-disabled: #ff0000;
   --color-semantic-text-muted: rgba(255, 255, 0, 0.65);
-  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. */
-  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
+  --color-semantic-background-primary: #050300;
+  --color-semantic-background-secondary: #050300;
+  --color-semantic-background-accent: #00ff00;
   --color-semantic-border-default: #00ff00;
   --color-semantic-border-focus: #ffff00;
   --color-semantic-border-hover: #ff0000;
@@ -55,113 +55,8 @@
   --color-semantic-alert-success: #050300;
   --color-semantic-alert-warning: #050300;
   --color-semantic-alert-error: #050300;
-  --typography-font-family-primary: 'Perfect DOS VGA 437', monospace; /** Perfect DOS VGA 437 by Zeh Fernando (free-for-any-use; ships with bundled LICENSE.txt). Pixel-perfect-vector TTF — every glyph outline is axis-aligned, scales cleanly to any size. The `monospace` fallback preserves DOS aesthetic on @font-face failure. */
-  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Perfect-DOS-or-nothing rendering. */
-  --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
-  --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
-  --typography-font-size-text-md: 1.375rem; /** 22px — default body text */
-  --typography-font-size-text-lg: 1.5rem; /** 24px — large body text */
-  --typography-font-size-text-xl: 1.625rem; /** 26px — extra large body text */
-  --typography-font-size-display-xs: 1.875rem; /** 30px — smallest heading */
-  --typography-font-size-display-sm: 2.25rem; /** 36px — small heading */
-  --typography-font-size-display-md: 2.625rem; /** 42px — medium heading */
-  --typography-font-size-display-lg: 3.5rem; /** 56px — large heading */
-  --typography-font-size-display-xl: 4.125rem; /** 66px — extra large heading */
-  --typography-font-size-display-2xl: 4.875rem; /** 78px — hero heading */
-  --typography-font-weight-regular: 400;
-  --typography-font-weight-semibold: 400;
-  --typography-font-weight-bold: 400;
-  --typography-line-height-text-xs: 1.125rem; /** 18px */
-  --typography-line-height-text-sm: 1.25rem; /** 20px */
-  --typography-line-height-text-md: 1.5rem; /** 24px */
-  --typography-line-height-text-lg: 1.75rem; /** 28px */
-  --typography-line-height-text-xl: 1.875rem; /** 30px */
-  --typography-line-height-display-xs: 2rem; /** 32px */
-  --typography-line-height-display-sm: 2.375rem; /** 38px */
-  --typography-line-height-display-md: 2.75rem; /** 44px */
-  --typography-line-height-display-lg: 3.75rem; /** 60px */
-  --typography-line-height-display-xl: 4.5rem; /** 72px */
-  --typography-line-height-display-2xl: 5.625rem; /** 90px */
-  --spacing-0: 0;
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-8: 32px;
-  --spacing-10: 40px;
-  --spacing-12: 48px;
-  --spacing-16: 64px;
-  --border-radius-none: 0;
-  --border-radius-sm: 2px;
-  --border-radius-base: 4px;
-  --border-width-thin: 1px;
-  --border-width-medium: 2px;
-  --border-width-thick: 4px;
-  --shadow-none: none;
-  --shadow-drop: 2px 2px 0px 0px #080500; /** Hard drop shadow, DOS window style (amber-warm near-black) */
-  --shadow-glow-xs: 0px 0px 8px 0px #00FF0080; /** Extra small phosphor glow (subtle hover) */
-  --shadow-glow-sm: 0px 0px 10px 0px #00FF0080; /** Small phosphor glow (button hover) */
-  --shadow-glow-md: 0px 0px 20px 0px #00FF0080; /** Medium phosphor glow (container/card) */
-  --shadow-glow-lg: 0px 0px 30px 0px #00FF0080; /** Large phosphor glow (emphasis) */
-  --shadow-glow-xs-red: 0px 0px 8px 0px #FF555580; /** Extra small red phosphor glow */
-  --shadow-glow-sm-red: 0px 0px 10px 0px #FF555580; /** Small red phosphor glow */
-  --shadow-glow-md-red: 0px 0px 20px 0px #FF555580; /** Medium red phosphor glow */
-  --shadow-glow-lg-red: 0px 0px 30px 0px #FF555580; /** Large red phosphor glow */
-  --shadow-glow-xs-green: 0px 0px 8px 0px #55FF5580; /** Extra small green phosphor glow */
-  --shadow-glow-sm-green: 0px 0px 10px 0px #55FF5580; /** Small green phosphor glow */
-  --shadow-glow-md-green: 0px 0px 20px 0px #55FF5580; /** Medium green phosphor glow */
-  --shadow-glow-lg-green: 0px 0px 30px 0px #55FF5580; /** Large green phosphor glow */
-  --shadow-glow-xs-cyan: 0px 0px 8px 0px #55FFFF80; /** Extra small cyan phosphor glow */
-  --shadow-glow-sm-cyan: 0px 0px 10px 0px #55FFFF80; /** Small cyan phosphor glow */
-  --shadow-glow-md-cyan: 0px 0px 20px 0px #55FFFF80; /** Medium cyan phosphor glow */
-  --shadow-glow-lg-cyan: 0px 0px 30px 0px #55FFFF80; /** Large cyan phosphor glow */
-  --shadow-glow-xs-magenta: 0px 0px 8px 0px #FF55FF80; /** Extra small magenta phosphor glow */
-  --shadow-glow-sm-magenta: 0px 0px 10px 0px #FF55FF80; /** Small magenta phosphor glow */
-  --shadow-glow-md-magenta: 0px 0px 20px 0px #FF55FF80; /** Medium magenta phosphor glow */
-  --shadow-glow-lg-magenta: 0px 0px 30px 0px #FF55FF80; /** Large magenta phosphor glow */
-  --shadow-glow-xs-blue: 0px 0px 8px 0px #5555FF80; /** Extra small blue phosphor glow */
-  --shadow-glow-sm-blue: 0px 0px 10px 0px #5555FF80; /** Small blue phosphor glow */
-  --shadow-glow-md-blue: 0px 0px 20px 0px #5555FF80; /** Medium blue phosphor glow */
-  --shadow-glow-lg-blue: 0px 0px 30px 0px #5555FF80; /** Large blue phosphor glow */
-  --shadow-glow-xs-white: 0px 0px 8px 0px #FFFFFF80; /** Extra small white phosphor glow */
-  --shadow-glow-sm-white: 0px 0px 10px 0px #FFFFFF80; /** Small white phosphor glow */
-  --shadow-glow-md-white: 0px 0px 20px 0px #FFFFFF80; /** Medium white phosphor glow */
-  --shadow-glow-lg-white: 0px 0px 30px 0px #FFFFFF80; /** Large white phosphor glow */
-  --duration-instant: 0ms;
-  --duration-fast: 100ms;
-  --duration-normal: 200ms;
-  --duration-slow: 400ms;
-  --duration-power-off: 400ms; /** CRT power-off animation */
-  --duration-power-on: 600ms; /** CRT power-on animation (phosphor warm-up) */
-  --opacity-0: 0; /** Fully transparent */
-  --opacity-10: 0.1; /** Subtle hover overlays */
-  --opacity-25: 0.25; /** Light overlays */
-  --opacity-50: 0.5; /** Disabled states, medium overlays */
-  --opacity-75: 0.75; /** Heavy overlays */
-  --opacity-80: 0.8; /** Modal backdrop */
-  --opacity-100: 1; /** Fully opaque */
-  --z-index-base: 0; /** Default stacking context */
-  --z-index-dropdown: 1000; /** Dropdowns and popovers */
-  --z-index-sticky: 1020; /** Sticky headers and navs */
-  --z-index-fixed: 1030; /** Fixed position elements */
-  --z-index-modal: 1040; /** Modal dialogs */
-  --z-index-popover: 1050; /** Popovers above modals */
-  --z-index-tooltip: 1060; /** Tooltips (topmost) */
-  --focus-ring-width: 2px; /** Focus ring thickness */
-  --focus-ring-offset: 2px; /** Gap between element and ring */
-  --effects-overlay: rgba(8, 5, 0, 0.8); /** Modal/dialog backdrop overlay (amber-warm) */
-  --effects-scanline-light: rgba(255, 176, 0, 0.05); /** CRT scanline light band */
-  --effects-scanline-dark: rgba(255, 176, 0, 0.02); /** CRT scanline dark band */
-  --effects-vignette-glow: rgba(255, 176, 0, 0.12); /** Inner screen glow vignette */
-  --effects-vignette-edge: rgba(8, 5, 0, 0.3); /** Vignette edge darkening (amber-warm) */
-  --effects-vignette-corner: rgba(8, 5, 0, 0.5); /** Vignette corner darkening (amber-warm) */
-  --effects-screen-tint: rgba(255, 176, 0, 0.1); /** Subtle amber screen tint */
-  --effects-drop-shadow: rgba(8, 5, 0, 0.5); /** Terminal window drop shadow (amber-warm) */
-  --effects-phosphor-glow: rgba(255, 176, 0, 0.12); /** Phosphor bloom/bleeding glow for CRT effects */
-  --effects-bloom-outer: rgba(255, 176, 0, 0.05); /** Outer phosphor bloom layer (faint glow) */
-  --effects-bloom-center: rgba(255, 176, 0, 0.03); /** Center phosphor bloom highlight */
-  --effects-crt-background: #060300; /** Dark warm-black for CRT screen (not pure black) */
-  --focus-ring-color: var(--color-cga-yellow); /** Focus ring color (accent) */
+  --shadow-glow-xs: 0px 0px 8px 0px #00FF0080;
+  --shadow-glow-sm: 0px 0px 10px 0px #00FF0080;
+  --shadow-glow-md: 0px 0px 20px 0px #00FF0080;
+  --shadow-glow-lg: 0px 0px 30px 0px #00FF0080;
 }