/* ============================================================
   MESA STRATA — TYPOGRAPHY
   Hierarchy comes from weight + color + space, never size alone
   or effects. Weight ladder: 400 REGULAR · 500 MEDIUM · 700 BOLD.
   Clean line breaks — no orphans, widows, or mid-word breaks.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Inter Tight', 'Söhne', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Source Sans 3', 'Söhne', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ---- Tracking ---- */
  --track-display:  -0.02em;   /* tight, ≈ −2% on headers + wordmark */
  --track-body:      0em;
  --track-mono:      0.12em;   /* letterspaced uppercase meta/labels */
  --track-mono-tight: 0.06em;

  /* ---- Type scale (rem; 1rem = 16px) ---- */
  --text-display:   4.5rem;    /* 72 — cover / hero numerals */
  --text-h1:        3rem;      /* 48 */
  --text-h2:        2.125rem;  /* 34 */
  --text-h3:        1.5rem;    /* 24 */
  --text-h4:        1.1875rem; /* 19 */
  --text-body-lg:   1.375rem;  /* 22 — memo body, generous */
  --text-body:      1.125rem;  /* 18 — base body */
  --text-small:     1rem;      /* 16 */
  --text-meta:      0.8125rem; /* 13 — mono labels, captions */
  --text-micro:     0.6875rem; /* 11 — corner meta, table heads */

  /* ---- Leading ---- */
  --leading-tight:  1.05;      /* display + headers */
  --leading-snug:   1.25;      /* h3 / h4 */
  --leading-body:   1.6;       /* generous memo leading */
  --leading-meta:   1.4;
}

/* ---------------------------------------------------------------
   Optional opt-in helpers — components reference vars directly,
   but these classes make the system legible in specimens & prose.
   --------------------------------------------------------------- */

.ms-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  color: var(--text-primary);
  text-wrap: balance;
}

.ms-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  color: var(--text-primary);
  text-wrap: balance;
}

.ms-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--text-primary);
  text-wrap: balance;
}

.ms-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-display);
  color: var(--text-primary);
}

.ms-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.ms-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  text-wrap: pretty;
}

.ms-body-lg {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--text-primary);
  text-wrap: pretty;
}

.ms-caption {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-small);
  line-height: var(--leading-meta);
  color: var(--text-secondary);
}

/* Monospace meta / labels / tables — uppercase, letterspaced, 500 */
.ms-meta {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Section tag above a title: § NN — LABEL */
.ms-section-tag {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-meta);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-accent);
}