/* ============================================================ csys-theme.css — the clinical-system blue theme for the CLINICAL routes (Clinical System, patient records, work queues and every lab). Toggled by js/csys-theme.js, which adds `csys-theme` to on those routes only — the marketing/learning pages keep the brand look. It works by re-pointing the app's existing design tokens toward the clinical palette (less white, more blue), so shared components — cards, buttons, links, toolbars, tables — all re-tint together, plus a few targeted touches for the frame. ============================================================ */ body.csys-theme { /* accent: bright VP blue -> DEEPER VP blue, so "inside the system" reads as a mode change but stays in the Virtual Pharmacist brand-blue family. */ --teal: #046bd2; /* deeper VP blue */ --teal-600: #045cb4; /* darkest VP blue — links/hover (WCAG AA on white) */ --teal-50: #e7f5ff; /* pale VP blue tint */ /* neutrals: less white, bluer greys */ --bg: #e6edf6; /* page background */ --card: #f5f9ff; /* cards: a light blue tint, not pure white */ --line: #c5d5e8; /* bluer hairlines */ --ink: #1b2c3f; --ink-soft: #4a6076; /* headings: VP dark blue */ --navy: #223252; --navy-700: #172238; } /* app canvas + cards read blue, not white */ body.csys-theme { background: var(--bg); } body.csys-theme .app { background: var(--bg); } body.csys-theme .card, body.csys-theme .feedback-card, body.csys-theme .cs-patients, body.csys-theme .wl-appts, body.csys-theme .wl-docs, body.csys-theme .record-panel { border-color: var(--line); background: var(--card); box-shadow: 0 1px 3px rgba(17,49,92,.07); } body.csys-theme .card.hover:hover { border-color: var(--teal); } /* a hint of blue on callouts, tables and letter paper (the last white surfaces) */ body.csys-theme .callout { background: #eef4fc; border-color: var(--line); } body.csys-theme .med-table th { background: #dde8f5; color: #1a3f6b; } body.csys-theme .med-table td, body.csys-theme .med-table th { border-color: var(--line); } body.csys-theme .letter-paper { background: #f7fbff; border-color: var(--line); } body.csys-theme .sim-toolbar .section, body.csys-theme .sim-toolbar { color: var(--ink-soft); } /* the top frame turns deep VP blue so you feel "inside the clinical system" */ body.csys-theme .topbar { background: linear-gradient(#046bd2, #045cb4); border-bottom-color: #023a78; } body.csys-theme .brand, body.csys-theme .brand-text, body.csys-theme .brand-text em { color: #eaf2fb; } body.csys-theme .brand-mark { background: #fff; color: #045cb4; } body.csys-theme .mainnav a { color: #d7e6f8; } body.csys-theme .mainnav a:hover { background: rgba(255,255,255,.15); color: #fff; } body.csys-theme .mainnav a.active { background: #fff; color: #045cb4; } body.csys-theme .nav-toggle { color: #fff; } /* breadcrumb + eyebrow pick up the blue accent automatically via --teal-600 */ body.csys-theme .eyebrow { color: var(--teal-600); } /* clinical-system shell: retint the last white surfaces to blue */ body.csys-theme .cs-shell { background: #eef4fc; } body.csys-theme .cs-main { background: transparent; } body.csys-theme .cs-rail { background: #e4edf8; } body.csys-theme .cs-modtile, body.csys-theme .cs-prow, body.csys-theme .cs-worktile { background: var(--card); } body.csys-theme .cs-modtile.big { background: linear-gradient(135deg, #f5f9ff, #dfeaf9); border-color: var(--teal); } body.csys-theme .cs-rail-item:hover { background: #f5f9ff; } /* lab record chrome (results / med review / patient chart) */ body.csys-theme .rec-tabs { background: #dde8f5; } body.csys-theme .rec-tab.on { background: var(--card); border-bottom-color: var(--teal); } body.csys-theme .cs-consult { background: #eef4fc; border-left-color: var(--teal); } /* gentle page-enter tint so switching into a clinical route feels like a mode change */ @media (prefers-reduced-motion: no-preference) { body.csys-theme .app { animation: csysFade .18s ease both; } @keyframes csysFade { from { opacity: .6; } to { opacity: 1; } } }