/* ============================================================
   Complifield — Typography
   IBM Plex Sans (display + body) · IBM Plex Mono (data / grades / labels)
   Display is Plex Sans 600/700, tight tracking. Mono is uppercase,
   positive tracking, used for eyebrows, labels, data and grades.
   ============================================================ */

:root {
  /* ---------- FAMILIES ---------- */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Semantic aliases */
  --font-display: var(--font-sans); /* headlines — weight 600/700 */
  --font-body:    var(--font-sans); /* body / UI — weight 400/500 */
  --font-data:    var(--font-mono); /* grades, scores, labels, eyebrows */

  /* ---------- WEIGHTS ---------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- TYPE SCALE (px) ---------- */
  --text-display:  56px; /* hero H1 */
  --text-h1:       40px; /* page title */
  --text-h2:       30px; /* section title */
  --text-h3:       22px; /* subsection */
  --text-lead:     19px; /* hero / intro paragraph */
  --text-body:     16px; /* default body */
  --text-sm:       14px; /* secondary text */
  --text-xs:       12px; /* captions, fine print */

  /* Mono / label scale */
  --label-md:      13px; /* mono labels */
  --label-sm:      11px; /* eyebrows, nav, metadata */
  --label-xs:      10px; /* finest mono tags */

  /* ---------- LINE HEIGHT ---------- */
  --leading-tight: 1.08; /* display headlines */
  --leading-snug:  1.28; /* sub-heads */
  --leading-body:  1.6;  /* body copy */

  /* ---------- TRACKING ---------- */
  --tracking-display: -0.03em; /* tight on headlines */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-label:   0.08em;  /* mono labels */
  --tracking-eyebrow: 0.15em;  /* mono eyebrows / system badges */
}

/* ---------- TYPE PRIMITIVE CLASSES ---------- */
.cf-display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
.cf-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
}
.cf-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.cf-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.cf-lead {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
}
.cf-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.cf-sm {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

/* Mono — eyebrows, labels, data */
.cf-eyebrow {
  font-family: var(--font-data);
  font-weight: var(--weight-medium);
  font-size: var(--label-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.cf-label {
  font-family: var(--font-data);
  font-weight: var(--weight-medium);
  font-size: var(--label-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.cf-data {
  font-family: var(--font-data);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}