/* ===========================================================================
   tokens/typography.css
   ---------------------------------------------------------------------------
   Full type scale (display, h1–h4, body, caption) plus the shared label
   treatment for mono eyebrows/tags.

   Sizes are fluid via clamp() so the oversized display type stays dramatic on
   desktop without overflowing on mobile.
   Depends on the --font-* tokens from fonts.css.
   ========================================================================== */

:root {
  /* --- Font size scale (fluid) ------------------------------------------- */
  --fs-display: clamp(1.8rem, 7.5vw, 6rem);    /* oversized hero headlines    */
  --fs-h1: clamp(2rem, 6vw, 4.5rem);
  --fs-h2: clamp(2rem, 4.5vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 3vw, 2rem);
  --fs-h4: clamp(1.15rem, 2vw, 1.4rem);
  --fs-body: clamp(1rem, 1.15vw, 1.125rem);
  --fs-caption: 0.8125rem;
  --fs-label: 0.75rem;       /* mono eyebrows / tags                          */

  /* --- Line heights ------------------------------------------------------ */
  --lh-display: 0.98;        /* tight for big wedge type                      */
  --lh-heading: 1.06;
  --lh-body: 1.62;
  --lh-label: 1.4;

  /* --- Tracking ---------------------------------------------------------- */
  --tracking-display: -0.03em;   /* tight tracking at large sizes             */
  --tracking-heading: -0.02em;
  --tracking-label: 0.14em;      /* UPPERCASE mono labels                     */
}

/* ---------------------------------------------------------------------------
   Base element typography. Utility classes (.display, .h1 … .eyebrow) let
   markup pick a scale step without being locked to a heading level.
   --------------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display,
.h1, .h2, .h3 {
  font-family: var(--font-display);
  text-wrap: balance;            /* tidy ragged lines on headings             */
  overflow-wrap: break-word;     /* never let a long word overflow            */
}

.display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  /* No hyphenation — words wrap whole, never split with a hyphen.
     break-word stays only as a last-resort guard against viewport overflow
     on the very narrowest phones. */
  hyphens: none;
  overflow-wrap: break-word;
}

.h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}

.h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
}

.h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
}

.body { font-size: var(--fs-body); line-height: var(--lh-body); }

.caption {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Mono eyebrow / tag / label treatment: UPPERCASE + 0.14em tracking. */
.eyebrow,
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: var(--lh-label);
  color: var(--text-secondary);
}