/* ============================================================
   Polionys — Typography
   Faces (all loaded in fonts.css):
     Montserrat — display, page titles, body & navigation
     Manrope    — UI controls (buttons, inputs, labels, helper)
     Poppins    — numerals, KPI figures, status badges
     Inter      — dense data tables & secondary metadata
   ============================================================ */

:root {
  /* ---------- Font families ---------- */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ui:      'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-numeric: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-data:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---------- Weights ---------- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* ---------- Size scale (px, verbatim from file) ---------- */
  --text-3xl: 40px;   /* page hero figures            */
  --text-2xl: 32px;   /* page titles                  */
  --text-xl:  26px;   /* card headline figures        */
  --text-lg:  24px;
  --text-ml:  22px;
  --text-md:  20px;
  --text-base:18px;   /* section titles               */
  --text-sm:  16px;   /* default UI / input value     */
  --text-xs:  14px;   /* body, labels, nav            */
  --text-2xs: 13px;
  --text-3xs: 12px;   /* badges, captions             */
  --text-4xs: 10px;   /* micro labels                 */

  /* ---------- Line heights ---------- */
  --lh-tight:   1.2;  /* @kind font */
  --lh-snug:    1.4;  /* @kind font */
  --lh-default: 1.55; /* @kind font */
  --lh-relaxed: 1.6;  /* @kind font */

  /* ---------- Letter spacing ---------- */
  --ls-tight:  -0.01em;  /* @kind font */
  --ls-wide:   0.04em;   /* @kind font */
  --ls-wider:  0.12em;   /* @kind font */
}

/* ============================================================
   Semantic text styles — apply directly as classes
   ============================================================ */
.pol-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
}
.pol-page-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  color: var(--text-heading);
}
.pol-section-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-base);
  line-height: var(--lh-snug);
  color: var(--text-heading);
}
.pol-kpi {
  font-family: var(--font-numeric);
  font-weight: var(--fw-medium);
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  color: var(--text-heading);
}
.pol-body {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  line-height: var(--lh-default);
  color: var(--text-body);
}
.pol-label {
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  line-height: var(--lh-default);
  color: var(--text-heading);
}
.pol-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-3xs);
  line-height: var(--lh-default);
  color: var(--text-subtle);
}
.pol-badge {
  font-family: var(--font-numeric);
  font-weight: var(--fw-medium);
  font-size: var(--text-3xs);
  line-height: 20px;
}
.pol-nav-group {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}