/* Patient Convert AI v4 design tokens — extracted verbatim from * docs/design/patient-convert-v4/reference/patient-convert-ai-v4.dc.html (2026-07-16). * Phase 0 scaffold: NOT yet linked by any template. Templates adopt it during the * app-shell migration (docs/design/patient-convert-v4/PLAN.md, Phase 1). * * Contract: themes flip via data-theme on ; accents via data-accent. * Tailwind bridges these as var-backed colors (see PLAN.md Phase 0.3). */ [data-theme="light"] { --bg: #F9F9F9; --surface: #FFFFFF; --surface-2: #ECECEC; --line: rgba(13, 13, 13, 0.10); --line-soft: rgba(13, 13, 13, 0.06); --hover: rgba(13, 13, 13, 0.07); --text: #0D0D0D; --text-2: #5D5D5D; --text-3: #8F8F8F; --ink: #0D0D0D; --ink-text: #F9F9F9; --good: #10A37F; --good-bg: rgba(16, 163, 127, 0.10); --warn: #9A7B1C; --warn-bg: rgba(154, 123, 28, 0.12); /* CONNECTION pill 🟠 oauth_stale — a true orange between warn and bad. */ --stale: #B45309; --stale-bg: rgba(180, 83, 9, 0.11); --bad: #C14A3D; --bad-bg: rgba(193, 74, 61, 0.10); --shadow: 0 1px 2px rgba(13, 13, 13, 0.04); --shadow-sm: 0 1px 1px rgba(13, 13, 13, 0.06); --shadow-pop: 0 12px 32px -12px rgba(13, 13, 13, 0.20), 0 2px 6px rgba(13, 13, 13, 0.06); /* HIPAA seal ink. #0D405F is the supplied logo's own navy (HIPAA_Compliant_Logo.svg, 2026-07-30) and is deliberately a brand constant, not a theme hue — but it is invisible on dark surfaces, so the dark block lifts it rather than recolouring it. */ --hipaa-ink: #0D405F; } [data-theme="dark"] { --bg: #141412; --surface: #1C1C19; --surface-2: #262621; --line: rgba(255, 255, 255, 0.11); --line-soft: rgba(255, 255, 255, 0.065); --hover: rgba(255, 255, 255, 0.09); --text: #EFEDE6; --text-2: #A8A499; --text-3: #6F6C63; --ink: #EFEDE6; --ink-text: #191916; --good: #4CBE8C; --good-bg: rgba(76, 190, 140, 0.12); --warn: #D2A249; --warn-bg: rgba(210, 162, 73, 0.13); --stale: #DE9052; --stale-bg: rgba(222, 144, 82, 0.13); --bad: #E07B6C; --bad-bg: rgba(224, 123, 108, 0.12); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.35); --shadow-pop: 0 16px 40px -14px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4); /* Same seal, lifted to stay legible on #1C1C19 — see the light block. */ --hipaa-ink: #6FB3DF; } /* Each accent carries a full complementing scheme (2026-07-18 color audit): --accent-2 = secondary hue (complement-ish of the accent), --chart-1..8 = the categorical ramp for every chart/donut/avatar surface. JS reads the ramp at render time (cxChartPalette pattern) and every chart page repaints on 'cortex:theme-changed', which setAccent() also dispatches — so switching accent re-skins the data viz live. */ [data-accent="evergreen"] { --accent: #177E54; --accent-rgb: 23 126 84; --accent-2: #B58A2A; --chart-1: #177E54; --chart-2: #2A9D8F; --chart-3: #B58A2A; --chart-4: #4A7CB5; --chart-5: #7A5EA8; --chart-6: #C14A3D; --chart-7: #6E8B3D; --chart-8: #6E5849; } [data-theme="dark"][data-accent="evergreen"] { --accent: #3FB380; --accent-rgb: 63 179 128; --accent-2: #D9B25C; --chart-1: #3FB380; --chart-2: #4FC2B0; --chart-3: #D9B25C; --chart-4: #7BA3D9; --chart-5: #A98FD1; --chart-6: #E07A6A; --chart-7: #9FBF6A; --chart-8: #A08A75; } [data-accent="cobalt"] { --accent: #2B5FD9; --accent-rgb: 43 95 217; --accent-2: #C2703D; --chart-1: #2B5FD9; --chart-2: #4FA3D9; --chart-3: #C2703D; --chart-4: #7A5EA8; --chart-5: #2A9D8F; --chart-6: #C14A3D; --chart-7: #9A7B1C; --chart-8: #64748B; } [data-theme="dark"][data-accent="cobalt"] { --accent: #6E96EF; --accent-rgb: 110 150 239; --accent-2: #E09A6A; --chart-1: #6E96EF; --chart-2: #7CC3ED; --chart-3: #E09A6A; --chart-4: #A98FD1; --chart-5: #4FC2B0; --chart-6: #E07A6A; --chart-7: #C9A94F; --chart-8: #93A3B8; } [data-accent="clay"] { --accent: #B4552D; --accent-rgb: 180 85 45; --accent-2: #2F7E8A; --chart-1: #B4552D; --chart-2: #D9964F; --chart-3: #2F7E8A; --chart-4: #7A5EA8; --chart-5: #3E8760; --chart-6: #9A7B1C; --chart-7: #C14A3D; --chart-8: #6E5849; } [data-theme="dark"][data-accent="clay"] { --accent: #D97D55; --accent-rgb: 217 125 85; --accent-2: #5AAFBB; --chart-1: #D97D55; --chart-2: #E8B071; --chart-3: #5AAFBB; --chart-4: #A98FD1; --chart-5: #6FBF95; --chart-6: #C9A94F; --chart-7: #E07A6A; --chart-8: #A08A75; } /* Motion vocabulary from the design (popovers, drawers, peek/rail widths, LIVE dot). */ @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideIn { from { transform: translateX(102%); } to { transform: translateX(0); } } @keyframes slideOutR { to { transform: translateX(102%); } } @keyframes fadeInBg { from { opacity: 0; } } @keyframes fadeOutBg { to { opacity: 0; } } @keyframes menuIn { from { opacity: 0; transform: translateY(-5px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes menuOut { to { opacity: 0; transform: translateY(-5px) scale(0.98); } } @keyframes menuUpIn { from { opacity: 0; transform: translateY(5px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes menuUpOut { to { opacity: 0; transform: translateY(5px) scale(0.98); } } @keyframes turnOut { 0% { opacity: 0; transform: perspective(1000px) rotateX(-22deg) scaleY(0.8); } 55% { opacity: 1; } 100% { opacity: 1; transform: perspective(1000px) rotateX(0deg) scaleY(1); } } @keyframes turnRow { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } @keyframes peekOut { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } @keyframes peekOpenW { from { width: 0; opacity: 0; } to { width: 296px; opacity: 1; } } @keyframes peekCloseW { from { width: 296px; opacity: 1; } to { width: 0; opacity: 0; } } @keyframes railOpenW { from { width: 0; opacity: 0; } to { width: 252px; opacity: 1; } } @keyframes railCloseW { from { width: 252px; opacity: 1; } to { width: 0; opacity: 0; } } @keyframes railBtnW { from { width: 0; margin-right: -10px; opacity: 0; } to { width: 28px; margin-right: 0; opacity: 1; } } @keyframes winOut { to { opacity: 0; transform: scale(0.94); } } @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.45); } 70% { box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0); } } /* Mobile shell (Patient Convert AI Mobile draft): bottom sheets + typing dots. */ @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes sheetDown { to { transform: translateY(103%); } } @keyframes typingDot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2.5px); } } /* Theme-change cross-fade. appShell.toggleTheme() uses the Document View Transitions API to capture exactly one old root image, atomically flips all theme tokens and chart colors, then fades to exactly one new root image. The MPA shell normally owns named snapshots; suppress those names only for this in-document transition so the entire page shares one timeline. */ html[data-theme-transition="true"] [data-app-sidebar], html[data-theme-transition="true"] [data-vt] { view-transition-name: none !important; } html[data-theme-transition="true"]::view-transition-old(root), html[data-theme-transition="true"]::view-transition-new(root) { animation-duration: .5s; animation-delay: 0s; animation-timing-function: ease; } /* ---- .cx-mtrack — shared mobile filter track (Pulse + Analytics bars, 2026-07-18). Full-width surface-2 well; pills stretch evenly at a 42px touch height. Pills come from each page's pillStyle() (inline), which must NOT set flex — the stretch below would lose to it. ---- */ .cx-mtrack { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 11px; width: 100%; } .cx-mtrack > button { flex: 1 1 auto; min-height: 42px; /* !important beats pillStyle()'s inline 12px / 0 11px — mobile tracks need tighter pills so 5 bold labels (HEALTH incl. "Low conversion" + "Unknown") fit one row on a 390px phone without wrapping. */ font-size: 11.5px !important; padding: 0 7px !important; } /* ---- Sidebar nav notification badge ---- `--accent-rgb` is a SPACE-separated list (`23 126 84`) so the modern `rgb(var(--accent-rgb) / )` form — which is what Tailwind's accent utilities generate — is valid. Never reintroduce the legacy `rgba(var(--accent-rgb), )` spelling: a comma alpha against a space list is invalid CSS, the browser drops the whole declaration, and the element silently loses its colour. This badge shipped once as a bare unstyled number for exactly that reason. */ .cx-nav-badge { flex: none; font-family: 'Spline Sans Mono', ui-monospace, SFMono-Regular, monospace; font-size: 9px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; border-radius: 999px; padding: 3px 6px; background: rgb(var(--accent-rgb) / .16); color: var(--accent); white-space: nowrap; } /* Collapsed rail has no room for a number, so it degrades to a dot. */ .cx-nav-badge-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* ---- Toggle switch ---- Same recipe dashboard.html and settings.html carry inline, promoted here because the sidebar's notification preferences render on EVERY base.html page — the per-page copies would leave the switches unstyled everywhere else. Those two inline copies stay for now so their own widgets keep working if this file is ever loaded late. */ .dh-switch { position: relative; flex: none; width: 34px; height: 20px; -webkit-appearance: none; appearance: none; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; transition: background .15s ease, border-color .15s ease; margin: 0; } .dh-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(13, 13, 13, .25); transition: transform .18s cubic-bezier(.22, 1, .36, 1); } .dh-switch:checked { background: var(--accent); border-color: var(--accent) } .dh-switch:checked::after { transform: translateX(14px) } .dh-switch:disabled { opacity: .45; cursor: default } /* Child rows sit one indent in, so their switch is a size down. */ .dh-switch-sm { width: 28px; height: 17px } .dh-switch-sm::after { width: 11px; height: 11px } .dh-switch-sm:checked::after { transform: translateX(11px) } /* ---- Reduced motion (2026-07-18 accessibility pass) ---- Neutralizes the whole animation catalog (fade/slide/menu/sheet/turn/peek/ rail/win/pulseRing/typingDot) plus transitions to near-instant. 0.01ms (not 0) keeps animationend/"forwards" fills firing so the closing-flag setTimeout choreography in the controllers still unmounts overlays. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }