eidotter 0.22.2 → 0.24.2

package/src/styles/theme.cga-mode4-p1.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: #00ffff;
+  --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: #fffcf7;
   --color-semantic-text-secondary: #050300;
   --color-semantic-text-accent: #00ffff;
   --color-semantic-text-disabled: #ff00ff;
   --color-semantic-text-muted: rgba(255, 252, 247, 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: #00ffff;
   --color-semantic-border-default: #00ffff;
   --color-semantic-border-focus: #fffcf7;
   --color-semantic-border-hover: #ff00ff;
@@ -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 #00FFFF80; /** Extra small phosphor glow (subtle hover) */
-  --shadow-glow-sm: 0px 0px 10px 0px #00FFFF80; /** Small phosphor glow (button hover) */
-  --shadow-glow-md: 0px 0px 20px 0px #00FFFF80; /** Medium phosphor glow (container/card) */
-  --shadow-glow-lg: 0px 0px 30px 0px #00FFFF80; /** 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 #00FFFF80;
+  --shadow-glow-sm: 0px 0px 10px 0px #00FFFF80;
+  --shadow-glow-md: 0px 0px 20px 0px #00FFFF80;
+  --shadow-glow-lg: 0px 0px 30px 0px #00FFFF80;
 }

package/src/styles/theme.cga-mode5.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: #00ffff;
+  --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: #fffcf7;
   --color-semantic-text-secondary: #050300;
   --color-semantic-text-accent: #00ffff;
   --color-semantic-text-disabled: #ff0000;
   --color-semantic-text-muted: rgba(255, 252, 247, 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: #00ffff;
   --color-semantic-border-default: #00ffff;
   --color-semantic-border-focus: #fffcf7;
   --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 #00FFFF80; /** Extra small phosphor glow (subtle hover) */
-  --shadow-glow-sm: 0px 0px 10px 0px #00FFFF80; /** Small phosphor glow (button hover) */
-  --shadow-glow-md: 0px 0px 20px 0px #00FFFF80; /** Medium phosphor glow (container/card) */
-  --shadow-glow-lg: 0px 0px 30px 0px #00FFFF80; /** 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 #00FFFF80;
+  --shadow-glow-sm: 0px 0px 10px 0px #00FFFF80;
+  --shadow-glow-md: 0px 0px 20px 0px #00FFFF80;
+  --shadow-glow-lg: 0px 0px 30px 0px #00FFFF80;
 }

package/src/styles/tokens.css

@@ -29,7 +29,7 @@
   --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: #1f2228; /** Warm dark blue for info alerts */
   --color-semantic-alert-success: #122010; /** Warm dark green for success alerts */
@@ -143,14 +143,45 @@
   --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);
+  --dimension-placeholder: 0; /** Placeholder so the file is non-empty and parses. Remove when actual T3 tokens land. */
+  --effect-phosphor-intensity: 1; /** Overall phosphor brightness multiplier (0–1). Web: --retro-intensity CSS var; Apple: SwiftUI colorEffect shader uniform / Metal float. */
+  --effect-phosphor-persistence: 200ms; /** How long a glow lingers after change (50–800ms). Web: animation duration on glow fade; Apple: SwiftUI .easeOut animation duration or SKShader trailing uniform. Phase 0i Niels-derived (time-based segmentation). */
+  --effect-phosphor-glow-radius: 40px; /** Tight phosphor glow around lit pixels (8–120px). Web: box-shadow inset blur; Apple: SwiftUI .shadow(radius:) or CIBloom input radius. Note: Apple/web don't use identical units — see Phase 0i unit-conversion note. */
+  --effect-phosphor-bloom-radius: 80px; /** Soft phosphor halation extending outward (20–200px). Web: outer box-shadow inset blur; Apple: CIBloom larger pass. */
+  --effect-phosphor-bloom-intensity: 0.5; /** Phosphor halation visibility (0–1). Web: bloom layer opacity; Apple: CIBloom input intensity. */
+  --effect-phosphor-focus-blur: 0; /** Slight defocus from imperfect electron beam convergence (0–4px). Default 0 = perfectly focused. Phase 0i Niels-derived (oscilloscope FOCUS knob). Web: backdrop filter blur; Apple: CIGaussianBlur input radius. */
+  --effect-scanline-intensity: 0.6; /** Scanline visibility (0–1). Web: scanline overlay opacity; Apple: SwiftUI shader UV-based dark-stripe modulation. */
+  --effect-scanline-line-pitch: 4px; /** Distance between scanlines (2–8px). Web: gradient repeat distance; Apple: shader UV period. */
+  --effect-scanline-scroll-period: 9000ms; /** Scanline drift cycle (2000–30000ms; 0 to disable). Web: animation duration; Apple: shader time-uniform multiplier. */
+  --effect-flicker-intensity: 0.04; /** Flicker visibility (0–0.1). Web: flicker layer opacity; Apple: shader sine-wave modulation amplitude. */
+  --effect-flicker-period: 500ms; /** Flicker cycle (333–1000ms; >=333ms = 3Hz max for WCAG 2.3.1). Hard floor at 333ms enforced by build-time transform. Web: animation duration; Apple: time-uniform period. */
+  --effect-vignette-intensity: 1; /** Vignette visibility (0–1). Web: glow layer opacity; Apple: shader corner-darkening modulation. */
+  --effect-vignette-spread: 0.2; /** Vignette spread as fraction of viewport (0–0.5). Web: gradient stop position (50% = ratio of inner safe area); Apple: shader UV-distance threshold. */
+  --effect-web-scanline-line-width: 1px; /** Thin-line width in scanline gradient (web-only — Apple shader uses UV-fraction). */
+  --effect-web-scanline-scroll-distance: 12px; /** How far scanline overlay drifts before looping (web-only — Apple uses time-based UV scrolling). */
+  --effect-web-flicker-steps: 4; /** CSS steps() discretization (web-only — Apple shader is continuous). */
+  --effect-web-flicker-intensity-static: 0.03; /** Non-animated reduced-motion fallback opacity (web-only — Apple uses runtime accessibilityDisplayShouldReduceMotion flag, not a token). */
+  --effect-web-bloom-fade-stop: 0.6; /** CSS radial-gradient stop where bloom transparency begins (web-only — CIBloom has no gradient-stop equivalent). */
+  --effect-web-vignette-gradient-extent-x: 120; /** CSS radial-gradient ellipse X size in % (web-only). */
+  --effect-web-vignette-gradient-extent-y: 100; /** CSS radial-gradient ellipse Y size in % (web-only). */
+  --effect-web-vignette-transition-edge: 0.8; /** Outer-edge gradient stop where deepest vignette begins (web-only). */
+  --effect-web-power-scale-pre-collapse: 0.95; /** CSS transform: scale() start during power-off (web-only). */
+  --effect-web-power-scale-collapse-line: 0.005; /** Thin horizontal line mid-state during collapse (web-only). */
+  --effect-web-power-blur-collapse: 2px; /** CSS filter: blur() during collapse (web-only). */
+  --effect-web-power-blur-warmup-start: 4px; /** Warmup-start blur (web-only). */
+  --effect-web-power-blur-warmup-mid: 2px; /** Warmup-mid blur (web-only). */
+  --effect-web-power-brightness-warmup-start: 0.3; /** Warmup-start CSS filter: brightness() (web-only). */
+  --effect-web-power-brightness-warmup-mid: 0.6; /** Warmup-mid brightness (web-only). */
+  --effect-web-power-duration-off: 400ms; /** Web-only power-off animation duration. Apple platforms have own timing curves. */
+  --effect-web-power-duration-on: 600ms; /** Web-only power-on animation duration. */
   --color-semantic-text-primary: var(--color-cga-light-gray);
   --color-semantic-text-secondary: var(--color-cga-black);
   --color-semantic-text-accent: var(--color-cga-yellow);
   --color-semantic-text-disabled: var(--color-cga-dark-gray);
   --color-semantic-text-muted: var(--color-cga-amber-dim); /** Muted supplementary text — timestamps, counts, footnotes. T10 handoff: dedicated amber-dim hex (in-family with primary), not brown; no opacity coupling. */
+  --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-light-gray);
   --color-semantic-border-focus: var(--color-cga-yellow);
   --color-semantic-border-hover: var(--color-cga-white);

package/tailwind.preset.cjs

@@ -63,18 +63,20 @@ const preset = {
         "dos-bg-primary": "var(--color-semantic-background-primary)",
         "dos-bg-secondary": "var(--color-semantic-background-secondary)",
         "dos-bg-accent": "var(--color-semantic-background-accent)",
+        "dos-text-ai-draft": "var(--color-semantic-text-ai-draft)",
         "dos-text-primary": "var(--color-semantic-text-primary)",
         "dos-text-secondary": "var(--color-semantic-text-secondary)",
         "dos-text-accent": "var(--color-semantic-text-accent)",
         "dos-text-disabled": "var(--color-semantic-text-disabled)",
         "dos-text-muted": "var(--color-semantic-text-muted)",
-        "dos-text-ai-draft": "var(--color-semantic-text-ai-draft)",
         "dos-border-default": "var(--color-semantic-border-default)",
         "dos-border-focus": "var(--color-semantic-border-focus)",
         "dos-border-hover": "var(--color-semantic-border-hover)",
         "dos-border-disabled": "var(--color-semantic-border-disabled)",
         "dos-link": "var(--color-semantic-link-default)",
         "dos-link-hover": "var(--color-semantic-link-hover)",
+        "dos-link-active": "var(--color-semantic-link-active)",
+        "dos-link-visited": "var(--color-semantic-link-visited)",
         "dos-success": "var(--color-semantic-status-success)",
         "dos-warning": "var(--color-semantic-status-warning)",
         "dos-error": "var(--color-semantic-status-error)",