/* Proven Peptide — Typography tokens
   Display / editorial tiers render in Cormorant Garamond at LIGHT weight (300) —
   the brand's airy, premium voice (the serif echoes the logo wordmark).
   Functional chrome (labels, body, buttons, nav) renders in Hanken Grotesk.
   Lab data / metadata renders in IBM Plex Mono.
   Scale & metrics preserved from the source spec (54 -> 12 ladder, mostly 1.25 line-height). */

:root {
  /* font stacks come from fonts.css: --font-display, --font-sans, --font-mono */

  /* DISPLAY / EDITORIAL — serif, light */
  --type-display-xl-size: 54px; --type-display-xl-weight: 300; --type-display-xl-lh: 1.18; --type-display-xl-ls: 0px;
  --type-display-lg-size: 44px; --type-display-lg-weight: 300; --type-display-lg-lh: 1.2;  --type-display-lg-ls: 0.1px;
  --type-display-md-size: 35px; --type-display-md-weight: 400; --type-display-md-lh: 1.22; --type-display-md-ls: 0px;
  --type-heading-xl-size: 28px; --type-heading-xl-weight: 400; --type-heading-xl-lh: 1.25; --type-heading-xl-ls: 0.1px;
  --type-heading-lg-size: 22px; --type-heading-lg-weight: 500; --type-heading-lg-lh: 1.3;  --type-heading-lg-ls: 0.1px;

  /* FUNCTIONAL CHROME — sans */
  --type-heading-md-size: 18px; --type-heading-md-weight: 600; --type-heading-md-lh: 1.2; --type-heading-md-ls: 0px;
  --type-body-md-size: 18px;    --type-body-md-weight: 400;    --type-body-md-lh: 1.55;  --type-body-md-ls: 0.1px;
  --type-body-strong-size: 18px;--type-body-strong-weight: 500;--type-body-strong-lh: 1.3;--type-body-strong-ls: 0.3px;
  --type-body-sm-size: 16px;    --type-body-sm-weight: 400;    --type-body-sm-lh: 1.55;  --type-body-sm-ls: 0px;
  --type-caption-md-size: 14px; --type-caption-md-weight: 400; --type-caption-md-lh: 1.5; --type-caption-md-ls: 0px;
  --type-caption-sm-size: 12px; --type-caption-sm-weight: 500; --type-caption-sm-lh: 1.5; --type-caption-sm-ls: 0.2px;
  --type-button-lg-size: 16px;  --type-button-lg-weight: 700;  --type-button-lg-lh: 1.25; --type-button-lg-ls: 0.4px;
  --type-button-md-size: 13px;  --type-button-md-weight: 700;  --type-button-md-lh: 1.25; --type-button-md-ls: 0.3px;

  /* MONO — lab data / research tags */
  --type-mono-sm-size: 12px;    --type-mono-sm-weight: 500;    --type-mono-sm-lh: 1.4;  --type-mono-sm-ls: 0.4px;
  --type-mono-md-size: 14px;    --type-mono-md-weight: 500;    --type-mono-md-lh: 1.5;  --type-mono-md-ls: 0.2px;
}

/* Optional utility classes (components mostly use the vars directly) */
.pp-display-xl { font-family: var(--font-display); font-size: var(--type-display-xl-size); font-weight: var(--type-display-xl-weight); line-height: var(--type-display-xl-lh); letter-spacing: var(--type-display-xl-ls); }
.pp-display-lg { font-family: var(--font-display); font-size: var(--type-display-lg-size); font-weight: var(--type-display-lg-weight); line-height: var(--type-display-lg-lh); letter-spacing: var(--type-display-lg-ls); }
.pp-display-md { font-family: var(--font-display); font-size: var(--type-display-md-size); font-weight: var(--type-display-md-weight); line-height: var(--type-display-md-lh); letter-spacing: var(--type-display-md-ls); }
.pp-heading-xl { font-family: var(--font-display); font-size: var(--type-heading-xl-size); font-weight: var(--type-heading-xl-weight); line-height: var(--type-heading-xl-lh); letter-spacing: var(--type-heading-xl-ls); }
.pp-heading-lg { font-family: var(--font-display); font-size: var(--type-heading-lg-size); font-weight: var(--type-heading-lg-weight); line-height: var(--type-heading-lg-lh); letter-spacing: var(--type-heading-lg-ls); }
.pp-heading-md { font-family: var(--font-sans); font-size: var(--type-heading-md-size); font-weight: var(--type-heading-md-weight); line-height: var(--type-heading-md-lh); }
.pp-body-md { font-family: var(--font-sans); font-size: var(--type-body-md-size); font-weight: var(--type-body-md-weight); line-height: var(--type-body-md-lh); letter-spacing: var(--type-body-md-ls); }
.pp-body-sm { font-family: var(--font-sans); font-size: var(--type-body-sm-size); font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-lh); }
.pp-caption { font-family: var(--font-sans); font-size: var(--type-caption-md-size); line-height: var(--type-caption-md-lh); }
.pp-mono { font-family: var(--font-mono); font-size: var(--type-mono-sm-size); font-weight: var(--type-mono-sm-weight); letter-spacing: var(--type-mono-sm-ls); text-transform: uppercase; }