/* ============================================================================
   ZKELETON // HL7 v2 -> FHIR R4 converter — design tokens + base
   A terminal/IDE token system: pure neutral greys + one accent (vermillion).
   Self-hosted fonts only — ZERO external requests (this page handles medical
   data; "nothing leaves your browser" is literal). Latin woff2 in /fonts.
============================================================================ */

/* --------------------------------------------------------- self-hosted fonts */
/* One variable woff2 per family carries the entire weight axis — fewer bytes,
   one request each, and true (not synthesized) weights at every step. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/inter.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 800; font-display:swap; src:url('fonts/jbmono.woff2') format('woff2'); }

/* --------------------------------------------------------------------- tokens */
:root {
  /* backgrounds & surfaces */
  --bg-app: #0a0a0a;
  --bg-surface: #121212;
  --bg-surface-2: #1a1a1a;   /* hover / raised */

  /* borders */
  --border: #262626;         /* subtle: dividers, inactive panes */
  --border-strong: #404040;  /* hover, active input */

  /* type */
  --text: #f2f2f2;           /* primary: code, headers, values */
  --muted: #8c8c8c;          /* UI text, labels, chips */
  --muted-2: #a8a8a8;        /* slightly brighter muted (trust facts, icons) */
  --faint: #4d4d4d;          /* watermarks, separators, idle */

  /* the single accent — vermillion */
  --accent: #e63946;
  --accent-surface: #2e1517; /* dim vermillion-over-black: review drawer bg */
  --accent-border: #8a222a;  /* muted vermillion: review item borders */

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --pad: 24px;               /* horizontal gutter, shared by every chrome row */
}

/* ----------------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
  margin: 0;
  height: 100%;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}