/* Modern Anesthesia — brand layer over Basecoat UI.
   Load order: basecoat.min.css  ->  tokens.css  ->  tool.css
   Basecoat ships shadcn's token names in light mode; we override them here so
   every Basecoat component (.btn, .card, .input, .badge, .tabs…) comes out in
   the dark clinical palette with sevoflurane yellow as the primary. */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-700-latin.woff2") format("woff2");
  font-weight: 700 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "B612";
  src: url("../assets/fonts/b612-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "B612";
  src: url("../assets/fonts/b612-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "B612 Mono";
  src: url("../assets/fonts/b612mono-400-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* Basecoat/shadcn tokens, overridden for the clinical dark theme. */
  --background: #0a0d12;
  --foreground: #e8edf4;
  --card: #10151c;
  --card-foreground: #e8edf4;
  --popover: #131a23;
  --popover-foreground: #e8edf4;
  --primary: #f2c40d;              /* sevoflurane yellow — the brand */
  --primary-foreground: #0a0d12;
  --secondary: #161d26;
  --secondary-foreground: #e8edf4;
  --muted: #141a23;
  --muted-foreground: #9fb0c3;
  --accent: #1b2430;
  --accent-foreground: #e8edf4;
  --destructive: #ff5566;
  --destructive-foreground: #0a0d12;
  --success: #3ce07f;
  --border: #1f2733;
  --input: #263041;
  --ring: #f2c40d;
  --radius: 0.5rem;

  /* Vital-sign trace colours. Clinical DATA, never UI chrome — both halves of
     the simulator (monitor and remote) read them from here so they cannot drift. */
  --ecg:   #4fe8c8;   /* ECG trace + HR numeral */
  --pleth: #eef2a8;   /* plethysmograph */
  --art:   #ff6f7e;   /* arterial + BP numerals */
  --co2:   #ffd12e;   /* capnograph + EtCO2 + RR */
  --vital: #ffffff;   /* SpO2 numeral — monitor convention */
  --bis:   #c98bff;   /* depth-of-anaesthesia index */

  --font-display: "Archivo", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "B612", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-data: "B612 Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html { background: var(--background); -webkit-text-size-adjust: 100%; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }

/* Numerals are data: tabular everywhere so columns line up. */
input[type="number"], .val, .formula, .peek, code, kbd {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
::selection { background: var(--primary); color: var(--primary-foreground); }

/* Mobile-first sizing rules that Basecoat leaves to the app. */
input, select, textarea { font-size: 16px; }   /* stops iOS zoom-on-focus */
.btn, button.btn, .chip, .tool-card { min-height: 44px; }