/* =====================================================
   TYPOGRAPHY
   =====================================================
   ONE font for the entire application.

   Bootstrap 5 resolves every component font through
   --bs-body-font-family / --bs-font-sans-serif, and its
   reboot sets `font-family: inherit` on button, input,
   select and textarea. Overriding those two variables is
   therefore enough to reach .btn, .form-control,
   .form-select, .dropdown-menu, .table and everything
   else - with none of the style-recalc cost a universal
   `*:not(...)` selector would add on a 10,000-cell table.

   Bootstrap Icons keep "bootstrap-icons" because they are
   a glyph font, not a text font.
   ===================================================== */

:root {
  --bs-font-sans-serif: var(--font-app);
  --bs-body-font-family: var(--font-app);
}

html,
body {
  font-family: var(--font-app);
}

body {
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-base);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Explicit safety net for elements that set their own
 * family rather than inheriting.
 */
button,
input,
select,
textarea,
optgroup,
.btn,
.form-control,
.form-select,
.form-check-label,
.dropdown-menu,
.dropdown-item,
.table,
.navbar,
.nav-link,
.modal,
.tooltip,
.popover {
  font-family: var(--font-app);
}

/* Bootstrap Icons must keep the glyph font */

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  font-family: "bootstrap-icons" !important;
}

/* ---------- Heading Scale ---------- */

h1 {
  font-size: 26px;
  font-weight: var(--fw-semibold);
  color: var(--c-dark);
}

h2 {
  font-size: var(--fs-page-title);
  font-weight: var(--fw-semibold);
  color: var(--c-dark);
}

h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--c-dark);
}

h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-dark);
}

h5,
h6 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-dark);
}

p {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

label {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: #495057;
}

/* ---------- Text Utilities ---------- */

.text-muted-app {
  color: var(--c-text-muted);
}

.text-strong {
  font-weight: var(--fw-semibold);
}

.text-uppercase-app {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.text-nowrap-app {
  white-space: nowrap;
}