/* ============================================================
   Typography — Claude-style design system
   Editorial split: Newsreader (serif) for display, Inter (sans)
   for body/UI, JetBrains Mono for code.
   Display weight stays 400 with NEGATIVE tracking — never bold.
   ============================================================ */

:root {
  /* ---- Families (swap targets for licensed Copernicus/StyreneB) ---- */
  --font-display: 'Newsreader', 'Tiempos Headline', Garamond, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Display (Newsreader serif, weight 400, negative tracking) ---- */
  --display-xl-size: 64px;
  --display-xl-lh: 1.05;  /* @kind other */
  --display-xl-ls: -1.5px;
  --display-lg-size: 48px;
  --display-lg-lh: 1.1;   /* @kind other */
  --display-lg-ls: -1px;
  --display-md-size: 36px;
  --display-md-lh: 1.15;  /* @kind other */
  --display-md-ls: -0.5px;
  --display-sm-size: 28px;
  --display-sm-lh: 1.2;   /* @kind other */
  --display-sm-ls: -0.3px;
  --display-weight: 400;  /* @kind other */

  /* ---- Titles (Inter, weight 500) ---- */
  --title-lg-size: 22px;
  --title-lg-lh: 1.3;     /* @kind other */
  --title-md-size: 18px;
  --title-md-lh: 1.4;     /* @kind other */
  --title-sm-size: 16px;
  --title-sm-lh: 1.4;     /* @kind other */
  --title-weight: 500;    /* @kind other */

  /* ---- Body (Inter, weight 400) ---- */
  --body-md-size: 16px;
  --body-md-lh: 1.55;     /* @kind other */
  --body-sm-size: 14px;
  --body-sm-lh: 1.55;     /* @kind other */

  /* ---- Detail ---- */
  --caption-size: 13px;
  --caption-lh: 1.4;          /* @kind other */
  --caption-weight: 500;      /* @kind other */
  --caption-up-size: 12px;
  --caption-up-lh: 1.4;       /* @kind other */
  --caption-up-ls: 1.5px;
  --code-size: 14px;
  --code-lh: 1.6;             /* @kind other */
  --button-size: 14px;
  --button-weight: 500;       /* @kind other */
  --nav-size: 14px;
  --nav-lh: 1.4;              /* @kind other */
  --nav-weight: 500;          /* @kind other */
}

/* ------------------------------------------------------------
   Optional helper classes (components may also read raw vars)
   ------------------------------------------------------------ */
.ds-display-xl { font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--display-xl-size); line-height: var(--display-xl-lh); letter-spacing: var(--display-xl-ls); }
.ds-display-lg { font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--display-lg-size); line-height: var(--display-lg-lh); letter-spacing: var(--display-lg-ls); }
.ds-display-md { font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--display-md-size); line-height: var(--display-md-lh); letter-spacing: var(--display-md-ls); }
.ds-display-sm { font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--display-sm-size); line-height: var(--display-sm-lh); letter-spacing: var(--display-sm-ls); }

.ds-title-lg { font-family: var(--font-sans); font-weight: var(--title-weight);
  font-size: var(--title-lg-size); line-height: var(--title-lg-lh); }
.ds-title-md { font-family: var(--font-sans); font-weight: var(--title-weight);
  font-size: var(--title-md-size); line-height: var(--title-md-lh); }
.ds-title-sm { font-family: var(--font-sans); font-weight: var(--title-weight);
  font-size: var(--title-sm-size); line-height: var(--title-sm-lh); }

.ds-body-md { font-family: var(--font-sans); font-weight: 400;
  font-size: var(--body-md-size); line-height: var(--body-md-lh); }
.ds-body-sm { font-family: var(--font-sans); font-weight: 400;
  font-size: var(--body-sm-size); line-height: var(--body-sm-lh); }

.ds-caption { font-family: var(--font-sans); font-weight: var(--caption-weight);
  font-size: var(--caption-size); line-height: var(--caption-lh); }
.ds-caption-up { font-family: var(--font-sans); font-weight: var(--caption-weight);
  font-size: var(--caption-up-size); line-height: var(--caption-up-lh);
  letter-spacing: var(--caption-up-ls); text-transform: uppercase; }
.ds-code { font-family: var(--font-mono); font-weight: 400;
  font-size: var(--code-size); line-height: var(--code-lh); }