/* ==========================================================================
   CIP — Typography tokens
   Newsreader (serif) leads · Inter (sans) supports. Restrained weights.
   Serif carries personality; sans carries information. Never swap roles.
   ========================================================================== */

:root {
  /* Families + fallback stacks */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --font-display: var(--font-serif);  /* H1–H3 */
  --font-body:    var(--font-sans);   /* everything functional */

  /* Weights — deliberately narrow. Never heavier than these. */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */

  /* Type scale (px → rem @16) with paired line-height.
     Display/H1–H3 = Newsreader; H4/Lead/Body/Label/Eyebrow = Inter. */
  --fs-display: 3.75rem;   /* 60px · Newsreader 500 · LH 1.05 */
  --lh-display: 1.05; /* @kind font */
  --fs-h1:      3.75rem;   /* alias of display */
  --fs-h2:      2.5rem;    /* 40px · Newsreader 500 · LH 1.1 */
  --lh-h2:      1.1; /* @kind font */
  --fs-h3:      1.75rem;   /* 28px · Newsreader 500 · LH 1.15 */
  --lh-h3:      1.15; /* @kind font */
  --fs-h4:      1.25rem;   /* 20px · Inter 600 · LH 1.3 */
  --lh-h4:      1.3; /* @kind font */
  --fs-lead:    1.1875rem; /* 19px · Inter 400 · LH 1.55 */
  --lh-lead:    1.55; /* @kind font */
  --fs-body:    1rem;      /* 16px · Inter 400 · LH 1.7 */
  --lh-body:    1.7; /* @kind font */
  --fs-small:   0.875rem;  /* 14px · Inter 500 · LH 1.5 */
  --lh-small:   1.5; /* @kind font */
  --fs-eyebrow: 0.75rem;   /* 12px · Inter 600 · +.14em · LH 1.4 (minimum size) */
  --lh-eyebrow: 1.4; /* @kind font */

  --tracking-eyebrow: 0.14em; /* @kind font */
  --tracking-tight:   -0.01em; /* @kind font */
}

/* ---------------------------------------------------------------------------
   Optional utility classes — semantic type roles applied directly.
   Components can also just read the tokens above.
   --------------------------------------------------------------------------- */
.cip-display { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); color: var(--text-heading); }
.cip-h2      { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-tight); color: var(--text-heading); }
.cip-h3      { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-heading); }
.cip-h4      { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--text-heading); }
.cip-lead    { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-body); }
.cip-body    { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.cip-small   { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-body); }
.cip-eyebrow { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.cip-lede-italic { font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-body); }