/* ClinicalCompass — design tokens (CSS custom properties). Light: dulled-white neutral. Dark: graphite (not black). Accent: RegCompass turquoise, lightened in dark mode. Family-consistent with RegCompass / CyberCompass / eIFUCompass. */ :root{ --teal:#0d7377; --teal-dark:#0a5b5e; --teal-light:#14a4a9; --bg:#f2f2f0; --panel:#fafaf8; --border:#dcdcd8; --text:#28282a; --text-muted:#6b6b6a; --green:#1b8a5a; --green-bg:#e7f6ee; --amber:#b8790a; --amber-bg:#fdf3e0; --red:#c22e2e; --red-bg:#fdeaea; --radius:10px; --shadow:0 1px 3px rgba(90,75,20,0.08), 0 1px 2px rgba(90,75,20,0.06); } [data-theme="dark"]{ --bg:#232628; --panel:#2c2f31; --border:#3b3e40; --text:#eef1f1; --text-muted:#9ba1a2; --teal:#1a8f93; --teal-dark:#0d7377; --teal-light:#3bb3b7; --green-bg:#123a29; --amber-bg:#3a2c0f; --red-bg:#3a1414; --shadow:0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3); } /* Smooth cross-fade on theme change — every themed property transitions, not just . */ *{ box-sizing:border-box; transition:background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; } body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); }