/* ============================================================
   Echopad type — Unified Color System.
   IBM Plex Sans everywhere; IBM Plex Mono for numeric data.
   16px base, rem-based so the UI survives 200% text scaling.
   ============================================================ */
:root {
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights — 400/500/600 only. There is no 700 in the system: v2 sets even the
     64px hero at 600, so bold never appears. */
  --fw-regular: 400; /* @kind font */   /* body copy, table values */
  --fw-medium: 500; /* @kind font */    /* labels, buttons, interactive */
  --fw-semibold: 600; /* @kind font */  /* headings, emphasis */
  --fw-display: 600; /* @kind font */   /* marketing hero/section heads — v2 sets display at 600, not 700 */

  /* --- Comfortable scale — site-wide default, 16px base --- */
  --fs-page-title: 2rem;    /* 32px */
  --lh-page-title: 1.25; /* @kind font */
  --fs-section: 1.5rem;     /* 24px */
  --lh-section: 1.3; /* @kind font */
  --fs-subsection: 1.25rem; /* 20px */
  --lh-subsection: 1.4; /* @kind font */
  --fs-body: 1rem;          /* 16px — base */
  --lh-body: 1.5; /* @kind font */
  --fs-caption: 0.8125rem;  /* 13px */
  --lh-caption: 1.4; /* @kind font */

  /* --- Compact scale — dense tables/dashboards ONLY, via [data-density="compact"] --- */
  --fs-compact-page-title: 1.75rem;  /* 28px */
  --fs-compact-section: 1.375rem;    /* 22px */
  --fs-compact-subsection: 1.125rem; /* 18px */
  --fs-compact-body: 0.875rem;       /* 14px */
  --fs-compact-caption: 0.75rem;     /* 12px — hard floor */
  --lh-dense: 1.4; /* @kind font */

  /* Marketing display sizes (v2 pages) */
  --fs-display: 3.5rem;     /* 56px hero */
  --fs-display-sm: 2.75rem; /* 44px section head */
  --lh-display: 1.05; /* @kind font */
  --tracking-display: -0.035em; /* @kind font */
  --tracking-tight: -0.01em; /* @kind font */
  --tracking-widest: 0.12em; /* @kind font */ /* uppercase eyebrows */
}

html { font-size: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  background: var(--surface-page);
  font-variant-numeric: tabular-nums; /* digits align even in the sans face */
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--fs-page-title); line-height: var(--lh-page-title); font-weight: var(--fw-semibold); }
h2 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-subsection); line-height: var(--lh-subsection); font-weight: var(--fw-medium); }
label, button, .ui-label { font-weight: var(--fw-medium); }
small { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }

/* Numeric/data cells: mono + tabular for vitals, labs, dosages, IDs, MRNs.
   The class form of this is `.ep-num` in the Layer 2 class layer. */
td.numeric { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-regular); }

/* Dense data surfaces opt in explicitly. */
[data-density="compact"] { font-size: var(--fs-compact-body); line-height: var(--lh-dense); }
[data-density="compact"] h1 { font-size: var(--fs-compact-page-title); }
[data-density="compact"] h2 { font-size: var(--fs-compact-section); }
[data-density="compact"] h3 { font-size: var(--fs-compact-subsection); }
[data-density="compact"] small,
[data-density="compact"] .ep-caption { font-size: var(--fs-compact-caption); }
[data-density="compact"] .ep-card__body { padding: var(--space-4); }
[data-density="compact"] .ep-card__header,
[data-density="compact"] .ep-card__footer { padding: 10px 14px; }
[data-density="compact"] .ep-btn { height: 32px; padding: 0 14px; font-size: var(--fs-compact-body); }
[data-density="compact"] .ep-btn--sm { height: 28px; padding: 0 10px; font-size: var(--fs-compact-caption); }