/* ============================================================
   TYPOGRAPHY
   Two families, sharply divided by role:
   - Display (DM Serif Display): big editorial moments — page
     titles, vault names, KPI numerals. Often italic for the
     hero headline. Always weight 400, tight tracking.
   - Body (Afacad Flux): everything functional — UI text, labels,
     tabular figures, buttons, tables.
   ============================================================ */

:root {
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "Afacad Flux", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- Display scale (serif numerals & headlines) ---- */
  --t-display-hero: clamp(44px, 6vw, 60px); /* @kind font */
  --t-display-xl: 88px;                     /* hero metric numeral */
  --t-display-lg: clamp(30px, 3.4vw, 42px); /* @kind font */
  --t-display-md: 40px;                     /* stat metric block */
  --t-display-sm: 32px;                     /* vault name (row) */

  /* ---- Body scale ---- */
  --t-body-lg: 17px;   /* lede paragraphs */
  --t-body: 15px;      /* default body */
  --t-body-sm: 14px;   /* dense UI text */
  --t-caption: 13px;   /* captions */
  --t-micro: 11px;     /* meta */

  /* ---- The canonical micro-label (V2_LABEL) ----
     uppercase eyebrow above every value/KPI/field. */
  --t-label-size: 10px;
  --t-label-weight: 600;
  --t-label-tracking: 0.12em;

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

  /* ---- Display tracking (negative for serif numerals) ---- */
  --t-track-display: -0.02em;  /* @kind other */
  --t-track-hero: -0.03em;     /* @kind other */
  --t-track-numeral: -0.035em; /* @kind other */
}

/* Reusable label utility for plain-HTML cards / docs. */
.oa-label {
  font-family: var(--font-body);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  letter-spacing: var(--t-label-tracking);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--p-text-55);
}