/* ==========================================================================
   AHF Clinical Workflow: design tokens

   The greys carry a blue-slate cast rather than sitting on true neutral.
   Perfectly neutral grey almost never appears in a designed interface: a
   palette picks a temperature, and a cool one suits a clinic and lets white
   content sit forward of its own chrome.

   One accent, the teal from the reference product. Status colours are muted
   on purpose, so that red means something when it does appear.
   ========================================================================== */

@font-face {
  font-family: "Plex Sans";
  src: url("fonts/plex-sans-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Plex Mono is used only for code spans on the gaps and flow pages. */
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- ink ---------------------------------------------------------------
     Slate rather than true neutral. Every step down to --ink-500 is solved
     against a contrast target, because all of them carry text a clinician
     has to read: --ink-500 clears 4.6:1 even on the shaded table head.
     --ink-400 is placeholder and disabled text only, --ink-300 is not text.
     ---------------------------------------------------------------------- */
  --ink-900: #283035;
  --ink-800: #374148;
  --ink-700: #495761;
  --ink-600: #596a77;
  --ink-500: #617381;
  --ink-400: #91a0ac;
  --ink-300: #b9c3ca;

  /* --- surfaces --------------------------------------------------------- */
  --paper:     #ffffff;
  --page:      #edf1f3;
  --shade:     #f5f8f9;
  --shade-2:   #e9eef1;
  --line:      #d5dde2;
  --line-soft: #e6ecef;

  /* --- the one accent --------------------------------------------------- */
  --teal-800: #093f4b;
  --teal-700: #0c5261;
  --teal-600: #0f6274;
  --teal-500: #16829a;
  --teal-100: #c9dfe6;
  --teal-050: #eef6f8;

  /* Section bands on the labs screen, taken off the reference photo. */
  --band:      #d5e4ea;
  --band-soft: #e8f0f3;

  /* --- top bar ---------------------------------------------------------- */
  --bar:      #1e2c38;
  --bar-2:    #2c3d4b;
  --bar-line: rgba(255, 255, 255, .13);
  --bar-ink:  #a5b4c0;

  /* --- status, muted so that a warning reads as one --------------------- */
  --ok-700:   #1a6b4a;
  --ok-600:   #1f7d55;
  --warn-700: #855312;
  --warn-600: #9c6417;
  --risk-600: #b83a2c;
  --risk-050: #fbeeeb;

  /* --- inferred marking, the only non-product colour -------------------- */
  --inferred: #92601a;

  /* --- type ------------------------------------------------------------- */
  --font: "Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-micro: 10.5px;
  --t-xs:    11.5px;
  --t-sm:    12px;
  --t-base:  13px;
  --t-md:    14.5px;
  --t-lg:    16px;
  --t-xl:    19px;
  --t-2xl:   23px;

  /* --- space ------------------------------------------------------------ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  /* --- geometry --------------------------------------------------------- */
  --r1: 3px; --r2: 5px; --r3: 7px; --r-pill: 999px;

  /* Depth says how important a surface is, not how new the design is. Only
     surfaces you work in are lifted; supporting ones carry a border alone. */
  --shadow-sm: 0 1px 2px rgba(22, 35, 46, .06);
  --shadow-bar: 0 1px 3px rgba(22, 35, 46, .16);
  --shadow-modal: 0 20px 52px -14px rgba(22, 35, 46, .34), 0 4px 12px rgba(22, 35, 46, .10);

  --bar-h:    46px;
  --proto-h:  32px;
  --content:  1500px;   /* every full-width strip lines up on this */
}