/* ============================================================
   VSI · TYPOGRAPHY
   Display = Bricolage Grotesque · Serif = Newsreader
   Body/UI = Public Sans · Mono/eyebrow = Space Mono
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif;
  --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

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

  /* Type scale (fluid-ish, px) */
  --fs-display-xl: 76px;  /* hero */
  --fs-display-l:  56px;
  --fs-display-m:  42px;
  --fs-h1: 34px;
  --fs-h2: 27px;
  --fs-h3: 21px;
  --fs-body-lg: 19px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;   /* mono, tracked */

  /* Line heights */
  --lh-tight:  1.05;    /* @kind font */
  --lh-snug:   1.18;    /* @kind font */
  --lh-normal: 1.45;    /* @kind font */
  --lh-relaxed: 1.65;   /* @kind font */

  /* Tracking */
  --ls-tight: -0.02em;  /* @kind font */
  --ls-normal: 0;       /* @kind font */
  --ls-eyebrow: 0.18em; /* @kind font */
  --ls-caps: 0.06em;    /* @kind font */
}

/* Convenience utility roles (optional helpers for cards/kits) */
.vsi-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
}
.vsi-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.vsi-serif-quote {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--text-strong);
}