/* ============================================================
   TYPOGRAPHY — FEB Analytics
   System UI sans-serif throughout (the product ships no webfonts).
   The voice is data-dense: tiny uppercase labels over big bold
   numbers. Tables run small (11–13px). Hero titles are wide-tracked
   uppercase. No serif, no mono.
   ============================================================ */
:root {
  /* ---- Families ------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-report: -apple-system, "Segoe UI", Roboto, sans-serif;

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

  /* ---- Type scale (px) ------------------------------------ */
  --fs-hero: 34px;     /* HERO TITLE — uppercase, tracked */
  --fs-h1: 24px;       /* report H1 */
  --fs-kpi-xl: 27px;   /* hero KPI value */
  --fs-display: 23px;  /* scoreboard number */
  --fs-kpi: 22px;      /* standard KPI value */
  --fs-h2: 16px;       /* report section heading */
  --fs-h3: 14px;       /* sub heading */
  --fs-base: 14px;     /* body / controls */
  --fs-table: 13px;    /* table cell */
  --fs-sm: 12px;       /* secondary / dense table */
  --fs-xs: 11px;       /* labels, captions */
  --fs-2xs: 10px;      /* micro labels (KPI label, eyebrow) */

  /* ---- Line heights --------------------------------------- */
  --lh-tight: 1.1;  /* @kind font */
  --lh-snug: 1.35;  /* @kind font */
  --lh-body: 1.6;   /* @kind font */

  /* ---- Letter spacing ------------------------------------- */
  --ls-hero: 4px;      /* HERO TITLE */
  --ls-label: 0.5px;   /* uppercase micro labels */
  --ls-eyebrow: 0.6px;
}

/* ---- Roles -------------------------------------------------
   Utility classes mirroring the dashboard's recurring text styles.
   Components reference the variables directly; these are for cards
   and quick markup. */
.feb-hero-title {
  font-family: var(--font-sans);
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-hero);
  text-transform: uppercase;
  color: var(--text-heading);
  line-height: var(--lh-tight);
}
.feb-kpi-value {
  font-size: var(--fs-kpi-xl);
  font-weight: var(--fw-black);
  color: var(--text-heading);
  line-height: var(--lh-tight);
}
.feb-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-label);
}
.feb-eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
}