/* ===== Sentinel typography system ===== */
:root{
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --text: #111;
  --muted: rgba(0,0,0,.62);

  /* type scale */
  --fs-1: 24px; /* H1 */
  --fs-2: 20px; /* H2 */
  --fs-3: 18px; /* H3 */
  --fs-4: 16px; /* H4 */
  --fs-b: 15px; /* body */
  --fs-m: 14px; /* muted */
  --fs-s: 13px; /* small */
  --fs-xs: 12px; /* tiny */

  --lh-tight: 1.25;
  --lh: 1.5;
  --lh-legal: 1.65;
}

/* base */
html{ font-size:16px; }
body{
  font-family: var(--font-sans);
  color: var(--text);
  font-size: var(--fs-b);
  line-height: var(--lh);
  text-rendering: optimizeLegibility;
}

/* headings (classes > element styling to avoid Bootstrap surprises) */
.er-h1{ font-size:var(--fs-1); line-height:var(--lh-tight); font-weight:900; margin:0 0 8px; }
.er-h2{ font-size:var(--fs-2); line-height:1.3; font-weight:800; margin:0 0 8px; }
.er-h3{ font-size:var(--fs-3); line-height:1.35; font-weight:800; margin:0 0 6px; }
.er-h4{ font-size:var(--fs-4); line-height:1.4; font-weight:700; margin:0 0 6px; }

.er-body{ font-size:var(--fs-b); line-height:var(--lh); }
.er-muted{ color:var(--muted); font-size:var(--fs-m); line-height:1.45; }
.er-small{ color:var(--muted); font-size:var(--fs-s); line-height:1.4; }
.er-legal{ color:var(--muted); font-size:var(--fs-m); line-height:var(--lh-legal); }

/* forms */
.er-label{ font-size:var(--fs-m); font-weight:600; color:rgba(0,0,0,.68); }
.er-help{ font-size:var(--fs-s); color:rgba(0,0,0,.55); line-height:1.4; }

/* inputs to be consistent everywhere */
input.form-control,
select.form-control,
textarea.form-control{
  font-size: var(--fs-b);
  line-height: 1.3;
}

/* buttons */
.btn{ font-size:var(--fs-m); font-weight:700; }