/* ============================================================
   Binding Chaos Encyclopedia — Typography tokens
   ------------------------------------------------------------
   Type scale verbatim from Design Brief v1.2.
     · Newsreader    — display, headings, lead + body reading
     · Inter         — UI text, nav, buttons, meta
     · IBM Plex Mono — machine layer (registry IDs, JSON-LD)

   Each role carries an explicit size/line-height pair.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;

  /* ============================================================
     Role scale — size / line-height (px values from the brief)
     ============================================================ */

  /* Display — Newsreader 44/52 */
  --type-display-font:   var(--font-serif);
  --type-display-size:   44px;
  --type-display-leading:52px;
  --type-display-weight: var(--weight-medium);

  /* Heading 1 — Newsreader 34/42 */
  --type-h1-font:    var(--font-serif);
  --type-h1-size:    34px;
  --type-h1-leading: 42px;
  --type-h1-weight:  var(--weight-medium);

  /* Heading 2 — Newsreader 26/34 */
  --type-h2-font:    var(--font-serif);
  --type-h2-size:    26px;
  --type-h2-leading: 34px;
  --type-h2-weight:  var(--weight-medium);

  /* Heading 3 (UI) — Inter 20/28 */
  --type-h3-font:    var(--font-sans);
  --type-h3-size:    20px;
  --type-h3-leading: 28px;
  --type-h3-weight:  var(--weight-semibold);

  /* Lead / answer paragraph — Newsreader 21/32 */
  --type-lead-font:    var(--font-serif);
  --type-lead-size:    21px;
  --type-lead-leading: 32px;
  --type-lead-weight:  var(--weight-regular);

  /* Body reading text — Newsreader 18/30 */
  --type-body-font:    var(--font-serif);
  --type-body-size:    18px;
  --type-body-leading: 30px;
  --type-body-weight:  var(--weight-regular);

  /* UI text · nav, buttons — Inter 15/22 */
  --type-ui-font:    var(--font-sans);
  --type-ui-size:    15px;
  --type-ui-leading: 22px;
  --type-ui-weight:  var(--weight-medium);

  /* META · breadcrumbs, badges — Inter 13/18 */
  --type-meta-font:    var(--font-sans);
  --type-meta-size:    13px;
  --type-meta-leading: 18px;
  --type-meta-weight:  var(--weight-medium);

  /* Machine layer — IBM Plex Mono 13/20 */
  --type-mono-font:    var(--font-mono);
  --type-mono-size:    13px;
  --type-mono-leading: 20px;
  --type-mono-weight:  var(--weight-regular);

  /* ---- Tracking ---- */
  --tracking-tight:  -0.01em;  /* large serif display */
  --tracking-normal: 0;
  --tracking-meta:   0.04em;   /* uppercase meta / eyebrows */
  --tracking-eyebrow:0.12em;   /* spaced uppercase section labels */
}