/* ===========================================================================
   ENDPOINT · TYPOGRAPHY TOKENS
   =========================================================================== */

:root {
  /* --- Families ----------------------------------------------------------- */
  /* Brand family is Shentox — substituted with Saira until font files land. */
  --font-display: 'Saira', 'Shentox', system-ui, sans-serif;
  --font-body: 'Saira', 'Shentox', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* --- Weights ------------------------------------------------------------ */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-black: 800; /* @kind font */

  /* --- Type scale (rem, 1rem = 16px) -------------------------------------- */
  --fs-2xs: 0.6875rem;  /* 11px — micro labels */
  --fs-xs:  0.75rem;    /* 12px — captions, meta */
  --fs-sm:  0.875rem;   /* 14px — secondary UI */
  --fs-md:  1rem;       /* 16px — body base */
  --fs-lg:  1.125rem;   /* 18px — lead body */
  --fs-xl:  1.375rem;   /* 22px — card titles */
  --fs-2xl: 1.75rem;    /* 28px — section heads */
  --fs-3xl: 2.25rem;    /* 36px — page titles */
  --fs-4xl: 3rem;       /* 48px — display */
  --fs-5xl: 4rem;       /* 64px — hero */
  --fs-6xl: 5.5rem;     /* 88px — mega hero */

  /* --- Line heights ------------------------------------------------------- */
  --lh-tight: 1.05;    /* @kind font */
  --lh-snug: 1.18;     /* @kind font */
  --lh-normal: 1.5;    /* @kind font */
  --lh-relaxed: 1.65;  /* @kind font */

  /* --- Letter spacing ----------------------------------------------------- */
  --ls-tight: -0.02em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide: 0.04em; /* @kind font */
  --ls-wider: 0.08em; /* @kind font */
  --ls-label: 0.14em;   /* @kind font */

  /* --- Semantic text roles ------------------------------------------------ */
  --text-hero-size: var(--fs-6xl);
  --text-display-size: var(--fs-4xl);
  --text-title-size: var(--fs-3xl);
  --text-heading-size: var(--fs-2xl);
  --text-body-size: var(--fs-md);
  --text-label-size: var(--fs-xs);
}

/* ===========================================================================
   TYPOGRAPHY PRIMITIVE CLASSES (optional helpers; tokens are the contract)
   =========================================================================== */

.ep-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

.ep-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-display-size);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--text-strong);
}

.ep-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-title-size);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}

.ep-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-heading-size);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}

.ep-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-body-size);
  line-height: var(--lh-normal);
  color: var(--text-default);
}

.ep-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.ep-stat {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}