/* Extendeal Pharma — Typography tokens
   Source: Figma "Typography documentation" page.
   Primary face: Source Sans Pro. Lato + Roboto appear in legacy contexts. */

:root {
  --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-lato: "Lato", var(--font-sans);
  --font-roboto: "Roboto", var(--font-sans);

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

  /* Type scale (size / line-height) — exact values from the spec sheet */
  --fs-display: 32px;   --lh-display: 36px;   /* page hero titles */
  --fs-h1: 24px;        --lh-h1: 28px;
  --fs-h2: 20px;        --lh-h2: 24px;
  --fs-h3: 18px;        --lh-h3: 22px;
  --fs-subtitle-1: 16px;--lh-subtitle-1: 20px;
  --fs-body-1: 16px;    --lh-body-1: 20px;
  --fs-body-2: 14px;    --lh-body-2: 18px;
  --fs-label-1: 16px;   --lh-label-1: 20px;
  --fs-label-2: 14px;   --lh-label-2: 18px;
  --fs-label-3: 12px;   --lh-label-3: 16px;
  --fs-caption-1: 14px; --lh-caption-1: 18px;
  --fs-caption-2: 12px; --lh-caption-2: 16px;
}

/* ===== Text-style utility classes ===== */
.ds-display   { font-family: var(--font-sans); font-weight: var(--fw-bold);     font-size: var(--fs-display);    line-height: var(--lh-display); color: var(--text-heading); }

.ds-h1        { font-family: var(--font-sans); font-weight: var(--fw-bold);     font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--text-heading); }
.ds-h1-semi   { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--text-heading); }
.ds-h2        { font-family: var(--font-sans); font-weight: var(--fw-bold);     font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text-heading); }
.ds-h2-semi   { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text-heading); }
.ds-h2-reg    { font-family: var(--font-sans); font-weight: var(--fw-regular);  font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text-heading); }
.ds-h3        { font-family: var(--font-sans); font-weight: var(--fw-bold);     font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-heading); }
.ds-h3-semi   { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-heading); }

.ds-subtitle-1      { font-family: var(--font-sans); font-weight: var(--fw-bold);     font-size: var(--fs-subtitle-1); line-height: var(--lh-subtitle-1); color: var(--text-primary); }
.ds-subtitle-1-semi { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-subtitle-1); line-height: var(--lh-subtitle-1); color: var(--text-primary); }

.ds-body-1    { font-family: var(--font-sans); font-weight: var(--fw-regular);  font-size: var(--fs-body-1); line-height: var(--lh-body-1); color: var(--text-primary); }
.ds-body-2    { font-family: var(--font-sans); font-weight: var(--fw-regular);  font-size: var(--fs-body-2); line-height: var(--lh-body-2); color: var(--text-primary); }
.ds-body-2-semi { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-body-2); line-height: var(--lh-body-2); color: var(--text-primary); }
.ds-body-2-bold { font-family: var(--font-sans); font-weight: var(--fw-bold);   font-size: var(--fs-body-2); line-height: var(--lh-body-2); color: var(--text-primary); }

.ds-label-1   { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-label-1); line-height: var(--lh-label-1); color: var(--text-primary); }
.ds-label-2   { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-label-2); line-height: var(--lh-label-2); color: var(--text-primary); }
.ds-label-3   { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-label-3); line-height: var(--lh-label-3); color: var(--text-primary); }

.ds-caption-1 { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-caption-1); line-height: var(--lh-caption-1); color: var(--text-secondary); }
.ds-caption-2 { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-caption-2); line-height: var(--lh-caption-2); color: var(--text-secondary); }