/* ============================================================
   Jan Homeyer — Typography
   One typeface: Lexend. The voice is the contrast between
   Black (900) display and ExtraLight (200) body — confident
   headlines, airy quiet text. Generous tracking on small caps
   labels; tight tracking on big display.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans:    "Lexend", "Lexend Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Lexend", "Lexend Variable", system-ui, sans-serif;
  /* No bundled mono — fall back to the platform mono for code/specs */
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --weight-extralight: 200;  /* signature body / large quiet text */
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;  /* UI labels, buttons               */
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-black:      900;  /* signature display                */

  /* ---- Type scale (fluid, editorial) ----
     Built on a ~1.25 ratio, clamped for responsive display.    */
  --text-2xs:   0.6875rem;  /* 11px — micro labels        */
  --text-xs:    0.75rem;    /* 12px — captions, meta      */
  --text-sm:    0.875rem;   /* 14px — secondary           */
  --text-base:  1rem;       /* 16px — body                */
  --text-md:    1.125rem;   /* 18px — lead body           */
  --text-lg:    1.375rem;   /* 22px                       */
  --text-xl:    1.75rem;    /* 28px                       */
  --text-2xl:   2.25rem;    /* 36px                       */
  --text-3xl:   2.75rem;    /* 44px — scales up below     */
  --text-4xl:   3.25rem;    /* 52px                       */
  --text-5xl:   3.75rem;    /* 60px — hero                */

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.08;   /* display                  */
  --leading-snug:    1.25;   /* headings                 */
  --leading-normal:  1.5;    /* body                     */
  --leading-relaxed: 1.7;    /* long-form quiet body     */

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.04em;  /* huge display           */
  --tracking-tight:   -0.02em;  /* headings               */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* small-caps labels      */
  --tracking-widest:  0.22em;   /* logotype / eyebrows    */

  /* ---- Semantic roles ---- */
  --type-display-weight: var(--weight-black);
  --type-body-weight:    var(--weight-extralight);
  --type-ui-weight:      var(--weight-medium);
}

/* Fluid display sizes — scale the large steps up on wider viewports
   (kept as breakpoints rather than clamp() so token values stay simple). */
@media (min-width: 768px) {
  :root {
    --text-3xl: 3.25rem; /* @kind font */
    --text-4xl: 4.25rem; /* @kind font */
    --text-5xl: 5.5rem;  /* @kind font */
  }
}
@media (min-width: 1200px) {
  :root {
    --text-3xl: 3.5rem;  /* @kind font */
    --text-4xl: 5rem;    /* @kind font */
    --text-5xl: 7.5rem;  /* @kind font */
  }
}

/* Optional helper classes (consumers may use the tokens directly) */
.jh-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.jh-display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.jh-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-extralight);
  line-height: var(--leading-relaxed);
}