/* ============================================================
   Build Know How — Typography
   Serif headlines (Newsreader) carry calm authority.
   Grotesque (Hanken) does the working text & UI.
   Mono (IBM Plex Mono) is analytical metadata, never decoration.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', 'SF Mono', ui-monospace, Menlo, monospace;

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

  /* ---- Type scale (1.250 major-third, rem) ---- */
  --text-2xs: 0.6875rem; /* 11px — mono micro labels */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-base:1rem;      /* 16px */
  --text-md:  1.125rem;  /* 18px */
  --text-lg:  1.375rem;  /* 22px */
  --text-xl:  1.75rem;   /* 28px */
  --text-2xl: 2.25rem;   /* 36px */
  --text-3xl: 2.9375rem; /* 47px */
  --text-4xl: 3.75rem;   /* 60px */
  --text-5xl: 4.75rem;   /* 76px */

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

  /* ---- Tracking ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.14em; /* eyebrows / overlines */

  /* ---- Semantic roles ---- */
  --display-font:   var(--font-serif);
  --display-weight: var(--w-500, 500);
  --heading-font:   var(--font-serif);
  --body-font:      var(--font-sans);
  --label-font:     var(--font-sans);
  --eyebrow-font:   var(--font-mono);
}

/* ---- Optional ready-made text classes (used by cards & kits) ---- */
.bkh-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-accent);
}
.bkh-display {
  font-family: var(--font-serif);
  font-weight: var(--w-medium);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.bkh-h1 {
  font-family: var(--font-serif);
  font-weight: var(--w-medium);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.bkh-h2 {
  font-family: var(--font-serif);
  font-weight: var(--w-medium);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.bkh-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--text-strong);
}
.bkh-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.bkh-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}