/* ============================================================
   TYPOGRAPHY
   Display: DM Serif Display (high-contrast editorial display serif,
            expressive italics) — headlines & quotes.
   Sans:    Hanken Grotesk (friendly modern grotesque) — UI & body.
   Mono:    Space Mono — eyebrows, tags, metadata (designer touch).
   ============================================================ */
:root {
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---- Type scale (rem, 16px base) ---- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.8125rem; /* 13 */
  --text-base: 0.9375rem; /* 15 — UI default */
  --text-md:   1rem;      /* 16 — reading body */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  4rem;      /* 64 */
  --text-6xl:  5.25rem;   /* 84 */
  --text-7xl:  6.75rem;   /* 108 — hero / cover */

  /* ---- Line heights ---- */
  --leading-none: 1;
  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.012em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-label: 0.16em; /* mono eyebrows / overlines */

  /* ============================================================
     ROLE TOKENS — semantic text styles (font + size + leading)
     ============================================================ */
  /* Display serif */
  --display-font: var(--font-display);
  --display-weight: 400;
  --display-leading: var(--leading-tight);
  --display-tracking: var(--tracking-tight);

  /* Eyebrow / overline */
  --eyebrow-font: var(--font-mono);
  --eyebrow-size: var(--text-xs);
  --eyebrow-weight: 400;
  --eyebrow-tracking: var(--tracking-label);
}

/* Optical sizing kept on for any variable serif fallback */
:root {
  font-optical-sizing: auto;
}