/* ============================================================
   TYPOGRAPHY — Gonzalo Yokota
   Fraunces (headings) + Hanken Grotesk (body/UI), both self-hosted.
   Headings track −0.03em.
   ============================================================ */

:root {
  /* ---- FAMILIES ---- */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-base:    "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- FLUID SIZE SCALE (matches the live site) ---- */
  --fs-normal:   16px; /* @kind font */
  --fs-small:    clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.227), 1.125rem); /* @kind font */
  --fs-medium:   clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.455), 1.375rem); /* @kind font */
  --fs-large:    clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 2.045), 2.625rem); /* @kind font */
  --fs-x-large:  clamp(2rem, 2rem + ((1vw - 0.2rem) * 3.636), 4rem); /* @kind font */
  --fs-xx-large: clamp(3rem, 3rem + ((1vw - 0.2rem) * 4.091), 5.25rem); /* @kind font */
  --fs-huge:     42px; /* @kind font */

  /* ---- WEIGHTS ---- */
  --fw-thin: 100; /* @kind font */
  --fw-extra-light: 200; /* @kind font */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semi-bold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extra-bold: 800; /* @kind font */
  --fw-black: 900; /* @kind font */

  /* ---- LINE HEIGHTS ---- */
  --lh-one: 1; /* @kind other */
  --lh-tiny: 1.1; /* @kind other */
  --lh-small: 1.25; /* @kind other */
  --lh-medium: 1.4; /* @kind other */
  --lh-normal: 1.6; /* @kind other */
  --lh-large: 2; /* @kind other */

  /* ---- TRACKING ---- */
  --tracking-heading: -0.03em; /* @kind other */
  --tracking-eyebrow: 0.14em; /* @kind other */
  --tracking-label:   0.1em; /* @kind other */

  /* ---- SEMANTIC TYPE ALIASES ---- */
  --text-display:  var(--fs-xx-large); /* @kind font */
  --text-title:    var(--fs-x-large); /* @kind font */
  --text-heading:  var(--fs-large); /* @kind font */
  --text-lead:     var(--fs-medium); /* @kind font */
  --text-body-sz:  var(--fs-small); /* @kind font */
}