/* ========================================================================== DARK ROAST: BLACK LABEL — DESIGN TOKEN FOUNDATION (Scoped, somaNotes consume) Version: 4.0.0 (with somaNotes production hardening overlay) Source: /root/dark-roast-theme/css/dark-roast-scoped.css Pulled: 2026-04-25 Canonical: github.com/Skidudeaa/dark-roast-theme This file is the somaNotes consumed copy of the canonical Dark Roast scoped variant. It mirrors the upstream verbatim through Section 16 (the migration bridge), then appends a production hardening overlay that preserves somaNotes-specific TN-panel contrast. ── WHY THE HARDENING OVERLAY EXISTS ───────────────────────────────────── v2 (2026-03-11) hardened crater/crater-lt/asparagus hex values for hospital TN-panel visibility (commit notes: "raised for hospital TN-panel visibility", with explicit contrast-ratio gains noted per token). v4 normalized those values back to lower contrast. Adopting v4 verbatim would silently degrade border/text contrast in the production hospital environment — `--dr-crater-lt` would shift from #6B564A to #4D3B31, a 23% luminance drop on TN displays. The overlay at the bottom re-pins the three affected tokens to their v2-hardened values. dr-compat.css already hard-codes the same hex values as --term-*/--sol-* overrides, so this keeps both layers consistent. When the canonical project ships v4-hardened or v5 with TN-panel-aware defaults, drop the overlay block. SCOPED VARIANT — tokens + utilities gated by [data-theme="dark-roast"]. For standalone single-theme apps, use canonical /css/dark-roast.css. v4 migration notes: --dr-grain → --dr-espresso (#2A1C13 unchanged) --dr-grain-hover → --dr-espresso-hover (#382818 unchanged) --dr-crater → --dr-crater-deep (#3C2A21 unchanged) --dr-crater-lt → --dr-crater (#4D3B31 — but somaNotes overrides to #6B564A) New primitives: --dr-dark-cacao, --dr-roasted-bean, --dr-burnt-sienna, --dr-brass Deprecated v3 names are aliased (--dr-grain, --dr-crater-lt) and will be removed in v5. Update consumers to the new names. ========================================================================== */ /* ========================================================================== SECTION 1: SURFACE SCALE (6 steps, monotonic dark → light) void → obsidian → dark-cacao → espresso → roasted-bean → crater ========================================================================== */ :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; --dr-obsidian: #160E08; --dr-dark-cacao: #1E140E; --dr-espresso: #2A1C13; /* was --dr-grain */ --dr-espresso-hover: #382818; /* was --dr-grain-hover */ --dr-roasted-bean: #3C2A1E; --dr-crater: #4D3B31; /* was --dr-crater-lt — overridden below for TN-panel */ /* — Foregrounds — */ --dr-crema: #FFF7EE; --dr-warm-white: #F0E6D0; --dr-bone: #EBE1D7; --dr-mocha: #8B7355; /* — Geological Accent Layer — */ --dr-crater-deep: #3C2A21; /* was --dr-crater */ --dr-asparagus: #465945; /* overridden below for TN-panel */ --dr-rustic: #480404; --dr-rose: #480607; /* — Action & State Tokens (color-name primitives) — */ --dr-amber: #E69A4C; --dr-amber-hot: #D2691E; --dr-amber-muted: #C07A4A; --dr-gold: #DAA520; --dr-brass: #BFA162; --dr-scarlet: #C44C4C; --dr-burnt-sienna: #C75B39; --dr-teal: #4CC4B4; /* — Clinical severity hues (Option C, dark-roast v4.1.0) — worsening/improving/stable off the 3°-gap amber cluster onto distinct hue families so they cannot blend at census scan speed. */ --dr-magenta: #C25F90; /* Worsening severity (hue 333°) */ --dr-harvest: #D4A040; /* Improving severity (hue 39°) */ --dr-olive: #879A39; /* Stable severity (hue 72°) */ /* — Deprecated v3 aliases (removed in v5) — */ --dr-grain: var(--dr-espresso); /* @deprecated v4.0.0 */ --dr-grain-hover: var(--dr-espresso-hover); /* @deprecated v4.0.0 */ --dr-crater-lt: var(--dr-crater); /* @deprecated v4.0.0 */ /* ====================================================================== SECTION 2: SEMANTIC ROLE ALIASES Pointers into color primitives. Prefer these in new code. ====================================================================== */ --dr-accent: var(--dr-amber); --dr-accent-hot: var(--dr-amber-hot); --dr-accent-muted: var(--dr-amber-muted); --dr-success: var(--dr-teal); --dr-warning: var(--dr-brass); --dr-error: var(--dr-burnt-sienna); --dr-critical: var(--dr-scarlet); --dr-stable: var(--dr-gold); --dr-live: var(--dr-teal); --dr-fg-display: var(--dr-crema); --dr-fg-workhorse: var(--dr-bone); --dr-fg-secondary: var(--dr-mocha); --dr-fg-tertiary: var(--dr-asparagus); --dr-fg-body: var(--dr-bone); /* dark-roast-theme@cdf470a role alias */ --dr-fg-muted: var(--dr-mocha); /* recolors per theme via --dr-* remap */ /* ====================================================================== SECTION 3: OPACITY VARIANTS ====================================================================== */ --dr-amber-dim: rgba(230, 154, 76, 0.40); --dr-amber-subtle: rgba(230, 154, 76, 0.10); --dr-amber-ghost: rgba(230, 154, 76, 0.05); --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.05); --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.05); --dr-scarlet-dim: rgba(196, 76, 76, 0.40); --dr-scarlet-subtle: rgba(196, 76, 76, 0.10); --dr-scarlet-ghost: rgba(196, 76, 76, 0.05); --dr-teal-dim: rgba(76, 196, 180, 0.40); --dr-teal-subtle: rgba(76, 196, 180, 0.10); --dr-teal-ghost: rgba(76, 196, 180, 0.05); --dr-brass-dim: rgba(191, 161, 98, 0.40); --dr-brass-subtle: rgba(191, 161, 98, 0.10); --dr-brass-ghost: rgba(191, 161, 98, 0.05); --dr-burnt-sienna-dim: rgba(199, 91, 57, 0.40); --dr-burnt-sienna-subtle: rgba(199, 91, 57, 0.10); --dr-burnt-sienna-ghost: rgba(199, 91, 57, 0.05); --dr-magenta-dim: rgba(194, 95, 144, 0.40); --dr-magenta-subtle: rgba(194, 95, 144, 0.10); --dr-magenta-ghost: rgba(194, 95, 144, 0.05); --dr-harvest-dim: rgba(212, 160, 64, 0.40); --dr-harvest-subtle: rgba(212, 160, 64, 0.10); --dr-harvest-ghost: rgba(212, 160, 64, 0.05); --dr-olive-dim: rgba(135, 154, 57, 0.40); --dr-olive-subtle: rgba(135, 154, 57, 0.10); --dr-olive-ghost: rgba(135, 154, 57, 0.05); --dr-divider: rgba(255, 247, 238, 0.04); /* ====================================================================== SECTION 4: GLOW EFFECTS ====================================================================== */ --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.10); --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.15); --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.12); --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.20); --dr-glow-scarlet: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 8px rgba(196, 76, 76, 0.40), 0 0 16px rgba(196, 76, 76, 0.15); --dr-glow-scarlet-intense: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 14px rgba(196, 76, 76, 0.55), 0 0 28px rgba(196, 76, 76, 0.20); --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.10); --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.15); --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.10); /* Severity glows (Option C) — worsening = magenta urgency profile, improving/stable = calm profile; hardened outer wash for TN panels. */ --dr-glow-magenta: 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); --dr-glow-harvest: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 10px rgba(212, 160, 64, 0.25), 0 0 24px rgba(212, 160, 64, 0.20); --dr-glow-olive: 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); --dr-glow-teal-ghost: 0 0 4px rgba(76, 196, 180, 0.08), 0 0 12px rgba(76, 196, 180, 0.03); --dr-glass-gradient: linear-gradient(145deg, var(--dr-espresso), rgba(60, 42, 33, 0.2)); /* ====================================================================== SECTION 5: ELEVATION ====================================================================== */ --dr-elevation-flat-shadow: none; --dr-elevation-flat-border: 1px solid rgba(255,255,255,0.04); --dr-elevation-raised-shadow: 0 2px 8px rgba(0,0,0,0.4); --dr-elevation-raised-border: 1px solid rgba(255,255,255,0.06); --dr-elevation-floating-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(230,154,76,0.12); --dr-elevation-floating-border: 1px solid rgba(255,255,255,0.08); --dr-elevation-critical-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 24px rgba(196,76,76,0.20); --dr-elevation-critical-border: 1px solid rgba(196,76,76,0.30); --dr-elevation-live-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 16px rgba(76,196,180,0.15); --dr-elevation-live-border: 1px solid rgba(76,196,180,0.20); /* ====================================================================== SECTION 6: TYPOGRAPHY STACK ====================================================================== */ --dr-font-display: 'Playfair Display', Georgia, serif; --dr-font-heading: 'Instrument Sans', -apple-system, sans-serif; --dr-font-body: 'DM Sans', -apple-system, sans-serif; --dr-font-mono: 'Fira Code', 'SF Mono', monospace; --dr-text-xs: 0.625rem; /* 10px */ --dr-text-sm: 0.75rem; /* 12px */ --dr-text-base: 0.875rem; /* 14px */ --dr-text-md: 1rem; /* 16px */ --dr-text-lg: 1.125rem; /* 18px */ --dr-text-xl: 1.375rem; /* 22px */ --dr-text-2xl: 1.75rem; /* 28px */ --dr-text-3xl: 2.25rem; /* 36px */ --dr-text-4xl: 3rem; /* 48px */ --dr-text-5xl: 4rem; /* 64px */ --dr-text-huge: 4.5rem; /* @deprecated v4.0.0 */ --dr-leading-xs: 1.4; --dr-leading-sm: 1.5; --dr-leading-base: 1.6; --dr-leading-md: 1.5; --dr-leading-lg: 1.4; --dr-leading-xl: 1.3; --dr-leading-2xl: 1.2; --dr-leading-3xl: 1.15; --dr-leading-4xl: 1.1; --dr-leading-5xl: 1.0; --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 7: CLINICAL SEVERITY MAPPING ====================================================================== */ --dr-severity-critical: var(--dr-scarlet); --dr-severity-worsening: var(--dr-magenta); /* Option C */ --dr-severity-improving: var(--dr-harvest); /* Option C */ --dr-severity-stable: var(--dr-olive); /* Option C */ --dr-severity-resolved: var(--dr-teal); --dr-glow-severity-critical: var(--dr-glow-scarlet); --dr-glow-severity-worsening: var(--dr-glow-magenta); --dr-glow-severity-improving: var(--dr-glow-harvest); --dr-glow-severity-stable: var(--dr-glow-olive); --dr-glow-severity-resolved: var(--dr-glow-teal); --dr-severity-critical-bg: var(--dr-scarlet-subtle); --dr-severity-worsening-bg: var(--dr-magenta-subtle); --dr-severity-improving-bg: var(--dr-harvest-subtle); --dr-severity-stable-bg: var(--dr-olive-subtle); --dr-severity-resolved-bg: var(--dr-teal-subtle); --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-burnt-sienna); /* ====================================================================== SECTION 8: CExE COMPONENT TOKENS (Clinical Expression Engine) ====================================================================== */ --dr-cexe-eval-badge-bg: var(--dr-espresso); --dr-cexe-eval-badge-border: var(--dr-crater-deep); --dr-cexe-answer-text: var(--dr-crema); --dr-cexe-answer-highlight: var(--dr-amber); --dr-cexe-scope-indicator: var(--dr-asparagus); --dr-cexe-whatif-highlight: var(--dr-amber-subtle); --dr-cexe-whatif-border: var(--dr-amber-dim); --dr-cexe-provenance-hover: var(--dr-espresso-hover); --dr-cexe-provenance-border: var(--dr-crater); --dr-cexe-running-total: var(--dr-gold); --dr-cexe-running-total-bg: var(--dr-gold-ghost); --dr-cexe-abx-badge: var(--dr-amber-hot); --dr-cexe-abx-badge-bg: var(--dr-amber-hot-subtle); --dr-cexe-expr-detect: var(--dr-teal-subtle); --dr-cexe-expr-detect-border: var(--dr-teal-dim); /* ====================================================================== SECTION 9: SPACING & GEOMETRY (4px base unit, expanded scale) ====================================================================== */ --dr-space-0: 0; --dr-space-px: 1px; --dr-space-0-5: 2px; --dr-space-1: 4px; --dr-space-1-5: 6px; --dr-space-2: 8px; --dr-space-3: 12px; --dr-space-4: 16px; --dr-space-5: 20px; --dr-space-6: 24px; --dr-space-8: 32px; --dr-space-10: 40px; --dr-space-12: 48px; --dr-space-16: 64px; --dr-space-20: 80px; --dr-space-24: 96px; --dr-space-xs: var(--dr-space-1); --dr-space-sm: var(--dr-space-2); --dr-space-md: var(--dr-space-3); --dr-space-lg: var(--dr-space-4); --dr-space-xl: var(--dr-space-6); --dr-space-2xl: var(--dr-space-8); --dr-space-3xl: var(--dr-space-12); --dr-radius-none: 0; --dr-radius-xs: 2px; --dr-radius-sm: 4px; --dr-radius-md: 8px; --dr-radius-lg: 12px; --dr-radius-xl: 16px; --dr-radius-2xl: 24px; --dr-radius-full: 9999px; --dr-stripe-height: 2px; --dr-stripe-opacity: 0.5; --dr-icon-xs: 12px; --dr-icon-sm: 14px; --dr-icon-md: 16px; --dr-icon-lg: 20px; --dr-icon-xl: 24px; --dr-icon-2xl: 32px; --dr-icon-3xl: 48px; /* ====================================================================== SECTION 10: MOTION ====================================================================== */ --dr-duration-instant: 0ms; --dr-duration-fast: 120ms; --dr-duration-base: 200ms; --dr-duration-moderate: 320ms; --dr-duration-slow: 480ms; --dr-duration-deliberate: 640ms; --dr-duration-ambient: 1200ms; --dr-duration-normal: 300ms; --dr-duration-theatrical: 500ms; --dr-duration-entrance: 600ms; --dr-easing: cubic-bezier(0.4, 0, 0.2, 1); --dr-easing-linear: linear; --dr-easing-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dr-easing-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --dr-easing-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dr-easing-dramatic: cubic-bezier(0.22, 1, 0.36, 1); --dr-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --dr-easing-spring-snappy:cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ====================================================================== SECTION 11: Z-INDEX SCALE ====================================================================== */ --dr-z-base: 0; --dr-z-raised: 1; --dr-z-sticky: 100; --dr-z-header: 200; --dr-z-dropdown: 300; --dr-z-overlay: 400; --dr-z-modal: 500; --dr-z-popover: 600; --dr-z-toast: 700; --dr-z-tooltip: 800; --dr-z-debug: 9999; /* ====================================================================== SECTION 12: TEXTURE ====================================================================== */ --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 13: ANIMATION KEYFRAMES ========================================================================== */ @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-pulse-scarlet { 0%, 100% { box-shadow: 0 0 0 rgba(196, 76, 76, 0); } 50% { box-shadow: 0 0 16px rgba(196, 76, 76, 0.3); } } @keyframes dr-breathe-amber { 0%, 100% { opacity: 0.6; } 50% { opacity: 1.0; } } @keyframes dr-shimmer-skeleton { 0% { background-position: -200% 0; } 100% { background-position: 200% 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 14: UTILITY CLASSES (scoped) ========================================================================== */ [data-theme="dark-roast"] .dr-glass-panel { background: var(--dr-glass-gradient); border: 1px solid var(--dr-crater-deep); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); border-radius: var(--dr-radius-lg); } [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-deep), var(--dr-crater), transparent); opacity: var(--dr-stripe-opacity); border-radius: 0 0 var(--dr-radius-lg) var(--dr-radius-lg); } [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); } [data-theme="dark-roast"] .dr-pulse-teal { animation: dr-pulse-teal 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } [data-theme="dark-roast"] .dr-pulse-scarlet { animation: dr-pulse-scarlet var(--dr-duration-ambient) var(--dr-easing-ease-in-out) infinite; } [data-theme="dark-roast"] .dr-breathe-amber { animation: dr-breathe-amber var(--dr-duration-ambient) var(--dr-easing-ease-in-out) infinite; } [data-theme="dark-roast"] .dr-grain-overlay { position: fixed; inset: 0; pointer-events: none; z-index: var(--dr-z-debug); opacity: 0.025; mix-blend-mode: overlay; background-image: var(--dr-grain-texture); animation: dr-grain-drift 8s ease-in-out infinite; } [data-theme="dark-roast"] .dr-fade-up { animation: dr-fadeUp 0.7s ease-out both; } [data-theme="dark-roast"] .dr-slide-in { animation: dr-slideIn 0.5s ease-out both; } [data-theme="dark-roast"] .dr-glow-breathe { animation: dr-glow 3s ease-in-out infinite; } /* ========================================================================== SECTION 15: BASE STYLES Body-level defaults when dark-roast theme is active. ========================================================================== */ body[data-theme="dark-roast"] { background-color: var(--dr-void); color: var(--dr-bone); font-family: var(--dr-font-body); font-size: var(--dr-text-base); line-height: var(--dr-leading-base); 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); } body[data-theme="dark-roast"] { scrollbar-color: var(--dr-crater-deep) 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-deep); border-radius: 3px; } body[data-theme="dark-roast"] ::-webkit-scrollbar-thumb:hover { background: var(--dr-amber); } body[data-theme="dark-roast"] *:focus-visible { outline: 2px solid var(--dr-teal); outline-offset: 2px; } @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-pulse-scarlet, body[data-theme="dark-roast"] .dr-breathe-amber, 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; } } @media (prefers-contrast: more) { body[data-theme="dark-roast"] { text-shadow: none !important; --dr-bone: var(--dr-warm-white); --dr-mocha: var(--dr-bone); --dr-asparagus: var(--dr-mocha); --dr-divider: rgba(255, 255, 255, 0.12); } } /* ========================================================================== SECTION 16: 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. Updated for v4.0.0 surface-scale renames. TERMINAL (Phosphor Theatre) DARK ROAST (Black Label v4) ───────────────────────────── ─────────────────────────── --term-bg-void: #0C0B0A → --dr-void: #120C06 --term-bg-surface: #13120F → --dr-obsidian: #160E08 --term-bg-elevated: #1B1A16 → --dr-espresso: #2A1C13 (was --dr-grain) --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: #8B7355 (more coffee-toned) --term-fg-muted: #8A8278 → --dr-asparagus: #6E8068 (somaNotes hardened — see overlay) --term-fg-inverse: #0C0B0A → --dr-void: #120C06 --term-border-subtle: #1E1C18 → --dr-crater-deep: #3C2A21 (was --dr-crater) --term-border-default:#2A2720 → --dr-crater-deep: #3C2A21 --term-border-strong: #3A3630 → --dr-crater: #6B564A (somaNotes hardened — see overlay) --term-border-new: — → --dr-roasted-bean: #3C2A1E (new tier) --term-accent: #00FFD0 → --dr-teal: #4CC4B4 (less saturated, easier on eyes) or --dr-amber: #E69A4C (primary accent, not live data) --term-gold: #D4A857 → --dr-gold: #DAA520 (slightly more saturated) --term-severity-critical: #EF4444 → --dr-severity-critical: #C44C4C --term-severity-worsening: #FFAA00 → --dr-severity-worsening: #C25F90 (Option C: magenta, hue 333°) --term-severity-stable: #00FFD0 → --dr-severity-stable: #879A39 (Option C: olive, hue 72°) --term-severity-improving: #4488FF → --dr-severity-improving: #D4A040 (Option C: harvest, hue 39°) --dr-severity-resolved: #4CC4B4 (teal) --term-glow-accent → --dr-glow-teal --term-glow-gold → --dr-glow-amber --term-glow-error → --dr-glow-scarlet --term-font-mono → --dr-font-mono (Fira Code) --term-font-display → --dr-font-display (Playfair Display) --term-font-body → --dr-font-body (DM Sans) (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). v4 additions also available in beachhead: --dr-brass / --dr-warning (warning semantic) --dr-burnt-sienna / --dr-error (error semantic, ANSI red tone) --dr-amber-muted / --dr-accent-muted (Mystic2-parity reader accent) Elevation tokens (--dr-elevation-*-shadow/border) Z-index scale (--dr-z-*) Icon size scale (--dr-icon-*) Expanded spacing (--dr-space-0 through --dr-space-24) ========================================================================== */ /* ========================================================================== SECTION 17: somaNotes PRODUCTION HARDENING OVERLAY (2026-04-25) ────────────────────────────────────────────────────────────────────────── Re-pin three tokens to v2-hardened hex values for hospital TN-panel visibility. v4 normalized these back to lower-contrast defaults; without this overlay borders become near-invisible on TN displays during clinical use. dr-compat.css already hard-codes the same hex values as --term-*/ --sol-* overrides, so this keeps both layers consistent. Drop this overlay block when canonical Dark Roast ships TN-panel-aware defaults (likely v5 or a hardening profile flag). Provenance: somaNotes v2 (2026-03-11) hardening commit notes — --dr-crater (#5A453A): "raised for hospital TN-panel visibility" contrast 1.43 → 2.35 CR --dr-crater-lt (#6B564A): "raised for hospital TN-panel visibility" contrast 1.84 → 2.85 CR --dr-asparagus (#6E8068): "raised for hospital TN-panel visibility" contrast 2.57 → 4.58 CR ========================================================================== */ :root[data-theme="dark-roast"], body[data-theme="dark-roast"] { /* v2-hardened crater family — preserves visible borders on TN panels. Note: v4 reassigned --dr-crater to a different (darker) value. The override below restores the v2 semantics that production CSS expects. */ --dr-crater: #5A453A; /* v2 hardened — was v4 #4D3B31 */ --dr-crater-lt: #6B564A; /* v2 hardened — was v4 alias to --dr-crater */ --dr-asparagus: #6E8068; /* v2 hardened — was v4 #465945 */ } /* ========================================================================== SECTION 18: somaNotes-LOCAL PRIMITIVE ADDITIONS (2026-05-09) ────────────────────────────────────────────────────────────────────────── Opacity variants of --dr-rose required by the --sn-clinical-severity-critical role family in dark-roast-semantics.css. Canonical Dark Roast v4 ships --dr-rose as a single saturated value (#480607) with no opacity scale. Adding the two missing variants here (somaNotes-local) instead of in Section 3 keeps the canonical-upstream mirror story clean — when canonical ships rose-subtle/ghost in Section 3, this block can be dropped. WHY rose specifically: clinical-severity-critical and workflow-status-error are SEPARATE axes per the design contract. Workflow error uses the --dr-burnt-sienna-* family (full scale already exists). Clinical critical gets its own primitive family so a "system error" badge and a "patient crashing" badge are visually distinguishable. Math: rgba(72, 6, 7, x) where x ∈ {0.10, 0.05} — same scale ratio as every other primitive's -subtle / -ghost variants in Section 3. ========================================================================== */ :root[data-theme="dark-roast"], body[data-theme="dark-roast"] { --dr-rose-subtle: rgba(72, 6, 7, 0.10); --dr-rose-ghost: rgba(72, 6, 7, 0.05); /* Census v2 P0 token seams (2026-08-02) — UNUSED until later census v2 phases land. Values mirror the Black Label reference block in census-handoff/app/css/tokens.css verbatim. No component may consume these yet; P0 is visually inert and rolls back as one revert. */ --dr-inkwash: rgba(255,247,238,.03); --dr-on-teal: #0C0805; --dr-phase-label: #F0E6D0; --dr-worsening-rail: var(--dr-magenta); --dr-worsening-label: #FFB1D6; --dr-critical-rail: var(--dr-scarlet); --dr-critical-label: #FFB5AE; --dr-active-rail: var(--dr-amber); --dr-active-label: #FFC276; --dr-atmosphere-glow-1: rgba(112,89,74,.13); --dr-atmosphere-glow-2: rgba(58,42,32,.10); --dr-atmosphere-grain-opacity: .022; }