/* ============================================================ TRINITY HOSPITAL OPERATIONS — Design Tokens Shared between clinical/ and platform/ shells ============================================================ */ :root { /* Background scale */ --bg-base: #060e1e; --bg-surface: #0b1829; --bg-card: #0f172a; --bg-input: #0a1628; --bg-hover: rgba(37,99,235,.07); --bg-active: rgba(37,140,255,.14); /* Borders */ --border-faint: rgba(125,211,252,.08); --border-mid: #1e293b; --border-blue: #1e3a5f; --border-accent: #2563eb; /* Text */ --text-primary: #f1f5f9; --text-body: #e2e8f0; --text-muted: #94a3b8; /* Phase 51A Section J — bumped for WCAG AA on --bg-base #060e1e. Was --text-dim #64748b (4.05:1, under AA) / --text-faint #475569 (2.54:1, fail). Now 5.51:1 and 4.94:1; order preserved (faint < dim). */ --text-dim: #7c8aa0; --text-faint: #748296; /* Brand */ --accent: #2563eb; --accent-light: #60a5fa; --accent-pale: #93c5fd; /* Semantic */ --red: #ef4444; --red-bg: #7f1d1d; --red-border: #ef4444; --red-text: #fca5a5; --amber: #f59e0b; --amber-bg: #451a03; --amber-border: #d97706; --amber-text: #fbbf24; --green: #22c55e; --green-bg: #14532d; --green-border: #16a34a; --green-text: #86efac; --orange: #fb923c; --orange-bg: #431407; --orange-border: #ea580c; --purple: #a78bfa; --teal: #0f766e; --blue-muted: #334155; /* Layout */ --sidebar-width: 220px; /* default clinical width; JS overrides per shell */ --header-height: 84px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* v6 — interface / text scale (set by JS via inline style on ) */ --app-text-scale: 1; --app-interface-scale: 1; --root-font-size: 16px; /* Density tokens — JS sets these via inline style; fallback values here */ --row-h: 44px; /* table row height */ --cell-pad-y: 10px; --cell-pad-x: 13px; --gap: 12px; --card-pad: 16px; --table-row-padding: 10px; --table-cell-pad-x: 13px; --card-padding: 16px; --control-height: 34px; --si-pad-y: 11px; --si-pad-x: 12px; --si-gap: 12px; --si-icon: 18px; --si-label: 14px; /* Type scale */ --font-base: 14px; --font-table: 13px; --font-pill: 11.5px; --font-sub: 12px; --font-small: 11.5px; --font-large: 16px; /* v6 — card-contrast tokens (JS sets per-prefs) */ --card-contrast-bg: rgba(255,255,255,.04); --card-contrast-border: rgba(125,211,252,.10); --card-contrast-shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.45); /* Shadows */ --shadow-pop: 0 8px 32px rgba(0,0,0,.6); --shadow-modal: 0 16px 48px rgba(0,0,0,.7); /* Typography */ --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'SF Mono', 'Fira Code', monospace; } /* Root font-size honors --root-font-size set by JS so rem-anchored children scale via text+interface scale prefs. */ html { font-size: var(--root-font-size, 16px); } /* ──────────────────────────────────────────────────────────── DENSITY VARIANTS — applied to shared-state.js toggles these classes via applyPrefs(). ──────────────────────────────────────────────────────────── */ html.density-compact { --row-h: 26px; --cell-pad-y: 5px; --cell-pad-x: 10px; --gap: 7px; --card-pad: 10px; --si-pad-y: 6px; --si-pad-x: 10px; --si-gap: 8px; --si-icon: 14px; --si-label: 11.5px; } html.density-standard { /* uses :root defaults */ } html.density-comfortable { --row-h: 38px; --cell-pad-y: 12px; --cell-pad-x: 14px; --gap: 14px; --card-pad: 18px; --si-pad-y: 12px; --si-pad-x: 14px; --si-gap: 12px; --si-icon: 18px; --si-label: 13.5px; } /* ──────────────────────────────────────────────────────────── TEXT-SIZE VARIANTS — applied to ──────────────────────────────────────────────────────────── */ html.text-small { --font-base: 12px; --font-table: 11px; --font-pill: 9.5px; --font-sub: 10px; --si-label: 11.5px; } html.text-standard { /* uses :root defaults */ } html.text-large { --font-base: 15px; --font-table: 13.5px; --font-pill: 12px; --font-sub: 12.5px; --si-label: 14px; } html, body { font-size: var(--font-base); } table th, table td { font-size: var(--font-table); } /* ──────────────────────────────────────────────────────────── LIGHT THEME — html.theme-light overrides the dark defaults. Spec says "readable even if not perfect"; this flips the chrome (bg, surfaces, borders, text scale) cleanly. Inline styles in the shells retain their dark colors — acceptable. ──────────────────────────────────────────────────────────── */ html.theme-light { /* ── Surface scale ── tinted blues, not flat white */ --bg-base: #eef2f8; /* page bg — soft off-white with cool tint */ --bg-surface: #f5f8fc; /* sidebar / chrome */ --bg-card: #ffffff; /* cards, modals, popovers */ --bg-input: #ffffff; --bg-hover: rgba(37,99,235,.06); --bg-active: rgba(37,99,235,.12); /* ── Borders ── strong enough to define cards, soft enough to feel premium */ --border-faint: rgba(15,23,42,.06); --border-mid: #cbd5e1; --border-blue: #93b4dc; --border-accent: #1d4ed8; /* ── Text ── ramped for AA contrast on the surface tiers above */ --text-primary: #0f172a; /* h1/h2 / page titles */ --text-body: #1e293b; /* default body / table cells */ --text-muted: #475569; /* subtitles, secondary */ --text-dim: #475569; /* Phase 51B: WCAG-AA on light(#eef2f8) + emerald(#d7e7e0) — was #64748b (4.24, fail) */ --text-faint: #566173; /* Phase 51B: AA on light(5.57) + emerald(4.89) — was #94a3b8 (2.28, fail) */ /* ── Brand ── deeper blues that survive on white */ --accent: #1d4ed8; --accent-light: #2563eb; --accent-pale: #1e40af; /* ── Shadows ── soft, premium-feeling */ --shadow-pop: 0 6px 20px rgba(15,23,42,.10), 0 1px 3px rgba(15,23,42,.06); --shadow-modal: 0 18px 50px rgba(15,23,42,.20), 0 2px 6px rgba(15,23,42,.08); } /* ──────────────────────────────────────────────────────────── LIGHT MODE — COMPREHENSIVE REFINEMENT (v4) The shells contain hundreds of inline styles like style="color:#cbd5e1" / "color:#64748b" / "background:#0a1628" that override our CSS-variable theming. Without remapping these, light mode looks washed-out: muted labels go invisible on white, blue links wash out, card chrome stays dark. Rather than rewrite every render function, we target the most common inline color signatures with attribute-selector overrides under html.theme-light only. Dark mode is unaffected. ──────────────────────────────────────────────────────────── */ /* ── Body / chrome / scrollbar ── */ html.theme-light body { background:var(--bg-base); color:var(--text-body); } html.theme-light ::-webkit-scrollbar-thumb { background:#cbd5e1; } html.theme-light ::-webkit-scrollbar-thumb:hover { background:#94a3b8; } /* ── Inline-color remaps (the heavy lifters) ── */ /* Dark text-dim (#64748b) → keep dim but readable on white */ html.theme-light [style*="color:#64748b"] { color:#475569 !important; } /* Dark text-muted (#94a3b8) → step up to slate-500 */ html.theme-light [style*="color:#94a3b8"] { color:#64748b !important; } /* Dark text-body (#cbd5e1) → slate-800 */ html.theme-light [style*="color:#cbd5e1"] { color:#1e293b !important; } /* Dark text-body (#e2e8f0) → slate-900 */ html.theme-light [style*="color:#e2e8f0"] { color:#0f172a !important; } /* Dark text-faint (#475569) → slate-500 */ html.theme-light [style*="color:#475569"] { color:#64748b !important; } html.theme-light [style*="color:#f1f5f9"] { color:#0f172a !important; } /* Placeholder dark gray → slate-400 */ html.theme-light [style*="color:#334155"] { color:#94a3b8 !important; } /* Light-blue link/accent (#60a5fa) → blue-600 (carries on white) */ html.theme-light [style*="color:#60a5fa"] { color:#1d4ed8 !important; } /* Pale tint (#7dd3fc / #e0f2fe) → blue-700 */ html.theme-light [style*="color:#7dd3fc"] { color:#1e40af !important; } html.theme-light [style*="color:#e0f2fe"] { color:#1e40af !important; } /* Brighter blue stays mostly readable but a touch darker on white */ html.theme-light [style*="color:#0ea5e9"] { color:#0369a1 !important; } /* Status-color text — make sure they remain distinct on white */ html.theme-light [style*="color:#86efac"] { color:#15803d !important; } html.theme-light [style*="color:#22c55e"] { color:#15803d !important; } html.theme-light [style*="color:#fbbf24"] { color:#b45309 !important; } html.theme-light [style*="color:#fca5a5"] { color:#b91c1c !important; } html.theme-light [style*="color:#fb923c"] { color:#c2410c !important; } /* Phase 64.3 — authenticated WCAG sweep findings (clinical impact card). These accent hexes are used as 22px metric values / pill text directly on the white card surface, where the dark-mode hue fails AA in light/emerald. Darkened to their 700-shade so they clear 4.5:1 on white; dark theme is untouched (theme-light only), emerald inherits these via theme-light. */ html.theme-light [style*="color:#f59e0b"] { color:#b45309 !important; } /* amber -> amber-700 (was 2.15:1) */ html.theme-light [style*="color:#a78bfa"] { color:#6d28d9 !important; } /* violet -> violet-700 (was 2.72:1) */ /* Teal ext-links (.ext-link uses --accent-light #14b8a6) read at ~2.3:1 on the light/slate surface; emerald already had .ext-link.u-clk — give light the same teal-700 so both match. */ html.theme-light .ext-link { color:#0f766e !important; } /* Phase 51C — tokens that slipped through and rendered light-on-white in the case-reasoning / actionability panels ("Why This Case Exists" + "Clinical Reasoning"). These were the faint amber rationale, the bold rule IDs / SLA dates / context keys (.u-c* helper classes), and the dark snapshot/policy pill backgrounds. */ /* Amber accents — severity rationale, severity reason, trigger summary */ html.theme-light [style*="color:#fcd34d"] { color:#b45309 !important; } /* Indigo accent — policy_re_evaluation snapshot reason */ html.theme-light [style*="color:#a5b4fc"] { color:#4338ca !important; } /* Dark pill backgrounds inside reasoning cards → light amber / green */ html.theme-light [style*="background:#451a03"] { background:#fef3c7 !important; } html.theme-light [style*="background:#022c22"] { background:#dcfce7 !important; } /* Phase 64.3 — the "LIVE" pill (color:#22c55e on background:#052e16). The text is darkened to green-700 by the #22c55e remap above, but its dark-green pill bg was never remapped, leaving green-on-dark-green (2.97:1) in light/emerald. Lift the pill to light-green so the darkened text clears AA. */ html.theme-light [style*="background:#052e16"] { background:#dcfce7 !important; } /* The .u-c1..4 helper classes (ui-system.css) are hardcoded for dark mode and carry !important, so the attribute remaps above cannot reach them. Re-point them to readable slate values on white. */ html.theme-light .u-c1 { color:#1e293b !important; } html.theme-light .u-c2 { color:#475569 !important; } html.theme-light .u-c3 { color:#0f172a !important; } html.theme-light .u-c4 { color:#64748b !important; } /* Inline backgrounds that paint dark surfaces — flip to light */ html.theme-light [style*="background:#0a1628"] { background:#f1f5f9 !important; } html.theme-light [style*="background:#0f172a"] { background:#f1f5f9 !important; } html.theme-light [style*="background:#1e293b"] { background:#e2e8f0 !important; } html.theme-light [style*="background:#0d1e38"] { background:#ffffff !important; } html.theme-light [style*="background:#0f1f35"] { background:#f1f5f9 !important; } html.theme-light [style*="background:#091324"] { background:#eef2f8 !important; } html.theme-light [style*="background:#1e3a5f"] { background:#dbeafe !important; } html.theme-light [style*="background:#374151"] { background:#cbd5e1 !important; } /* Phase 51B — dark inline backgrounds that were NEVER remapped, so controls went dark-on-dark (invisible) in light + emerald. #0b1220 alone = 44 uses (e.g. the escalation Sort presets). Applies to emerald too (co-applied theme-light). */ html.theme-light [style*="background:#0b1220"] { background:#f1f5f9 !important; } html.theme-light [style*="background:#0d1424"] { background:#f1f5f9 !important; } html.theme-light [style*="background:#0a1428"] { background:#f1f5f9 !important; } html.theme-light [style*="background:#020617"] { background:#eef2f8 !important; } html.theme-light [style*="background:#0d1b30"] { background:#ffffff !important; } html.theme-light [style*="background:#3f3f46"] { background:#e2e8f0 !important; } html.theme-light [style*="background:#0e2138"] { background:#dbeafe !important; } /* Border colors used inline */ html.theme-light [style*="border:1px solid #1e3a5f"] { border-color:#cbd5e1 !important; } html.theme-light [style*="border:1px solid #1a304f"] { border-color:#cbd5e1 !important; } html.theme-light [style*="border:1px solid #1e293b"] { border-color:#cbd5e1 !important; } html.theme-light [style*="border:1px solid #334155"] { border-color:#cbd5e1 !important; } html.theme-light [style*="border-bottom:1px solid #0a1628"]{ border-bottom-color:#e2e8f0 !important; } /* ── Cards / panels ── give them definition on the soft bg */ html.theme-light .card, html.theme-light .status-panel, html.theme-light .card-btn, html.theme-light .metric-card, html.theme-light .page > div[style*="background:var(--bg-card)"] { background:var(--bg-card) !important; border:1px solid var(--border-mid) !important; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.04); } html.theme-light .card-btn:hover { box-shadow:0 2px 4px rgba(15,23,42,.06), 0 4px 12px rgba(29,78,216,.10); border-color:var(--border-blue) !important; } /* ── Sidebar ── distinct surface, strong active state ── */ html.theme-light #sidebar { background:#e8effb !important; border-right:1px solid #cbd5e1 !important; } html.theme-light .si { color:var(--text-body); } html.theme-light .si .si-lbl { color:#334155; } html.theme-light .si:hover { background:rgba(37,99,235,.08); } html.theme-light .si:hover .si-lbl { color:var(--text-primary); } html.theme-light .si.on { background:#dbeafe !important; border-left-color:var(--accent) !important; } html.theme-light .si.on .si-lbl { color:var(--accent) !important; font-weight:600; } html.theme-light .si.on svg { color:var(--accent) !important; stroke:currentColor !important; } /* NOTE: do NOT set stroke here — SVGs use stroke="currentColor" so the per-icon `color:` rules in the COLORFUL SIDEBAR ICONS block (below) can paint each nav icon its own brand hue in light mode too. */ html.theme-light .si-section { color:#475569 !important; font-weight:700; } html.theme-light .si-badge { background:var(--red); color:#fff; } /* ── Header ── light chrome ── */ html.theme-light #app-header, html.theme-light .hdr, html.theme-light header { background:#ffffff !important; border-bottom:1px solid #cbd5e1 !important; color:var(--text-body); } html.theme-light .hdr-icon svg, html.theme-light .hdr svg { stroke:#475569; } html.theme-light .hdr-icon:hover svg { stroke:var(--accent); } html.theme-light .hdr-search { background:#f1f5f9 !important; border-color:#cbd5e1 !important; } html.theme-light .hdr-search input { color:var(--text-body); } html.theme-light .hdr-search input::placeholder { color:#94a3b8; } html.theme-light .hdr-kbd { background:#e2e8f0; color:#475569; border-color:#cbd5e1; } /* ── Tables ── headers darker, rows readable, borders subtle ── */ html.theme-light .tbl-wrap { border-color:var(--border-mid); border-radius:var(--radius-md); overflow:hidden; } html.theme-light .tbl-wrap table { background:#ffffff; } html.theme-light .tbl-wrap table th { background:#eef2f8 !important; color:#334155 !important; font-weight:600; border-bottom:1px solid #cbd5e1 !important; } html.theme-light .tbl-wrap table th.sortable:hover { background:#dbeafe !important; color:var(--accent) !important; } html.theme-light .tbl-wrap table td { color:var(--text-body); border-bottom:1px solid #e2e8f0 !important; } html.theme-light .tbl-wrap table tr:hover td { background:rgba(37,99,235,.04) !important; } html.theme-light .tr-click:hover { cursor:pointer; } /* ── Info-card tables (tables inside .card, not .tbl-wrap) ── Bare label/value pairs on the case-detail page etc. Goal: readable, lightly tinted, no heavy horizontal rules. */ html.theme-light .card > table { background:transparent; } html.theme-light .card > table td { border:0 !important; padding:6px 0 !important; } html.theme-light .card > table tr { border:0 !important; } html.theme-light .card > table tr + tr td { border-top:1px dashed #eef2f8 !important; } html.theme-light .card > table tr:hover td { background:rgba(37,99,235,.035); } html.theme-light .card > table td:first-child { color:#475569 !important; font-weight:500; letter-spacing:.1px; } html.theme-light .card > table td:first-child::before { content:''; display:inline-block; width:3px; height:10px; vertical-align:-1px; margin-right:8px; border-radius:2px; background:linear-gradient(180deg,#60a5fa,#2563eb); opacity:.55; } /* ── Filter / search bar ── */ html.theme-light .tc-bar { background:#f8fafc !important; border-bottom:1px solid #cbd5e1; } html.theme-light .tc-search { background:#ffffff !important; border:1px solid #cbd5e1 !important; } html.theme-light .tc-search input { color:var(--text-body); } html.theme-light .tc-search input::placeholder { color:#94a3b8; } html.theme-light .tc-btn { background:#ffffff !important; color:var(--text-body) !important; border:1px solid #cbd5e1 !important; } html.theme-light .tc-btn:hover { background:#f1f5f9 !important; border-color:var(--accent) !important; color:var(--accent) !important; } html.theme-light select.tc-btn option { background:#ffffff; color:var(--text-body); } /* ── Chips ── */ html.theme-light .chip-bar { background:#f8fafc !important; border-bottom:1px solid #cbd5e1; } html.theme-light .chip { background:#dbeafe; color:#1d4ed8; } html.theme-light .chip-x { color:#1d4ed8; } html.theme-light .clear-chips { color:#dc2626; } html.theme-light .empty-state { color:#64748b; } /* ── Forms ── */ html.theme-light input, html.theme-light textarea, html.theme-light select { background:#ffffff !important; color:var(--text-body) !important; border:1px solid #cbd5e1; } html.theme-light input::placeholder, html.theme-light textarea::placeholder { color:#94a3b8 !important; } html.theme-light .form-input { background:#ffffff !important; color:var(--text-body) !important; } /* ── Buttons ── */ html.theme-light .btn { color:#0f172a; } html.theme-light .btn-cancel { background:#ffffff !important; color:#334155 !important; border:1px solid #cbd5e1 !important; } html.theme-light .btn-cancel:hover { background:#f1f5f9 !important; } html.theme-light .btn-ghost { background:transparent !important; color:#475569 !important; border:1px solid #cbd5e1 !important; } html.theme-light .btn-ghost:hover { background:#f1f5f9 !important; } html.theme-light .btn-primary { background:var(--accent) !important; color:#fff !important; border:1px solid var(--accent) !important; } html.theme-light .btn-primary:hover { background:#1e40af !important; } html.theme-light .btn-success { background:#15803d !important; color:#fff !important; border:1px solid #15803d !important; } html.theme-light .btn-danger { background:#dc2626 !important; color:#fff !important; border:1px solid #dc2626 !important; } /* ── Pills (status indicators) — keep distinct on white ── */ /* Base .pill / .role-chip hardcode a dark slate bg (#1e293b) + slate text in the shell