/* ============================================================
   Uncharted Leadership — Typography
   Display / logotype: Cera Pro — geometric, ALL-CAPS, tracked
   (differentiate by size + color, not weight, like the cover).
   Workhorse UI/body: Figtree (near-twin, full weight range).
   Editorial voice: Spectral serif (pull quotes, author lines).
   ============================================================ */

:root {
  /* Families */
  --font-display: "Cera Pro", "Figtree", system-ui, sans-serif;
  --font-sans:    "Figtree", "Cera Pro", system-ui, sans-serif;
  --font-serif:   "Spectral", Georgia, "Times New Roman", serif;

  /* Weights (Figtree carries these; Cera Pro is 400 only) */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* Fluid type scale */
  --text-2xs: 0.6875rem; /* 11px — micro labels */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-base:1rem;      /* 16px */
  --text-md:  1.125rem;  /* 18px */
  --text-lg:  1.375rem;  /* 22px */
  --text-xl:  1.75rem;   /* 28px */
  --text-2xl: 2.25rem;   /* 36px */
  --text-3xl: 3rem;      /* 48px */
  --text-4xl: 4rem;      /* 64px */
  --text-5xl: 5.25rem;   /* 84px */

  /* Line heights */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Tracking — the brand tracks caps WIDE */
  --tracking-tightest: -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.16em;
  --tracking-widest:   0.28em; /* eyebrow / kicker caps */
}

/* ---- Optional utility classes (tokens are the source of truth) ---- */

.ul-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.ul-kicker {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-sm);
}

.ul-display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-weight: var(--fw-regular);
}

.ul-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: var(--leading-snug);
}

.ul-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}