/* ========================================================================== DR-COMPAT: Dark Roast Terminal Compatibility Bridge Version: 1.0 (Phase 0) WHAT THIS DOES: Re-declares --term-* and --sol-* token VALUES with Dark Roast colors. All 4,500+ existing variable references continue to work unchanged. The visual output shifts from Phosphor/Solarized palette to DR palette. LOAD ORDER: After terminal-core.css, sol-layout.css, and dark-roast-tokens.css. CSS cascade means later declarations win for same-specificity selectors. ROLLBACK: Set ENABLE_DARK_ROAST=false in env. Instant revert. DO NOT DELETE THIS FILE — see docs/ARCHITECTURE.md "Dark Roast Terminal Theme System" ARCHITECTURE: Bridge approach — re-declare VALUES, not rename tokens. WHY: Renaming 4,500+ var() refs is a 19-29 day multi-phase project. The bridge gives DR colors NOW with zero consuming file changes. TRADEOFF: Extra ~200 line CSS file vs immediate visual cohesion. ========================================================================== */ /* ========================================================================== SECTION 1: TERMINAL TOKEN OVERRIDES → DR COLORS Targets body[data-theme="terminal"] to match terminal-core.css specificity. ========================================================================== */ body[data-theme="terminal"] { /* — Backgrounds: Warm Void → Espresso Spectrum — */ --term-bg-void: #120C06; /* was #0C0B0A → DR void */ --term-bg-surface: #160E08; /* was #13120F → DR obsidian */ --term-bg-elevated: #2A1C13; /* was #1B1A16 → DR grain */ --term-bg-header: #120C06; /* was #0E0D0B → DR void */ --term-bg-input: #160E08; /* was #17160F → DR obsidian */ /* — Foregrounds: Cool Whites → Warm Crema — HARDENED (2026-03-11): mocha + asparagus raised for WCAG AA on hospital TN panels. */ --term-fg-primary: #FFF7EE; /* was #E8E4DC → DR crema */ --term-fg-secondary: #9B8868; /* was #A09888 → DR mocha (hardened: 4.33→5.66 CR) */ --term-fg-muted: #6E8068; /* was #8A8278 → DR asparagus (hardened: 2.57→4.58 CR) */ --term-fg-inverse: #120C06; /* was #0C0B0A → DR void */ /* — Borders: Cool Gray → Warm Brown — HARDENED (2026-03-11): crater raised ~60% for TN-panel border visibility. */ --term-border-subtle: #5A453A; /* was #1E1C18 → DR crater (hardened: 1.43→2.35 CR) */ --term-border-default: #5A453A; /* was #2A2720 → DR crater (hardened) */ --term-border-strong: #6B564A; /* was #3A3630 → DR crater-lt (hardened: 1.84→2.85 CR) */ /* — Accent: Electric Mint → DR Teal — */ --term-accent: #4CC4B4; /* was #00FFD0 → DR teal */ --term-accent-dim: rgba(76, 196, 180, 0.40); --term-accent-subtle: rgba(76, 196, 180, 0.10); --term-accent-ghost: rgba(76, 196, 180, 0.08); /* hardened: 0.05→0.08 */ /* — Decorative: Art Deco Gold → DR Gold — */ --term-gold: #DAA520; /* was #D4A857 → DR gold */ --term-gold-dim: rgba(218, 165, 32, 0.40); --term-gold-subtle: rgba(218, 165, 32, 0.10); --term-gold-ghost: rgba(218, 165, 32, 0.08); /* hardened: 0.05→0.08 */ /* — Clinical Status: Tailwind → DR Warm Palette — */ --term-status-idle: #9B8868; /* was #564E42 → DR mocha (hardened) */ --term-status-generating: #4CC4B4; /* was #3B82F6 → DR teal */ --term-status-ready: #DAA520; /* was #22C55E → DR gold */ --term-status-editing: #E69A4C; /* was #F59E0B → DR amber */ --term-status-error: #CF5858; /* was #EF4444 → DR scarlet (hardened: 4.15→4.80 CR) */ /* — Clinical Status Aliases (sidebar, patient cards) — */ --term-status-critical: #CF5858; /* was #EF4444 → DR scarlet (hardened) */ --term-status-worsening: #D2691E; /* was #F59E0B → DR amber-hot */ --term-status-stable: #DAA520; /* was #22C55E → DR gold */ /* — Clinical Severity (patient header badges, avatar states) — FIX: terminal-core.css had TWO conflicting severity systems (--term-status-* vs --term-severity-*) with different hex values. DR unifies to one warm gradient. */ --term-severity-critical: #CF5858; /* was #EF4444 → DR scarlet (hardened) */ --term-severity-worsening: #D2691E; /* was #FFAA00 → DR amber-hot */ --term-severity-stable: #DAA520; /* was #00FFD0 (BUG: was mint, not green) → DR gold */ --term-severity-improving: #E69A4C; /* was #4488FF → DR amber */ /* — Multi-Layer Glow Effects (Phosphor Gas → DR Color Bases) — HARDENED (2026-03-11): Outer wash opacity bumped for hospital TN-panel visibility. Pattern: outermost layer 0.10-0.15 → 0.20-0.25. Scarlet base → 207,88,88. */ --term-glow-accent: 0 0 2px rgba(255, 255, 255, 0.4), 0 0 8px rgba(76, 196, 180, 0.35), 0 0 24px rgba(76, 196, 180, 0.22); --term-glow-accent-intense: 0 0 4px rgba(255, 255, 255, 0.6), 0 0 16px rgba(76, 196, 180, 0.50), 0 0 36px rgba(76, 196, 180, 0.30); --term-glow-accent-ghost: 0 0 4px rgba(76, 196, 180, 0.12), 0 0 12px rgba(76, 196, 180, 0.06); --term-glow-gold: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 10px rgba(218, 165, 32, 0.25), 0 0 24px rgba(218, 165, 32, 0.20); --term-glow-gold-intense: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 14px rgba(218, 165, 32, 0.40), 0 0 32px rgba(218, 165, 32, 0.25); --term-glow-generating: 0 0 2px rgba(255, 255, 255, 0.4), 0 0 8px rgba(76, 196, 180, 0.35), 0 0 24px rgba(76, 196, 180, 0.22); --term-glow-ready: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 10px rgba(218, 165, 32, 0.25), 0 0 24px rgba(218, 165, 32, 0.20); --term-glow-editing: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(230, 154, 76, 0.30), 0 0 20px rgba(230, 154, 76, 0.20); --term-glow-error: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(207, 88, 88, 0.40), 0 0 16px rgba(207, 88, 88, 0.25); --term-glow-critical: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(207, 88, 88, 0.40), 0 0 16px rgba(207, 88, 88, 0.25); --term-glow-worsening: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(210, 105, 30, 0.30), 0 0 20px rgba(210, 105, 30, 0.20); /* — Type Scale Floor (Hospital TN-Panel Hardening, 2026-03-11) — Bumps minimum text sizes for readability under ~500 lux fluorescent ambient. Note-rail already had local overrides (note-rail-terminal.css L42-44); this makes the bump global for all DR surfaces. */ --term-text-xs: 0.75rem; /* 12px — was 11px */ --term-text-sm: 0.875rem; /* 14px — was 13px */ /* — Selection: Mint → Teal — */ /* NOTE: ::selection pseudo-elements can't use var() in all browsers, so the terminal-core.css hardcoded rgba(0,255,208,0.20) for selection remains. That's acceptable — selection highlight is low-priority. */ } /* ========================================================================== SECTION 2: SOL TOKEN OVERRIDES → DR COLORS Targets :root to match sol-layout.css specificity. ========================================================================== */ :root { /* — Backgrounds: Blue-Gray → Warm Espresso — */ --sol-bg-primary: #120C06; /* was #0f1117 → DR void */ --sol-bg-secondary: #160E08; /* was #161922 → DR obsidian */ --sol-bg-tertiary: #2A1C13; /* was #1c1f2a → DR grain */ --sol-bg-elevated: #2A1C13; /* was #232736 → DR grain */ --sol-bg-hover: #382818; /* was #2a2e3d → DR grain-hover */ --sol-bg-panel: #2A1C13; /* was #232736 → DR grain */ /* — Text: Cool Slate → Warm Crema — */ --sol-text-primary: #FFF7EE; /* was #f8fafc → DR crema */ --sol-text-secondary: #9B8868; /* was #94a3b8 → DR mocha (hardened) */ --sol-text-tertiary: #6E8068; /* was #64748b → DR asparagus (hardened) */ --sol-text-muted: #6E8068; /* was #475569 → DR asparagus (hardened) */ /* — Borders: White Alpha → Warm Brown — */ --sol-border: #5A453A; /* was rgba(255,255,255,0.1) → DR crater (hardened) */ --sol-border-subtle: rgba(255, 247, 238, 0.08); /* warm-tinted divider (hardened: 0.04→0.08) */ --sol-border-default: #5A453A; --sol-border-strong: #6B564A; /* was rgba(255,255,255,0.15) → DR crater-lt (hardened) */ /* — Accent: Blue → Amber — */ --sol-accent: #E69A4C; /* was #3b82f6 → DR amber */ --sol-accent-primary: #E69A4C; /* was #3b82f6 → DR amber */ --sol-accent-secondary: #D2691E; /* was #8b5cf6 → DR amber-hot */ --sol-accent-hover: #DAA520; /* was #60a5fa → DR gold */ /* — Severity: Tailwind → DR Warm Gradient — */ --sol-critical: #CF5858; /* was #ef4444 → DR scarlet (hardened) */ --sol-critical-bg: rgba(207, 88, 88, 0.10); --sol-critical-border: rgba(207, 88, 88, 0.40); --sol-warning: #D2691E; /* was #f59e0b → DR amber-hot */ --sol-warning-bg: rgba(210, 105, 30, 0.10); --sol-warning-border: rgba(210, 105, 30, 0.40); --sol-stable: #DAA520; /* was #22c55e → DR gold */ --sol-stable-bg: rgba(218, 165, 32, 0.10); --sol-stable-border: rgba(218, 165, 32, 0.40); --sol-resolved: #4CC4B4; /* was #6b7280 → DR teal */ --sol-resolved-bg: rgba(76, 196, 180, 0.10); /* — Signal/Info: Blue → Teal/Gold — */ --sol-info: #4CC4B4; /* was #3b82f6 → DR teal */ --sol-info-bg: rgba(76, 196, 180, 0.10); --sol-info-border: rgba(76, 196, 180, 0.30); --sol-notice: #DAA520; /* was #eab308 → DR gold */ --sol-notice-bg: rgba(218, 165, 32, 0.10); --sol-notice-border: rgba(218, 165, 32, 0.30); /* — Trends — */ --sol-trend-up: #CF5858; /* worsening = scarlet (hardened) */ --sol-trend-down: #4CC4B4; /* improving = teal */ --sol-trend-stable: #9B8868; /* flat = mocha (hardened) */ /* — Cards: Blue-Gray → Warm Grain — */ --sol-card-bg: #2A1C13; /* was #1e222d → DR grain */ --sol-card-bg-hover: #382818; /* was #252a38 → DR grain-hover */ --sol-card-shadow-base: 0 2px 8px rgba(18, 12, 6, 0.3); --sol-card-shadow-hover: 0 4px 16px rgba(18, 12, 6, 0.5); --sol-card-shadow-selected: 0 0 0 2px #E69A4C, 0 4px 16px rgba(18, 12, 6, 0.5); /* — Severity Glows: DR color bases (hardened outer wash) — */ --sol-glow-critical: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(207, 88, 88, 0.40), 0 0 16px rgba(207, 88, 88, 0.25); --sol-glow-warning: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(210, 105, 30, 0.30), 0 0 20px rgba(210, 105, 30, 0.20); --sol-glow-stable: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 10px rgba(218, 165, 32, 0.25), 0 0 24px rgba(218, 165, 32, 0.20); } /* ========================================================================== SECTION 3: CANONICAL SEVERITY ALIASES (Namespace-Agnostic) New code should use --severity-* tokens. Old code continues to work via the --sol-* and --term-* overrides above. 5-level warm gradient (hardened 2026-03-11): critical → scarlet #CF5858 worsening → amber-hot #D2691E improving → amber #E69A4C stable → gold #DAA520 resolved → teal #4CC4B4 ========================================================================== */ :root { --severity-critical: #CF5858; --severity-critical-bg: rgba(207, 88, 88, 0.10); --severity-critical-glow: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(207, 88, 88, 0.40), 0 0 16px rgba(207, 88, 88, 0.25); --severity-worsening: #D2691E; --severity-worsening-bg: rgba(210, 105, 30, 0.10); --severity-worsening-glow: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(210, 105, 30, 0.30), 0 0 20px rgba(210, 105, 30, 0.20); --severity-improving: #E69A4C; --severity-improving-bg: rgba(230, 154, 76, 0.10); --severity-improving-glow: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(230, 154, 76, 0.25), 0 0 24px rgba(230, 154, 76, 0.20); --severity-stable: #DAA520; --severity-stable-bg: rgba(218, 165, 32, 0.10); --severity-stable-glow: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 10px rgba(218, 165, 32, 0.25), 0 0 24px rgba(218, 165, 32, 0.20); --severity-resolved: #4CC4B4; --severity-resolved-bg: rgba(76, 196, 180, 0.10); --severity-resolved-glow: 0 0 2px rgba(255, 255, 255, 0.4), 0 0 8px rgba(76, 196, 180, 0.35), 0 0 24px rgba(76, 196, 180, 0.22); }