/* ============================================================================
   Foundation: design tokens, reset, typography, focus, motion, utilities.
   Frame/primary tokens are *area-variable*: themes.css redefines them under
   body[data-area="medicines"] (medical blue) and body[data-area="equipment"]
   (graphite black). Status tokens are shared and never change with the area.
   ========================================================================== */
:root {
  /* frame (sidebar/header) — neutral slate for shared administration */
  --color-frame-900: #2b3441;
  --color-frame-800: #3a4454;
  --color-frame-accent: #9aa6b8;   /* active-nav marker and header rule */
  --color-frame-text: #e6e9ef;
  --color-frame-muted: #a9b2c1;
  --color-frame-link: #c3cbd8;
  /* primary action / links / selected state */
  --color-primary: #3a4454;
  --color-primary-hover: #2b3441;
  --color-primary-text: #ffffff;
  --color-link: #2b3441;
  --color-quiet: #e6eaf0;          /* selected/quiet background */
  --color-accent: #58677b;
  /* surfaces and text */
  --color-canvas: #f3f5f7;
  --color-surface: #ffffff;
  --color-surface-2: #f7f8fa;
  --color-border: #dfe3e8;
  --color-text: #1b2028;
  --color-text-2: #4b5262;
  --color-muted: #667085;
  /* semantic status (dark text on pale tint; AA on white and tints) */
  --color-ok: #1e7f4f;       --color-ok-bg: #e3f2ea;
  --color-warn: #8b5700;     --color-warn-bg: #fff1d6;
  --color-serious: #a91020;  --color-serious-bg: #fde7e9;
  --color-info: #10618f;     --color-info-bg: #e9f3fa;   --color-info-border: #b5d6ea;
  --color-neutral: #5b6472;  --color-neutral-bg: #eef0f3;
  /* spacing 4/8/12/16/24/32/48 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-control: 6px;
  --radius-panel: 8px;
  --shadow-1: 0 1px 2px rgba(20, 24, 33, .06);
  --shadow-2: 0 6px 24px rgba(20, 24, 33, .16);
  --target-min: 44px;
  --motion-fast: 150ms;
  /* focus: high-contrast neutral ring, distinct from every status and area colour */
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #111827;
  --focus-ring-dark: 0 0 0 2px #111827, 0 0 0 4px #ffffff;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-body: 15px;
  --text-small: 13px;
  --text-h1: 26px;
  --text-h2: 17px;
}
@media (max-width: 560px) {
  :root { --text-h1: 22px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-canvas); color: var(--color-text);
  font: var(--text-body)/1.5 var(--font-sans);
}
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

h1 { font-size: var(--text-h1); line-height: 1.2; font-weight: 700; margin: 0 0 var(--space-4); letter-spacing: -.01em; }
h2 { font-size: var(--text-h2); line-height: 1.3; font-weight: 600; margin: 0 0 var(--space-3); }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 var(--space-2); }
small, .muted { color: var(--color-muted); }
small { font-size: var(--text-small); }
a { color: var(--color-link); }
.num, td.num, th.num, .stat .n, time { font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; }
code { font-family: var(--font-mono); font-size: .85em; }
.eyebrow { margin: 0 0 2px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); }

:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }
.topbar :focus-visible, .sidenav :focus-visible { box-shadow: var(--focus-ring-dark); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-2); top: -100px; z-index: 100;
  background: var(--color-surface); color: var(--color-text); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control); box-shadow: var(--shadow-2); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}