/* ============================================================
   CLA Typography — Apple-style system stack
   (handoff README → "Typography")

   Mac/iPhone : SF Pro (San Francisco)
   Windows    : Segoe UI fallback
   Trait      : negative letter-spacing on large sizes,
                positive on small uppercase labels,
                tabular-nums for metric digits.
   ============================================================ */

:root {
  --cla-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    'SF Pro Text', 'Segoe UI', Helvetica, Arial, sans-serif;
  --text2: #7f8694; /* secondary grey (light) */
}

[data-bs-theme="dark"] {
  --text2: #9ba1b0; /* secondary grey (dark) */
}

html body {
  font-family: var(--cla-font);
  font-size: 14.5px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Page titles ─────────────────────────────────────────── */
h1, .h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.4px; }
h2, .h2 { font-size: 25px; font-weight: 700; letter-spacing: -0.4px; }

/* ── Large metric values (dashboard KPIs use h3/h4) ──────── */
h3, .h3 {
  font-size: 27px; font-weight: 700; letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
h4, .h4 {
  font-size: 25px; font-weight: 700; letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}

/* ── Card titles ─────────────────────────────────────────── */
h5, .h5, .card-title { font-size: 15px; font-weight: 600; letter-spacing: 0; }
h6, .h6 { font-size: 14.5px; font-weight: 600; }

/* ── Body & table cells ──────────────────────────────────── */
.table td { font-size: 14.5px; }
.table td, .card-info h4, .card-info h3 { font-variant-numeric: tabular-nums; }

/* ── Secondary text ──────────────────────────────────────── */
small, .small { font-size: 13.5px; }
.text-body-secondary, .text-muted { color: var(--text2) !important; }

/* ── Micro labels: table headers & eyebrows ──────────────── */
.table thead th,
.menu-header-text,
.dropdown-menu-header h6 {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ── Controls aligned with the body scale ────────────────── */
.btn { font-size: 14.5px; font-weight: 500; }
.btn-sm { font-size: 13.5px; }
.form-label { font-size: 13.5px; font-weight: 500; }
.badge { letter-spacing: 0.2px; }