/* Mango brand tokens, copied from mango-styleguide/css/mango.css so these
   design samples open standalone. Keep in sync until the EHR styleguide
   imports mango.css directly. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --ink:#0A2540;
  --ink-2:#425466;
  --ink-3:#697386;
  --paper:#FFFFFF;
  --paper-2:#FBFAF8;
  --line:#E3E8EE;
  --line-2:#EEF1F5;

  --mango:#EA580C;
  --mango-bright:#F97316;
  --mango-tint:#FFF4E8;
  --mint:#0E9F6E;
  --mint-tint:#E7F7F0;
  --violet:#7C3AED;

  --sunrise:linear-gradient(110deg,#FFC36B 0%,#F97316 38%,#FB6F92 70%,#7C3AED 100%);

  --font-display:'Bricolage Grotesque',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(10,37,64,.05),0 1px 3px rgba(10,37,64,.06);
  --sh-2:0 4px 12px rgba(10,37,64,.06),0 12px 28px rgba(10,37,64,.07);
  --sh-3:0 18px 50px rgba(10,37,64,.12);

  /* clinical status, shared by all three directions */
  --alert:#C8102E;
  --alert-tint:#FDECEE;
  --warn:#B45309;
  --warn-tint:#FEF3C7;
}
*{box-sizing:border-box}
html,body{margin:0}
button,input,select,textarea{font:inherit;color:inherit}