/* =============================================================================
   Typography — Apple-style type system
   Font stack: SF Pro on Mac/iPhone (-apple-system), Segoe UI on Windows.
   Loaded AFTER the Vuexy theme CSS so these rules win.
   Apple traits: negative letter-spacing at display sizes, positive tracking on
   small uppercase micro-labels, tabular figures for numbers in tables/metrics.
   Scale: whole system raised +2px on 2026-07-03 (user request).
   ============================================================================= */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    'SF Pro Text', 'Segoe UI', Helvetica, Arial, sans-serif;
}

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

body {
  font-family: var(--bs-body-font-family);
  font-size: 15.5px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- headings
   Negative tracking grows with size (SF Pro Display behaviour). */
h1, .h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.4px; }
h2, .h2 { font-size: 25px; font-weight: 700; letter-spacing: -0.35px; }
h3, .h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.25px; }
h4, .h4 { font-size: 21px; font-weight: 700; letter-spacing: -0.2px; }
h5, .h5 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
h6, .h6 { font-size: 14.5px; font-weight: 600; }

/* Page titles — every page header uses the `h4.py-3` breadcrumb pattern
   ("Administration / User Management"). Treated as the h1 of the page. */
h4.py-3 { font-size: 28px; font-weight: 700; letter-spacing: -0.4px; }
h4.py-3 .fw-light { font-weight: 400 !important; }

/* Big metric values (dashboard cards use h4.mb-1 / h4.mb-2 / hero h2) —
   bold with tabular figures so digit columns stay aligned. */
.card-body h4.mb-1,
.card-body h4.mb-2 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.card-body h2,
.card-body h3,
.card-body h4,
.card-body .h4 {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ body & tables */
.table { font-size: 15px; }
.table td { font-variant-numeric: tabular-nums; }

/* Micro labels: table headers — uppercase with positive tracking. */
.table thead th {
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Secondary text */
small, .small { font-size: 14px; }

/* Eyebrow micro-labels (uppercase small labels e.g. "ROOT CAUSE", "ANALYSIS") */
small.text-uppercase, .small.text-uppercase {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* --------------------------------------------------------------- controls
   Bootstrap sizes these in rem (off the 16px root), so they need explicit
   pixel overrides to sit on the new body scale. */
.btn { font-size: 15px; font-weight: 500; }
.btn-sm { font-size: 14.5px; }
.btn-lg { font-size: 16.5px; }
.form-control, .form-select, .input-group-text { font-size: 15px; }
.form-control-sm, .form-select-sm { font-size: 14.5px; }
.form-label { font-size: 14.5px; font-weight: 500; }
.dropdown-item { font-size: 15px; }
.nav-link { font-size: 15px; }
.alert { font-size: 15px; }
.list-group-item { font-size: 15px; }
.breadcrumb { font-size: 14.5px; }
.pagination { font-size: 15px; }
.tooltip { font-size: 14px; }
.popover { font-size: 14.5px; }
.toast-body { font-size: 15px; }
.modal-title { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }

/* ----------------------------------------------------------------- badges */
.badge {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
/* Pill filter tabs (User Management, files scope, AI insight tabs) use .fs-6 —
   keep them comfortably readable. */
.badge.fs-6 { font-size: 15px !important; }

/* ------------------------------------------------------------------- menu */
.menu .menu-link { font-size: 15px; }
.menu .menu-header {
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}