eidotter 0.18.0 → 0.19.1

package/guidelines/README.md

@@ -4,11 +4,11 @@ A DOS-themed React component library with authentic CGA/amber phosphor aesthetic
 
 ## Overview
 
-eidotter provides 32 ready-to-use components with consistent DOS terminal styling:
+eidotter provides 33 ready-to-use components with consistent DOS terminal styling:
 
 - **Dark theme only** - Amber-on-black phosphor CRT aesthetic
 - **CGA color palette** - 16 authentic CGA colors + amber extensions
-- **Monospace typography** - JetBrains Mono with system fallbacks
+- **Monospace typography** - Flexi IBM VGA True (bitmap-style VGA font)
 - **Minimal rounded corners** - 2-4px max (DOS aesthetic)
 - **Phosphor glow effects** - Authentic CRT visual effects
 - **React Aria** - Accessible keyboard/focus handling on interactive components
@@ -17,6 +17,7 @@ eidotter provides 32 ready-to-use components with consistent DOS terminal stylin
 
 ```tsx
 import { Button, Card, Input } from 'eidotter';
+import 'eidotter/fonts.css';   // Flexi IBM VGA True @font-face (required)
 import 'eidotter/styles';      // Component CSS (includes Tailwind utilities)
 import 'eidotter/tokens.css';  // CSS variable definitions (required)
 
@@ -48,7 +49,8 @@ function App() {
 | CommandPrompt | DOS command line display |
 | FilterBar | Multi-select toggle group |
 | Footer | Site footer with legal links |
-| Icon | SVG icons backed by @untitledui-pro/icons |
+| Header | Sticky site header with branding + Nav |
+| Icon | SVG icons backed by pixelarticons (MIT) — authentic DOS pixel art |
 | InlineExpand | Inline disclosure widget |
 | Input | Text entry fields with label and error support |
 | Modal | Dialog overlays |
@@ -88,6 +90,7 @@ function App() {
 ### CSS Import (required)
 
 ```tsx
+import 'eidotter/fonts.css';   // Flexi IBM VGA True @font-face (required)
 import 'eidotter/styles';      // Component CSS (includes compiled Tailwind utilities)
 import 'eidotter/tokens.css';  // Design token CSS variables
 

package/guidelines/components.md

@@ -706,9 +706,48 @@ Marker for timeline and stepper interfaces.
 
 ---
 
+## Header
+
+Sticky site header composing branding link + Nav. Supports retro/modern variants and custom link components for framework routing.
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| brandName | `string` | — | Site brand name displayed in the header |
+| brandHref | `string` | `'/'` | Href for the brand link |
+| items | `NavItem[]` | — | Navigation items passed through to Nav |
+| activeHref | `string` | — | Currently active href (highlights matching nav link) |
+| variant | `'retro' \| 'modern'` | `'retro'` | Visual variant applied to both header and nav |
+| sticky | `boolean` | `true` | Whether the header sticks to viewport top |
+| linkComponent | `React.ElementType` | `'a'` | Custom link component for framework routing |
+| children | `ReactNode` | — | Custom branding content (replaces brandName) |
+| className | `string` | — | Additional CSS class name |
+
+### Examples
+
+```tsx
+// Basic retro header
+<Header brandName="DMNC.TECH" items={navItems} />
+
+// Modern variant with active page
+<Header brandName="MY-APP" items={navItems} variant="modern" activeHref="/about" />
+
+// With custom link component (Next.js)
+import Link from 'next/link';
+<Header brandName="MY-APP" items={navItems} linkComponent={Link} />
+
+// Custom branding via children
+<Header items={navItems}>
+  <img src="/logo.png" alt="Logo" />
+</Header>
+```
+
+---
+
 ## Icon
 
-89 DOS-styled icons.
+DOS-styled icons backed by pixelarticons (MIT).
 
 ### Props
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eidotter",
-  "version": "0.18.0",
+  "version": "0.19.1",
   "type": "module",
   "description": "A DOS Themed Design System",
   "main": "./dist/index.umd.js",
@@ -32,7 +32,7 @@
     "tailwind.preset.cjs",
     "tailwind.preset.enhanced.cjs",
     "src/styles/fonts.css",
-    "src/styles/fonts/Flexi_IBM_VGA_False.ttf",
+    "src/styles/fonts/Flexi_IBM_VGA_True.ttf",
     "src/styles/fonts/Flexi_IBM_VGA_LICENSE.txt",
     "src/styles/tokens.css",
     "src/styles/theme.*.css",
@@ -133,7 +133,7 @@
     "vite": "^6.2.0"
   },
   "dependencies": {
-    "@untitledui-pro/icons": "0.0.3",
+    "pixelarticons": "^2.0.2",
     "react-aria": "^3.47.0",
     "react-aria-components": "^1.16.0",
     "react-stately": "^3.45.0"

package/src/styles/fonts.css

@@ -1,8 +1,17 @@
-/* Flexi IBM VGA False — vector remake of IBM VGA BIOS font (CC BY-SA 4.0, VileR/int10h.org) */
+/*
+ * Flexi IBM VGA True v2 — scalable TrueType remake of the IBM VGA BIOS font,
+ * aspect-corrected (CC BY-SA 4.0, VileR / int10h.org).
+ *
+ * Single-weight by design: authentic DOS had no bold variant. Emphasis is
+ * expressed via color, uppercase, or inverse video — never by weight.
+ * `font-synthesis: none` prevents browsers from faking bold/italic if any
+ * downstream stylesheet accidentally requests a heavier weight.
+ */
 @font-face {
-  font-family: 'Flexi IBM VGA False';
+  font-family: 'Flexi IBM VGA True';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url('./fonts/Flexi_IBM_VGA_False.ttf') format('truetype');
+  font-synthesis: none;
+  src: url('./fonts/Flexi_IBM_VGA_True.ttf') format('truetype');
 }

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

@@ -28,24 +28,34 @@
   --color-cga-cyan-glow: rgba(85, 255, 255, 0.5); /** Cyan glow at 50% opacity */
   --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, 255, 255, 0.5); /** White glow at 50% opacity */
-  --typography-font-family-primary: 'Flexi IBM VGA False'; /** Flexi IBM VGA False — vector remake of IBM VGA BIOS font (CC BY-SA 4.0) */
+  --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
+  --typography-font-family-primary: 'Flexi IBM VGA True'; /** Flexi IBM VGA True v2 — vector remake of IBM VGA BIOS font, aspect-corrected (CC BY-SA 4.0) */
   --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
-  --typography-font-size-2xs: 0.625rem; /** Compact UI chrome (badges, counts, small labels) */
-  --typography-font-size-xs: 0.75rem;
-  --typography-font-size-sm: 0.875rem;
-  --typography-font-size-base: 1rem;
-  --typography-font-size-lg: 1.125rem;
-  --typography-font-size-xl: 1.25rem;
-  --typography-font-size-2xl: 1.5rem;
-  --typography-font-size-3xl: 1.875rem;
-  --typography-font-size-4xl: 2.25rem;
+  --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: 600;
-  --typography-font-weight-bold: 700;
-  --typography-line-height-tight: 1.2;
-  --typography-line-height-normal: 1.5;
-  --typography-line-height-loose: 1.8;
+  --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;
@@ -64,7 +74,7 @@
   --border-width-medium: 2px;
   --border-width-thick: 4px;
   --shadow-none: none;
-  --shadow-drop: 2px 2px 0px 0px #000000; /** Hard drop shadow, DOS window style */
+  --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) */
@@ -115,14 +125,14 @@
   --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(0, 0, 0, 0.8); /** Modal/dialog backdrop overlay */
+  --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(0, 0, 0, 0.3); /** Vignette edge darkening */
-  --effects-vignette-corner: rgba(0, 0, 0, 0.5); /** Vignette corner darkening */
+  --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(0, 0, 0, 0.5); /** Terminal window drop shadow */
+  --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 */

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

@@ -3,22 +3,22 @@
  */
 
 [data-theme="cga-amber"], .theme-cga-amber {
-  --color-cga-black: #000000;
+  --color-cga-black: #050300; /** Warm near-black (~3% amber) */
   --color-cga-blue: #0000aa;
   --color-cga-green: #00aa00;
   --color-cga-cyan: #00aaaa;
   --color-cga-red: #aa0000;
   --color-cga-magenta: #aa00aa;
   --color-cga-brown: #aa5500;
-  --color-cga-light-gray: #aaaaaa;
-  --color-cga-dark-gray: #555555;
+  --color-cga-light-gray: #adaaa5; /** Warm light gray (~3% amber) */
+  --color-cga-dark-gray: #5a5852; /** Warm mid-gray (~3% amber) */
   --color-cga-bright-blue: #5555ff;
   --color-cga-bright-green: #55ff55;
   --color-cga-bright-cyan: #55ffff;
   --color-cga-bright-red: #ff5555;
   --color-cga-bright-magenta: #ff55ff;
   --color-cga-yellow: #ffff55;
-  --color-cga-white: #ffffff;
+  --color-cga-white: #fffcf7; /** Warm off-white (~2% amber) */
   --color-cga-amber: #ffb000; /** P3 phosphor amber (602nm) */
   --color-cga-amber-bright: #fdca9f; /** P3 phosphor amber bright */
   --color-cga-amber-dim: #9a5700; /** P3 phosphor amber dim */
@@ -28,28 +28,38 @@
   --color-cga-cyan-glow: rgba(85, 255, 255, 0.5); /** Cyan glow at 50% opacity */
   --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, 255, 255, 0.5); /** White glow at 50% opacity */
-  --color-semantic-alert-info: #001535;
-  --color-semantic-alert-success: #0a2015;
+  --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
+  --color-semantic-alert-info: #0a1828;
+  --color-semantic-alert-success: #122010;
   --color-semantic-alert-warning: #352800;
-  --color-semantic-alert-error: #430000;
-  --typography-font-family-primary: 'Flexi IBM VGA False'; /** Flexi IBM VGA False — vector remake of IBM VGA BIOS font (CC BY-SA 4.0) */
+  --color-semantic-alert-error: #430500;
+  --typography-font-family-primary: 'Flexi IBM VGA True'; /** Flexi IBM VGA True v2 — vector remake of IBM VGA BIOS font, aspect-corrected (CC BY-SA 4.0) */
   --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
-  --typography-font-size-2xs: 0.625rem; /** Compact UI chrome (badges, counts, small labels) */
-  --typography-font-size-xs: 0.75rem;
-  --typography-font-size-sm: 0.875rem;
-  --typography-font-size-base: 1rem;
-  --typography-font-size-lg: 1.125rem;
-  --typography-font-size-xl: 1.25rem;
-  --typography-font-size-2xl: 1.5rem;
-  --typography-font-size-3xl: 1.875rem;
-  --typography-font-size-4xl: 2.25rem;
+  --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: 600;
-  --typography-font-weight-bold: 700;
-  --typography-line-height-tight: 1.2;
-  --typography-line-height-normal: 1.5;
-  --typography-line-height-loose: 1.8;
+  --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;
@@ -68,7 +78,7 @@
   --border-width-medium: 2px;
   --border-width-thick: 4px;
   --shadow-none: none;
-  --shadow-drop: 2px 2px 0px 0px #000000; /** Hard drop shadow, DOS window style */
+  --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) */
@@ -119,14 +129,14 @@
   --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(0, 0, 0, 0.8); /** Modal/dialog backdrop overlay */
+  --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(0, 0, 0, 0.3); /** Vignette edge darkening */
-  --effects-vignette-corner: rgba(0, 0, 0, 0.5); /** Vignette corner darkening */
+  --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(0, 0, 0, 0.5); /** Terminal window drop shadow */
+  --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 */

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

@@ -3,15 +3,15 @@
  */
 
 [data-theme="cga-mode4-p0"], .theme-cga-mode4-p0 {
-  --color-cga-black: #000000;
-  --color-cga-blue: #000000;
+  --color-cga-black: #050300;
+  --color-cga-blue: #050300;
   --color-cga-green: #00ff00;
   --color-cga-cyan: #00ff00;
   --color-cga-red: #ff0000;
   --color-cga-magenta: #ff0000;
   --color-cga-brown: #ff0000;
   --color-cga-light-gray: #ffff00;
-  --color-cga-dark-gray: #000000;
+  --color-cga-dark-gray: #050300;
   --color-cga-bright-blue: #00ff00;
   --color-cga-bright-green: #00ff00;
   --color-cga-bright-cyan: #00ff00;
@@ -28,12 +28,12 @@
   --color-cga-cyan-glow: rgba(85, 255, 255, 0.5); /** Cyan glow at 50% opacity */
   --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, 255, 255, 0.5); /** White glow at 50% opacity */
-  --color-semantic-background-primary: #000000;
-  --color-semantic-background-secondary: #000000;
+  --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-primary: #ffff00;
-  --color-semantic-text-secondary: #000000;
+  --color-semantic-text-secondary: #050300;
   --color-semantic-text-accent: #00ff00;
   --color-semantic-text-disabled: #ff0000;
   --color-semantic-border-default: #00ff00;
@@ -48,27 +48,37 @@
   --color-semantic-status-warning: #ffff00;
   --color-semantic-status-error: #ff0000;
   --color-semantic-status-info: #ffff00;
-  --color-semantic-alert-info: #000000;
-  --color-semantic-alert-success: #000000;
-  --color-semantic-alert-warning: #000000;
-  --color-semantic-alert-error: #000000;
-  --typography-font-family-primary: 'Flexi IBM VGA False'; /** Flexi IBM VGA False — vector remake of IBM VGA BIOS font (CC BY-SA 4.0) */
+  --color-semantic-alert-info: #050300;
+  --color-semantic-alert-success: #050300;
+  --color-semantic-alert-warning: #050300;
+  --color-semantic-alert-error: #050300;
+  --typography-font-family-primary: 'Flexi IBM VGA True'; /** Flexi IBM VGA True v2 — vector remake of IBM VGA BIOS font, aspect-corrected (CC BY-SA 4.0) */
   --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
-  --typography-font-size-2xs: 0.625rem; /** Compact UI chrome (badges, counts, small labels) */
-  --typography-font-size-xs: 0.75rem;
-  --typography-font-size-sm: 0.875rem;
-  --typography-font-size-base: 1rem;
-  --typography-font-size-lg: 1.125rem;
-  --typography-font-size-xl: 1.25rem;
-  --typography-font-size-2xl: 1.5rem;
-  --typography-font-size-3xl: 1.875rem;
-  --typography-font-size-4xl: 2.25rem;
+  --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: 600;
-  --typography-font-weight-bold: 700;
-  --typography-line-height-tight: 1.2;
-  --typography-line-height-normal: 1.5;
-  --typography-line-height-loose: 1.8;
+  --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;
@@ -87,7 +97,7 @@
   --border-width-medium: 2px;
   --border-width-thick: 4px;
   --shadow-none: none;
-  --shadow-drop: 2px 2px 0px 0px #000000; /** Hard drop shadow, DOS window style */
+  --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) */
@@ -138,14 +148,14 @@
   --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(0, 0, 0, 0.8); /** Modal/dialog backdrop overlay */
+  --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(0, 0, 0, 0.3); /** Vignette edge darkening */
-  --effects-vignette-corner: rgba(0, 0, 0, 0.5); /** Vignette corner darkening */
+  --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(0, 0, 0, 0.5); /** Terminal window drop shadow */
+  --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 */

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

@@ -3,24 +3,24 @@
  */
 
 [data-theme="cga-mode4-p1"], .theme-cga-mode4-p1 {
-  --color-cga-black: #000000;
-  --color-cga-blue: #000000;
+  --color-cga-black: #050300;
+  --color-cga-blue: #050300;
   --color-cga-green: #00ffff;
   --color-cga-cyan: #00ffff;
   --color-cga-red: #ff00ff;
   --color-cga-magenta: #ff00ff;
   --color-cga-brown: #ff00ff;
-  --color-cga-light-gray: #ffffff;
-  --color-cga-dark-gray: #000000;
+  --color-cga-light-gray: #fffcf7;
+  --color-cga-dark-gray: #050300;
   --color-cga-bright-blue: #00ffff;
   --color-cga-bright-green: #00ffff;
   --color-cga-bright-cyan: #00ffff;
   --color-cga-bright-red: #ff00ff;
   --color-cga-bright-magenta: #ff00ff;
-  --color-cga-yellow: #ffffff;
-  --color-cga-white: #ffffff;
+  --color-cga-yellow: #fffcf7;
+  --color-cga-white: #fffcf7;
   --color-cga-amber: #00ffff;
-  --color-cga-amber-bright: #ffffff;
+  --color-cga-amber-bright: #fffcf7;
   --color-cga-amber-dim: #00ffff;
   --color-cga-amber-glow: rgba(0, 255, 255, 0.5);
   --color-cga-red-glow: rgba(255, 85, 85, 0.5); /** Red glow at 50% opacity */
@@ -28,47 +28,57 @@
   --color-cga-cyan-glow: rgba(85, 255, 255, 0.5); /** Cyan glow at 50% opacity */
   --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, 255, 255, 0.5); /** White glow at 50% opacity */
-  --color-semantic-background-primary: #000000;
-  --color-semantic-background-secondary: #000000;
+  --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-primary: #ffffff;
-  --color-semantic-text-secondary: #000000;
+  --color-semantic-text-primary: #fffcf7;
+  --color-semantic-text-secondary: #050300;
   --color-semantic-text-accent: #00ffff;
   --color-semantic-text-disabled: #ff00ff;
   --color-semantic-border-default: #00ffff;
-  --color-semantic-border-focus: #ffffff;
+  --color-semantic-border-focus: #fffcf7;
   --color-semantic-border-hover: #ff00ff;
   --color-semantic-border-disabled: #00ffff;
   --color-semantic-link-default: #00ffff;
-  --color-semantic-link-hover: #ffffff;
+  --color-semantic-link-hover: #fffcf7;
   --color-semantic-link-active: #ff00ff;
   --color-semantic-link-visited: #ff00ff;
   --color-semantic-status-success: #00ffff;
   --color-semantic-status-warning: #ff00ff;
   --color-semantic-status-error: #ff00ff;
-  --color-semantic-status-info: #ffffff;
-  --color-semantic-alert-info: #000000;
-  --color-semantic-alert-success: #000000;
-  --color-semantic-alert-warning: #000000;
-  --color-semantic-alert-error: #000000;
-  --typography-font-family-primary: 'Flexi IBM VGA False'; /** Flexi IBM VGA False — vector remake of IBM VGA BIOS font (CC BY-SA 4.0) */
+  --color-semantic-status-info: #fffcf7;
+  --color-semantic-alert-info: #050300;
+  --color-semantic-alert-success: #050300;
+  --color-semantic-alert-warning: #050300;
+  --color-semantic-alert-error: #050300;
+  --typography-font-family-primary: 'Flexi IBM VGA True'; /** Flexi IBM VGA True v2 — vector remake of IBM VGA BIOS font, aspect-corrected (CC BY-SA 4.0) */
   --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
-  --typography-font-size-2xs: 0.625rem; /** Compact UI chrome (badges, counts, small labels) */
-  --typography-font-size-xs: 0.75rem;
-  --typography-font-size-sm: 0.875rem;
-  --typography-font-size-base: 1rem;
-  --typography-font-size-lg: 1.125rem;
-  --typography-font-size-xl: 1.25rem;
-  --typography-font-size-2xl: 1.5rem;
-  --typography-font-size-3xl: 1.875rem;
-  --typography-font-size-4xl: 2.25rem;
+  --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: 600;
-  --typography-font-weight-bold: 700;
-  --typography-line-height-tight: 1.2;
-  --typography-line-height-normal: 1.5;
-  --typography-line-height-loose: 1.8;
+  --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;
@@ -87,7 +97,7 @@
   --border-width-medium: 2px;
   --border-width-thick: 4px;
   --shadow-none: none;
-  --shadow-drop: 2px 2px 0px 0px #000000; /** Hard drop shadow, DOS window style */
+  --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) */
@@ -138,14 +148,14 @@
   --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(0, 0, 0, 0.8); /** Modal/dialog backdrop overlay */
+  --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(0, 0, 0, 0.3); /** Vignette edge darkening */
-  --effects-vignette-corner: rgba(0, 0, 0, 0.5); /** Vignette corner darkening */
+  --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(0, 0, 0, 0.5); /** Terminal window drop shadow */
+  --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 */