/* ==========================================================================
   ProLegal Typography Overrides
   - Use Host Grotesk everywhere via Bootstrap CSS vars
   - Headings: Medium (500) per Brand Guide
   - Body: Normal (400); utilities for Light (300) / Medium (500)
   ========================================================================== */

:root {
  --bs-body-font-family: "Host Grotesk", system-ui, -apple-system, "Segoe UI",
                         Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
                         sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-sans-serif: var(--bs-body-font-family);
}

/* Variable font niceties */
html, body {
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
}

/* Safety net: ensure common components inherit Host Grotesk */
body,
h1, h2, h3, h4, h5, h6,
p, small,
.btn, .navbar, .dropdown-menu,
.form-control, .form-select, .input-group-text,
.table, .badge, .breadcrumb,
.alert, .list-group, .accordion,
.card, .modal, .toast {
  font-family: var(--bs-body-font-family) !important;
}

/* Headings per brand: Medium (500) */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: 500;
  letter-spacing: -0.01em;   /* subtle micro-tightening */
}

/* Body defaults */
body, p, .card-text {
  font-weight: 400;
  line-height: 1.6;
}

/* Utilities */
.fw-medium { font-weight: 500 !important; }   /* Bootstrap lacks this */
.lead { font-weight: 300; line-height: 1.7; }
.btn, .btn-link,
.form-label, .form-check-label,
.nav-link, .dropdown-item { font-weight: 500; }
.badge, small, .text-muted { font-weight: 300; }

/* Optional display helpers (hero headings) */
.display-h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 1.11; font-weight: 500; }
.display-h2 { font-size: clamp(2.25rem, 4.8vw, 3.5rem); line-height: 1.15; font-weight: 500; }
.display-h3 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.20; font-weight: 500; }