/* ============================================================
   MYKIN · TYPOGRAPHY
   Two voices: an editorial serif (Newsreader) carrying authority
   and long-form knowledge, and a premium grotesk (Hanken Grotesk)
   for UI, labels and product copy. IBM Plex Mono for scientific data.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --font-sans:  "Hanken Grotesk", "Hanken Grotesk Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Semantic family roles */
  --font-display:  var(--font-serif);  /* hero & section headings */
  --font-heading:  var(--font-serif);  /* article / product headings */
  --font-body:     var(--font-sans);   /* default running UI text */
  --font-editorial:var(--font-serif);  /* KNOW long-form body */
  --font-label:    var(--font-sans);   /* eyebrows, buttons, tags */
  --font-data:     var(--font-mono);   /* lab values, taxonomy codes */

  /* ---- Weights ---- */
  --fw-regular: 400;  /* @kind other */
  --fw-medium:  500;  /* @kind other */
  --fw-semibold:600;  /* @kind other */
  --fw-bold:    700;  /* @kind other */
  --fw-extra:   800;  /* @kind other */

  /* ---- Type scale (px in rem, 1rem = 16px) ---- */
  --text-2xs:  0.6875rem;  /* 11 — micro labels */
  --text-xs:   0.75rem;    /* 12 — eyebrows, captions */
  --text-sm:   0.875rem;   /* 14 — meta, secondary */
  --text-base: 1rem;       /* 16 — body */
  --text-md:   1.125rem;   /* 18 — lead UI body */
  --text-lg:   1.375rem;   /* 22 — small headings */
  --text-xl:   1.75rem;    /* 28 — card / sub headings */
  --text-2xl:  2.25rem;    /* 36 — section headings */
  --text-3xl:  3rem;       /* 48 — page titles */
  --text-4xl:  4rem;       /* 64 — hero */
  --text-5xl:  5.5rem;     /* 88 — display / editorial cover */

  /* ---- Line heights ---- */
  --leading-tight:   1.04;
  --leading-snug:    1.18;
  --leading-heading: 1.22;
  --leading-normal:  1.5;
  --leading-relaxed: 1.68;  /* editorial long-form */

  /* ---- Tracking ---- */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.012em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* eyebrows, tagline lockups */
  --tracking-widest:  0.22em;   /* MUSHROOM INSIGHTS-style labels */
}

/* ---- Optional helper classes (consumers may use tokens directly) ---- */
.mk-display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.mk-h1 { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-3xl); line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); }
.mk-h2 { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-2xl); line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); }
.mk-h3 { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-xl); line-height: var(--leading-snug); }
.mk-eyebrow {
  font-family: var(--font-label);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}
.mk-lead { font-family: var(--font-editorial); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.mk-body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); }
.mk-prose { font-family: var(--font-editorial); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-primary); }
.mk-data { font-family: var(--font-data); font-size: var(--text-sm); letter-spacing: var(--tracking-normal); }