/* ========================================================================== 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: #C25F90; /* Option C: → DR magenta (was amber-hot #D2691E) */ --term-status-stable: #879A39; /* Option C: → DR olive (was gold #DAA520) */ /* — 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: #C25F90; /* Option C: → DR magenta, hue 333° (was amber-hot #D2691E) */ --term-severity-stable: #879A39; /* Option C: → DR olive, hue 72° (was gold #DAA520) */ --term-severity-improving: #D4A040; /* Option C: → DR harvest, hue 39° (was amber #E69A4C) */ /* — 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: /* Option C: magenta urgency profile (was amber-hot) */ 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(194, 95, 144, 0.40), 0 0 16px rgba(194, 95, 144, 0.25); /* — 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: #C25F90; /* Option C: → DR magenta (was amber-hot #D2691E) */ --sol-warning-bg: rgba(194, 95, 144, 0.10); --sol-warning-border: rgba(194, 95, 144, 0.40); --sol-stable: #879A39; /* Option C: → DR olive (was gold #DAA520) */ --sol-stable-bg: rgba(135, 154, 57, 0.10); --sol-stable-border: rgba(135, 154, 57, 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: #C25F90; /* Option C: worsening = DR magenta (was scarlet #CF5858) */ --sol-trend-down: #D4A040; /* Option C: improving = DR harvest (was teal #4CC4B4) */ --sol-trend-stable: #879A39; /* Option C: flat = DR olive (was mocha #9B8868) */ /* — 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: /* Option C: magenta urgency profile */ 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(194, 95, 144, 0.40), 0 0 16px rgba(194, 95, 144, 0.25); --sol-glow-stable: /* Option C: olive calm profile */ 0 0 2px rgba(255, 255, 255, 0.3), 0 0 10px rgba(135, 154, 57, 0.25), 0 0 24px rgba(135, 154, 57, 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 gradient (Option C, dark-roast v4.1.0 — distinct hue families): critical → scarlet #CF5858 (hue 0°) worsening → magenta #C25F90 (hue 333°) improving → harvest #D4A040 (hue 39°) stable → olive #879A39 (hue 72°) resolved → teal #4CC4B4 (hue 172°) Directional states (worsening/improving/stable) must render paired iconography — see dark-roast-theme docs/DESIGN-SYSTEM.md §6. ========================================================================== */ :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: #C25F90; /* Option C: DR magenta, hue 333° */ --severity-worsening-bg: rgba(194, 95, 144, 0.10); --severity-worsening-glow: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(194, 95, 144, 0.40), 0 0 16px rgba(194, 95, 144, 0.25); --severity-improving: #D4A040; /* Option C: DR harvest, hue 39° */ --severity-improving-bg: rgba(212, 160, 64, 0.10); --severity-improving-glow: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(212, 160, 64, 0.25), 0 0 24px rgba(212, 160, 64, 0.20); --severity-stable: #879A39; /* Option C: DR olive, hue 72° */ --severity-stable-bg: rgba(135, 154, 57, 0.10); --severity-stable-glow: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 10px rgba(135, 154, 57, 0.25), 0 0 24px rgba(135, 154, 57, 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); } /* ========================================================================== SECTION 4: ATMOSPHERE PARITY WITH GUEST HERO (2026-04-21, rev 2) REV 2 (2026-04-21): First pass was too timid. Grain at effective ~0.011 opacity with mix-blend-mode: overlay over near-black #120C06 produced nothing visible. User reported "I don't see anything different" after hard-refresh. This rev: a. Font tokens wired to Playfair Display / Instrument Sans (Agent A installs families) b. Two-layer atmosphere on body::before (grain) + body::after (radial warm bloom) targeting effective ~0.04 opacity; screen blend over warm void so it renders c. Glass-panel + warm-border card tokens consuming CSS can hook into d. .dr-geo-stripe utility ported from canonical, scoped to terminal theme e. Polished selection / scrollbar micro-changes from rev 1 All rules scoped to body[data-theme="terminal"] — feature-flag-safe. Setting ENABLE_DARK_ROAST=false drops this file entirely and reverts every change. ========================================================================== */ /* --- 4a. FONT TOKEN WIRES --------------------------------------------------- Agent A is installing Playfair Display + Instrument Sans @font-face blocks. Here we just point the existing --term-font-* consumer refs at the new stacks. Hero serif is NEW (no existing consumers yet) — exposed for patient-header work. */ body[data-theme="terminal"] { --term-font-display: 'Instrument Sans', 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --term-font-heading: var(--term-font-display); --term-font-hero: 'Playfair Display', Georgia, 'Times New Roman', serif; /* 4c. Card-surface tokens — single hook point for consuming CSS. Warm glass gradient mirrors canonical .dr-glass-panel (dark-roast.css L485). */ --term-card-bg-gradient: linear-gradient(145deg, #2A1C13 0%, rgba(60, 42, 33, 0.2) 100%); --term-card-border-warm: 1px solid #3C2A21; --term-card-shadow-warm: 0 10px 40px rgba(0, 0, 0, 0.5); } /* --- 4b. VISIBLE ATMOSPHERIC GRAIN + WARM BLOOM ----------------------------- Two overlays, both pointer-events:none, both fixed fullscreen. ::before — fractal noise (uses canonical --dr-grain-texture which has NO baked opacity, unlike --term-grain which has 0.018 in the SVG itself). Opacity 0.04 with mix-blend-mode: screen so it ADDS light grain on top of warm void bg. Screen blend on near-black produces visible grain; overlay blend does not. ::after — radial warm bloom: amber top-left + teal top-right, extremely subtle. This is the "signal-line atmosphere" cue from the guest hero — the feeling that light is leaking in from the corners. No blend mode; just a soft tinted wash. */ body[data-theme="terminal"]::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; /* FIX (2026-04-21): inline the canonical DR grain SVG rather than referencing var(--dr-grain-texture). That token is gated to [data-theme="dark-roast"] in dark-roast-tokens.css, but the census body is [data-theme="terminal"] — the variable would be undefined and the image wouldn't render. Inlining bypasses the scope mismatch and keeps all DR atmosphere local to this feature-flag-safe bridge file. */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: screen; opacity: 0.04; } body[data-theme="terminal"]::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 60% 50% at 0% 0%, rgba(230, 154, 76, 0.055), transparent 60%), radial-gradient(ellipse 55% 45% at 100% 0%, rgba(76, 196, 180, 0.040), transparent 60%), radial-gradient(ellipse 70% 60% at 50% 100%, rgba(218, 165, 32, 0.022), transparent 65%); } /* Accessibility: respect user preferences. Drops both overlays when requested. */ @media (prefers-reduced-transparency: reduce) { body[data-theme="terminal"]::before, body[data-theme="terminal"]::after { display: none; } } @media (prefers-reduced-motion: reduce) { /* Current overlays are static — no motion to reduce — but leave hook for future drift animation to opt out here rather than scatter rules. */ body[data-theme="terminal"]::before { animation: none; } } /* --- 4d. GEO-STRIPE UTILITY (ported from canonical, terminal-scoped) -------- Warm bottom gradient on cards. Consuming CSS opts in by adding .dr-geo-stripe to a card element. Scoped to terminal theme so the bridge owns activation — nothing is styled globally, so disabling ENABLE_DARK_ROAST fully reverts. */ body[data-theme="terminal"] .dr-geo-stripe { position: relative; } body[data-theme="terminal"] .dr-geo-stripe::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #3C2A21 0%, #5A453A 45%, transparent 100%); opacity: 0.5; pointer-events: none; /* Match the card's bottom radius if any; fallback is 0 */ border-radius: 0 0 inherit inherit; } /* --- 4e. MICRO-CHANGES (selection + scrollbar hover) ----------------------- ::selection cannot use var() reliably across browsers; hex/rgba literals used. Specificity of body[data-theme="terminal"] ::selection wins over terminal-core by cascade order (this file loads after). */ body[data-theme="terminal"] ::selection { background: rgba(76, 196, 180, 0.25); color: #FFF7EE; } body[data-theme="terminal"] ::-moz-selection { background: rgba(76, 196, 180, 0.25); color: #FFF7EE; } /* Amber scrollbar thumb hover — canonical Dark Roast behavior */ body[data-theme="terminal"] ::-webkit-scrollbar-thumb:hover { background: #E69A4C; }