/* =====================================================================
   Surgical Route — shared typography
   Loaded on EVERY page, right after Bootstrap and before the page CSS.

   All font sizes on the site come from the variables below. To make text
   bigger or smaller everywhere, change a value here once.
   ===================================================================== */
:root {
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Font size scale */
  --fs-xs:   12px;                         /* badges, tiny labels          */
  --fs-sm:   14px;                         /* small text, meta, menu links */
  --fs-base: 16px;                         /* body text, paragraphs, forms */
  --fs-md:   18px;                         /* lead paragraphs, h5          */
  --fs-lg:   20px;                         /* card titles, h4              */
  --fs-xl:   24px;                         /* h3, big numbers              */
  --fs-h2:   clamp(26px, 3vw, 34px);       /* section titles               */
  --fs-h1:   clamp(30px, 4.2vw, 48px);     /* page titles / hero           */

  /* Line heights */
  --lh-tight: 1.25;                        /* headings */
  --lh-body:  1.6;                         /* text     */
}

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3, .h3 { font-size: var(--fs-xl); line-height: var(--lh-tight); }
h4, .h4 { font-size: var(--fs-lg); line-height: var(--lh-tight); }
h5, .h5 { font-size: var(--fs-md); line-height: var(--lh-tight); }
h6, .h6 { font-size: var(--fs-base); line-height: var(--lh-tight); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-sans); }

p, li, td, th, dd, dt, label, blockquote { font-size: var(--fs-base); }

.lead          { font-size: var(--fs-md); }
small, .small  { font-size: var(--fs-sm); }

/* Bootstrap size helpers mapped to the same scale */
.fs-1 { font-size: var(--fs-h1) !important; }
.fs-2 { font-size: var(--fs-h2) !important; }
.fs-3 { font-size: var(--fs-xl) !important; }
.fs-4 { font-size: var(--fs-lg) !important; }
.fs-5 { font-size: var(--fs-md) !important; }
.fs-6 { font-size: var(--fs-base) !important; }

/* Form controls and buttons */
.btn, .form-control, .form-select, input, select, textarea, button { font-family: var(--font-sans); }
.btn, .form-control, .form-select { font-size: var(--fs-base); }
.btn-sm, .form-control-sm, .form-select-sm { font-size: var(--fs-sm); }
.btn-lg, .form-control-lg, .form-select-lg { font-size: var(--fs-md); }
.form-label { font-size: var(--fs-sm); }