/* ========================================================================== DARK ROAST: BLACK LABEL — DESIGN TOKEN FOUNDATION Version: 2.0 (Canonical) Source: enhanced-dark-roast-v2.json + master-spec-v2.html Unified design system for somaCURA (clinical intelligence) and Song Expanse (music visualization). MIGRATION PHILOSOPHY (2026-02-25): Dark Roast does NOT replace the Phosphor Theatre terminal theme wholesale. The migration is ORGANIC: new high-value UI surfaces (problem cards, fragment evolution, clinical expression engine, finalization panels) are authored in --dr-* tokens from day one. The terminal theme (--term-*) remains the production baseline and should be referenced — not abandoned — for any enhancement to existing high-traffic areas (census list, note rail, prior notes panel, etc.). When an existing surface gets a meaningful UX rework, that's the natural moment to adopt --dr-* tokens for it. Architecture: CSS custom properties on data-theme selector, layered by functional concern. Mirrors terminal-core.css structure for parallel use. ========================================================================== */ /* ========================================================================== SECTION 1: CORE TOKEN DEFINITIONS 16 canonical colors across four functional layers. ========================================================================== */ :root[data-theme="dark-roast"], body[data-theme="dark-roast"] { /* — Backgrounds: Dark Roast Primary System — OLED science: void (#120C06) keeps pixels energized at 1.6ms wake delay, avoiding the 18.5ms purple-smearing artifact of pure black (#000000). Obsidian (#160E08) is the elevated floor at 1.8ms. Both are above the OLED power-off threshold while remaining perceptually near-black. */ --dr-void: #120C06; /* Deepest layer — page/app background */ --dr-obsidian: #160E08; /* Elevated floor — content area background */ --dr-grain: #2A1C13; /* Polished grain — card/panel surfaces */ --dr-grain-hover: #382818; /* Warm lift on hover/focus interaction */ /* — Foregrounds: Crema & Mocha — */ --dr-crema: #FFF7EE; /* Ivory crema — primary text, high contrast */ --dr-mocha: #9B8868; /* Muted mocha — secondary/caption text (hardened: 4.33→5.66 CR) */ /* — Geological Accent Layer: Crater Brown — Sedimentary palette providing structural depth and warm tertiary tones. crater/crater-lt are border and stripe colors; bone is reduced-contrast text; asparagus is tertiary metadata; rustic/rose are grounded error states. HARDENED (2026-03-11): crater/crater-lt/asparagus raised for hospital TN-panel visibility. */ --dr-crater: #5A453A; /* Crater brown — geological primary, borders (hardened: 1.43→2.35 CR) */ --dr-crater-lt: #6B564A; /* Earth taupe — spatial depth, hover borders (hardened: 1.84→2.85 CR) */ --dr-bone: #EBE1D7; /* Off-white/bone — reduced contrast body text */ --dr-asparagus: #6E8068; /* Desaturated asparagus — tertiary metadata (hardened: 2.57→4.58 CR) */ --dr-rustic: #480404; /* Rustic red — grounded interactive state */ --dr-rose: #480607; /* Bulgarian rose — contextual error background */ /* — Action & State Tokens — */ --dr-amber: #E69A4C; /* Amber gold — primary accent, CTA */ --dr-amber-hot: #D2691E; /* High-octane amber — gradient terminal, worsening */ --dr-gold: #DAA520; /* True gold — success state, stable severity */ --dr-scarlet: #CF5858; /* Roasted scarlet — warning/error, critical (hardened: 4.15→4.80 CR) */ --dr-teal: #4CC4B4; /* Kinetic teal — live data flow, resolved */ /* ====================================================================== SECTION 2: DERIVED TOKENS — OPACITY VARIANTS dim (40%), subtle (10%), ghost (5%) for each action color. Matches terminal-core.css --term-accent-dim / -subtle / -ghost pattern. ====================================================================== */ /* Amber variants */ --dr-amber-dim: rgba(230, 154, 76, 0.40); /* Focused borders, active rings */ --dr-amber-subtle: rgba(230, 154, 76, 0.10); /* Hover backgrounds, light fills */ --dr-amber-ghost: rgba(230, 154, 76, 0.08); /* Ghost state, skeleton loads (hardened: 0.05→0.08) */ /* Amber-Hot variants */ --dr-amber-hot-dim: rgba(210, 105, 30, 0.40); --dr-amber-hot-subtle: rgba(210, 105, 30, 0.10); --dr-amber-hot-ghost: rgba(210, 105, 30, 0.08); /* hardened: 0.05→0.08 */ /* Gold variants */ --dr-gold-dim: rgba(218, 165, 32, 0.40); --dr-gold-subtle: rgba(218, 165, 32, 0.10); --dr-gold-ghost: rgba(218, 165, 32, 0.08); /* hardened: 0.05→0.08 */ /* Scarlet variants (hardened: base 196,76,76 → 207,88,88) */ --dr-scarlet-dim: rgba(207, 88, 88, 0.40); /* Error borders, critical focus */ --dr-scarlet-subtle:rgba(207, 88, 88, 0.10); /* Error background fills */ --dr-scarlet-ghost: rgba(207, 88, 88, 0.08); /* Subtle error state (hardened: 0.05→0.08) */ /* Teal variants */ --dr-teal-dim: rgba(76, 196, 180, 0.40); /* Live data focus rings */ --dr-teal-subtle: rgba(76, 196, 180, 0.10); /* SSE stream backgrounds */ --dr-teal-ghost: rgba(76, 196, 180, 0.08); /* Resolved problem faint bg (hardened: 0.05→0.08) */ /* Structural derived */ --dr-divider: rgba(255, 247, 238, 0.08); /* Crema-based ultra-subtle divider (hardened: 0.04→0.08) */ /* ====================================================================== SECTION 3: GLOW EFFECTS Multi-layer phosphor-style glows. Three layers per glow: 1. White hotspot (inner bloom) 2. Color midband (primary identification) 3. Color wash (atmospheric diffusion) Mirrors terminal-core.css --term-glow-* pattern. ====================================================================== */ /* Amber glows (hardened outer wash) */ --dr-glow-amber: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 10px rgba(230, 154, 76, 0.25), 0 0 24px rgba(230, 154, 76, 0.20); --dr-glow-amber-intense: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 14px rgba(230, 154, 76, 0.40), 0 0 32px rgba(230, 154, 76, 0.25); /* Teal glows (hardened outer wash) */ --dr-glow-teal: 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); --dr-glow-teal-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); /* Scarlet glows (hardened: new base + outer wash) */ --dr-glow-scarlet: 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); --dr-glow-scarlet-intense: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 14px rgba(207, 88, 88, 0.55), 0 0 28px rgba(207, 88, 88, 0.30); /* Gold glows (hardened outer wash) */ --dr-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); --dr-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); /* Amber-Hot glows (hardened outer wash) */ --dr-glow-amber-hot: 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); /* Ghost-level glow for empty state cards (hardened) */ --dr-glow-teal-ghost: 0 0 4px rgba(76, 196, 180, 0.12), 0 0 12px rgba(76, 196, 180, 0.06); /* Glass panel gradient */ --dr-glass-gradient: linear-gradient(145deg, var(--dr-grain), rgba(60, 42, 33, 0.2)); /* ====================================================================== SECTION 4: TYPOGRAPHY STACK Four-tier type system: Display, Heading, Body, Mono. ====================================================================== */ --dr-font-display: 'Playfair Display', Georgia, serif; /* Hero elements, brand identity */ --dr-font-heading: 'Instrument Sans', -apple-system, sans-serif; /* Patient names, card headers */ --dr-font-body: 'DM Sans', -apple-system, sans-serif; /* Clinical descriptions, UI labels */ --dr-font-mono: 'Fira Code', 'SF Mono', monospace; /* Lab values, vitals, timestamps */ /* Type scale — hardened for hospital TN-panel readability */ --dr-text-xs: 0.75rem; /* 12px — metadata labels, timestamps (was 11px) */ --dr-text-sm: 0.875rem; /* 14px — captions, secondary info (was 13px) */ --dr-text-base: 0.9375rem; /* 15px — body text */ --dr-text-lg: 1.125rem; /* 18px — subheadings */ --dr-text-xl: 1.5rem; /* 24px — section headers */ --dr-text-2xl: 2rem; /* 32px — page titles */ --dr-text-huge: 4.5rem; /* 72px — hero display */ /* Letter spacing */ --dr-tracking-tight: -0.01em; --dr-tracking-normal: 0; --dr-tracking-wide: 0.05em; --dr-tracking-wider: 0.10em; --dr-tracking-widest: 0.20em; --dr-tracking-display: 0.15em; /* Section labels, uppercase metadata */ /* ====================================================================== SECTION 5: CLINICAL SEVERITY MAPPING (somaCURA) Maps JSON appTargets.somaCURA.severityMapping to CSS tokens. These are the canonical severity colors for patient state badges, problem cards, avatar rings, and clinical dashboards. ====================================================================== */ --dr-severity-critical: var(--dr-scarlet); /* #CF5858 — immediate danger (hardened) */ --dr-severity-worsening: var(--dr-amber-hot); /* #D2691E — trending worse */ --dr-severity-improving: var(--dr-amber); /* #E69A4C — trending better */ --dr-severity-stable: var(--dr-gold); /* #DAA520 — holding steady */ --dr-severity-resolved: var(--dr-teal); /* #4CC4B4 — no longer active */ /* Severity glow variants for badges, rings, and emphasis states */ --dr-glow-severity-critical: var(--dr-glow-scarlet); --dr-glow-severity-worsening: var(--dr-glow-amber-hot); --dr-glow-severity-improving: var(--dr-glow-amber); --dr-glow-severity-stable: var(--dr-glow-gold); --dr-glow-severity-resolved: var(--dr-glow-teal); /* Severity background fills for badge/chip backgrounds */ --dr-severity-critical-bg: var(--dr-scarlet-subtle); --dr-severity-worsening-bg: var(--dr-amber-hot-subtle); --dr-severity-improving-bg: var(--dr-amber-subtle); --dr-severity-stable-bg: var(--dr-gold-subtle); --dr-severity-resolved-bg: var(--dr-teal-subtle); /* Clinical workflow states (matches terminal-core.css --term-status-*) */ --dr-status-idle: var(--dr-mocha); --dr-status-generating: var(--dr-teal); --dr-status-ready: var(--dr-gold); --dr-status-editing: var(--dr-amber); --dr-status-error: var(--dr-scarlet); /* ====================================================================== SECTION 6: CExE COMPONENT TOKENS (Clinical Expression Engine) Specific tokens for calculation/evaluation UI components. ====================================================================== */ --dr-cexe-eval-badge-bg: var(--dr-grain); /* Fragment card evaluation badge background */ --dr-cexe-eval-badge-border: var(--dr-crater); /* Evaluation badge border */ --dr-cexe-answer-text: var(--dr-crema); /* Right-column answer text */ --dr-cexe-answer-highlight: var(--dr-amber); /* Emphasized computed result */ --dr-cexe-scope-indicator: var(--dr-asparagus); /* Variable scope indicator (patient/encounter/global) */ --dr-cexe-whatif-highlight: var(--dr-amber-subtle); /* What-if scenario mode row highlight */ --dr-cexe-whatif-border: var(--dr-amber-dim); /* What-if mode active border */ --dr-cexe-provenance-hover: var(--dr-grain-hover); /* Formula provenance tooltip background */ --dr-cexe-provenance-border: var(--dr-crater-lt); /* Formula provenance hover border */ --dr-cexe-running-total: var(--dr-gold); /* Running total accumulator display */ --dr-cexe-running-total-bg: var(--dr-gold-ghost); /* Running total background fill */ --dr-cexe-abx-badge: var(--dr-amber-hot); /* Antibiotic day counter badge */ --dr-cexe-abx-badge-bg: var(--dr-amber-hot-subtle); /* Antibiotic counter badge bg */ --dr-cexe-expr-detect: var(--dr-teal-subtle); /* Expression detection inline highlight */ --dr-cexe-expr-detect-border: var(--dr-teal-dim); /* Detected expression border */ /* ====================================================================== SECTION 7: SPACING & GEOMETRY ====================================================================== */ --dr-space-xs: 4px; --dr-space-sm: 8px; --dr-space-md: 12px; --dr-space-lg: 16px; --dr-space-xl: 24px; --dr-space-2xl: 32px; --dr-space-3xl: 48px; --dr-radius-none: 0; --dr-radius-sm: 4px; --dr-radius-md: 8px; --dr-radius-lg: 12px; --dr-radius-xl: 16px; --dr-radius-2xl: 24px; /* Geo-stripe dimensions */ --dr-stripe-height: 2px; --dr-stripe-opacity: 0.5; /* ====================================================================== SECTION 8: ANIMATION TIMING ====================================================================== */ --dr-duration-fast: 150ms; --dr-duration-normal: 300ms; --dr-duration-theatrical: 500ms; --dr-duration-entrance: 600ms; --dr-easing: cubic-bezier(0.4, 0, 0.2, 1); --dr-easing-dramatic: cubic-bezier(0.22, 1, 0.36, 1); --dr-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ====================================================================== SECTION 9: TEXTURE Fractal noise grain overlay — subtle film grain for organic feel. ====================================================================== */ --dr-grain-texture: 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"); } /* ========================================================================== SECTION 10: ANIMATION KEYFRAMES From the HTML master spec. Available globally when dark-roast theme loads. ========================================================================== */ @keyframes dr-pulse-teal { 0% { box-shadow: 0 0 0 0 rgba(76, 196, 180, 0.6); } 70% { box-shadow: 0 0 0 12px rgba(76, 196, 180, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 196, 180, 0); } } @keyframes dr-fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes dr-slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes dr-glow { 0%, 100% { box-shadow: 0 0 8px rgba(230, 154, 76, 0.2); } 50% { box-shadow: 0 0 20px rgba(230, 154, 76, 0.4); } } @keyframes dr-grain-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2px, -2px); } } /* ========================================================================== SECTION 11: UTILITY CLASSES Scoped to [data-theme="dark-roast"] for safe parallel use with terminal. ========================================================================== */ /* Glass morphism panel — the standard Dark Roast card surface */ [data-theme="dark-roast"] .dr-glass-panel { background: var(--dr-glass-gradient); border: 1px solid var(--dr-crater); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); border-radius: var(--dr-radius-lg); } /* Geological sediment stripe — thin warm gradient at card bottom */ [data-theme="dark-roast"] .dr-geo-stripe { position: relative; } [data-theme="dark-roast"] .dr-geo-stripe::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: var(--dr-stripe-height); background: linear-gradient(90deg, var(--dr-crater), var(--dr-crater-lt), transparent); opacity: var(--dr-stripe-opacity); border-radius: 0 0 var(--dr-radius-lg) var(--dr-radius-lg); } /* Severity badge classes — inline pill/chip for clinical states */ [data-theme="dark-roast"] .dr-severity-critical { color: var(--dr-severity-critical); background: var(--dr-severity-critical-bg); box-shadow: var(--dr-glow-severity-critical); } [data-theme="dark-roast"] .dr-severity-worsening { color: var(--dr-severity-worsening); background: var(--dr-severity-worsening-bg); box-shadow: var(--dr-glow-severity-worsening); } [data-theme="dark-roast"] .dr-severity-improving { color: var(--dr-severity-improving); background: var(--dr-severity-improving-bg); box-shadow: var(--dr-glow-severity-improving); } [data-theme="dark-roast"] .dr-severity-stable { color: var(--dr-severity-stable); background: var(--dr-severity-stable-bg); box-shadow: var(--dr-glow-severity-stable); } [data-theme="dark-roast"] .dr-severity-resolved { color: var(--dr-severity-resolved); background: var(--dr-severity-resolved-bg); box-shadow: var(--dr-glow-severity-resolved); } /* Live data pulsing indicator */ [data-theme="dark-roast"] .dr-pulse-teal { animation: dr-pulse-teal 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } /* Fractal noise grain overlay — fixed fullscreen with drift animation */ [data-theme="dark-roast"] .dr-grain-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; mix-blend-mode: overlay; background-image: var(--dr-grain-texture); animation: dr-grain-drift 8s ease-in-out infinite; } /* Fade-up entrance utility */ [data-theme="dark-roast"] .dr-fade-up { animation: dr-fadeUp 0.7s ease-out both; } /* Slide-in entrance utility */ [data-theme="dark-roast"] .dr-slide-in { animation: dr-slideIn 0.5s ease-out both; } /* Amber glow breathing animation */ [data-theme="dark-roast"] .dr-glow-breathe { animation: dr-glow 3s ease-in-out infinite; } /* ========================================================================== SECTION 12: BASE STYLES Body-level defaults when dark-roast theme is active. ========================================================================== */ body[data-theme="dark-roast"] { background-color: var(--dr-void); color: var(--dr-crema); font-family: var(--dr-font-body); font-size: var(--dr-text-base); line-height: 1.6; margin: 0; padding: 0; } body[data-theme="dark-roast"] ::selection { background: rgba(76, 196, 180, 0.35); color: var(--dr-crema); } body[data-theme="dark-roast"] ::-moz-selection { background: rgba(76, 196, 180, 0.35); color: var(--dr-crema); } /* Scrollbars — standard properties for Firefox/modern Chrome, WebKit for Safari */ body[data-theme="dark-roast"] { scrollbar-color: var(--dr-crater) var(--dr-void); scrollbar-width: thin; } body[data-theme="dark-roast"] ::-webkit-scrollbar { width: 5px; height: 5px; } body[data-theme="dark-roast"] ::-webkit-scrollbar-track { background: var(--dr-void); } body[data-theme="dark-roast"] ::-webkit-scrollbar-thumb { background: var(--dr-crater); border-radius: 3px; } body[data-theme="dark-roast"] ::-webkit-scrollbar-thumb:hover { background: var(--dr-amber); } /* Focus ring */ body[data-theme="dark-roast"] *:focus-visible { outline: 2px solid var(--dr-teal); outline-offset: 2px; } /* Accessibility: respect reduced motion */ @media (prefers-reduced-motion: reduce) { body[data-theme="dark-roast"] { animation: none; } body[data-theme="dark-roast"] .dr-pulse-teal, body[data-theme="dark-roast"] .dr-fade-up, body[data-theme="dark-roast"] .dr-slide-in, body[data-theme="dark-roast"] .dr-glow-breathe, body[data-theme="dark-roast"] .dr-grain-overlay { animation: none; } } /* Accessibility: high contrast disables decorative shadows for clinical readability */ @media (prefers-contrast: more) { body[data-theme="dark-roast"] { text-shadow: none !important; } } /* ========================================================================== SECTION 13: MIGRATION BRIDGE — terminal-core.css → dark-roast-tokens.css This section documents how --dr-* tokens map to existing --term-* tokens for incremental migration. Components can be migrated one at a time by switching from --term-* to --dr-* references. TERMINAL (Phosphor Theatre) DARK ROAST (Black Label) ───────────────────────────── ───────────────────────── --term-bg-void: #0C0B0A → --dr-void: #120C06 --term-bg-surface: #13120F → --dr-obsidian: #160E08 --term-bg-elevated: #1B1A16 → --dr-grain: #2A1C13 --term-bg-header: #0E0D0B → --dr-void: #120C06 --term-bg-input: #17160F → --dr-obsidian: #160E08 --term-fg-primary: #E8E4DC → --dr-crema: #FFF7EE (warmer, higher contrast) --term-fg-secondary: #A09888 → --dr-mocha: #9B8868 (hardened: 5.66 CR vs void) --term-fg-muted: #8A8278 → --dr-asparagus: #6E8068 (hardened: 4.58 CR vs void) --term-fg-inverse: #0C0B0A → --dr-void: #120C06 --term-border-subtle: #1E1C18 → --dr-crater: #5A453A (hardened: 2.35 CR vs void) --term-border-default:#2A2720 → --dr-crater: #5A453A --term-border-strong: #3A3630 → --dr-crater-lt: #6B564A (hardened: 2.85 CR vs void) --term-accent: #00FFD0 → --dr-teal: #4CC4B4 (less saturated, easier on eyes) or --dr-amber: #E69A4C (for primary accent, not live data) --term-gold: #D4A857 → --dr-gold: #DAA520 (slightly more saturated) --term-severity-critical: #EF4444 → --dr-severity-critical: #CF5858 (hardened: 4.80 CR vs void) --term-severity-worsening: #FFAA00 → --dr-severity-worsening: #D2691E (warm orange, not yellow) --term-severity-stable: #00FFD0 → --dr-severity-stable: #DAA520 (gold, not teal) --term-severity-improving: #4488FF → --dr-severity-improving: #E69A4C (amber, not blue) --dr-severity-resolved: #4CC4B4 (new: teal replaces blue) --term-glow-accent → --dr-glow-teal (same role, warmer teal) --term-glow-gold → --dr-glow-amber (amber is the new gold accent) --term-glow-error → --dr-glow-scarlet (scarlet replaces red) --term-font-mono → --dr-font-mono (Fira Code replaces JetBrains Mono) --term-font-display → --dr-font-display (Playfair Display replaces Outfit) --term-font-body → --dr-font-body (DM Sans — same family, both kept it) (no equivalent) → --dr-font-heading (Instrument Sans — new tier) MIGRATION STRATEGY (ORGANIC — 2026-02-25): The terminal theme (--term-*) is NOT being abandoned. It remains the production baseline for all existing surfaces. Dark Roast (--dr-*) is adopted organically: new components and high-value UX reworks use --dr-* tokens from day one via :root fallback blocks (beachhead pattern). Beachhead pattern (current approach): 1. New CSS files define needed --dr-* tokens in a plain :root {} block 2. This works without data-theme="dark-roast" being set globally 3. When a component's parent surface migrates, delete the :root block — tokens will come from this file's [data-theme="dark-roast"] selector 4. Terminal-themed surfaces that get a meaningful UX rework are the natural moment to adopt --dr-* tokens — not before Components using Dark Roast beachhead: - problem-card-evolution.css (Phase 3 fragment evolution, 2026-02-25) Full switchover (future): 1. Load dark-roast-tokens.css alongside terminal-core.css 2. Migrate surfaces one at a time as they receive UX reworks 3. Reference terminal-core.css patterns for enhancements to existing surfaces 4. Remove terminal-core.css references only after ALL surfaces are migrated ========================================================================== */