/* ============================================================
   XC Gradient — Typography tokens
   Conceptual juxtaposition in type: a warm literary SERIF
   (Newsreader) for display & editorial voice, an engineering-grade
   GROTESQUE (IBM Plex Sans) for body & UI, and a MONO (IBM Plex
   Mono) for data, metadata, taxonomic/technical labels.
   Fonts loaded in fonts.css (Google Fonts — see readme substitution note).
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

  /* ---- Type scale (px) ----
     Display sizes are serif; text/UI sizes are sans; label sizes mono. */
  --text-display-xl: 76px;  /* hero statements */
  --text-display-lg: 56px;  /* page titles */
  --text-display-md: 42px;  /* section titles */
  --text-display-sm: 32px;  /* sub-section / card titles */
  --text-title: 24px;       /* prominent headings */
  --text-subtitle: 20px;    /* lead paragraph, large label */
  --text-body-lg: 18px;
  --text-body: 16px;        /* default body */
  --text-body-sm: 14px;     /* dense UI, captions */
  --text-caption: 13px;
  --text-micro: 11px;       /* eyebrows, mono labels, meta */

  /* ---- Line heights ---- */
  --lh-tight: 1.05;   /* @kind font */
  --lh-snug: 1.18;    /* @kind font */
  --lh-normal: 1.5;   /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight: -0.02em;   /* @kind font */
  --ls-snug: -0.01em;    /* @kind font */
  --ls-normal: 0;        /* @kind font */
  --ls-wide: 0.04em;     /* @kind font */
  --ls-eyebrow: 0.16em;  /* @kind font */

  /* ---- Semantic roles ---- */
  --role-eyebrow-font: var(--font-mono);
  --role-eyebrow-size: var(--text-micro);
  --role-eyebrow-spacing: var(--ls-eyebrow);

  --role-display-font: var(--font-display);
  --role-heading-font: var(--font-display);
  --role-body-font: var(--font-sans);
  --role-ui-font: var(--font-sans);
  --role-data-font: var(--font-mono);
}