/* ============================================================
   TYPOGRAPHY
   Display serif: Instrument Serif (editorial, big moments)
   Body sans:     Hanken Grotesk (UI + reading)
   Mono:          JetBrains Mono (labels, metadata, code)
   ============================================================ */

:root {
  /* Families */
  --font-serif: "Instrument Serif", "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid display sizes (serif) — clamp(min, vw, max) */
  --display-2xl: clamp(3.5rem, 8vw, 7rem);      /* @kind font */
  --display-xl:  clamp(2.75rem, 5.5vw, 4.75rem); /* @kind font */
  --display-lg:  clamp(2.25rem, 4vw, 3.5rem);   /* @kind font */
  --display-md:  clamp(1.875rem, 3vw, 2.5rem);  /* @kind font */
  --display-sm:  clamp(1.5rem, 2.2vw, 1.875rem); /* @kind font */

  /* Body / UI sizes (sans) */
  --text-xl:   1.375rem;   /* @kind font */
  --text-lg:   1.125rem;   /* @kind font */
  --text-base: 1rem;       /* @kind font */
  --text-sm:   0.875rem;   /* @kind font */
  --text-xs:   0.75rem;    /* @kind font */

  /* Eyebrow / label (mono, tracked) */
  --label-size: 0.72rem;      /* @kind font */
  --label-tracking: 0.16em;   /* @kind font */

  /* Weights */
  --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 */

  /* Line heights */
  --lh-tight: 1.04;    /* @kind font */
  --lh-snug:  1.2;     /* @kind font */
  --lh-normal:1.55;    /* @kind font */
  --lh-loose: 1.7;     /* @kind font */

  /* Letter spacing */
  --ls-tight: -0.02em;  /* @kind font */
  --ls-normal: 0;       /* @kind font */
  --ls-wide: 0.02em;    /* @kind font */
}

/* ---- Reusable type classes (optional convenience) ---- */
.ds-display {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}
.ds-lead {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}