/* Spin Haus — Typography
   Type roles from the brand guidelines hierarchy (p.10–13):
   H1/H2  Imbue Regular          (page titles, tracking -10/1000em)
   H3     Libre Caslon Cond. Ital (headings, tracking -25/1000em)
   H4     Syne SemiBold           (feature text, captions)
   Body   Syne Regular            (paragraph text, tracking 0) */

:root {
  /* ---- Font families ---- */
  --font-display: "Imbue", "Libre Caslon Condensed", Georgia, serif;
  --font-serif:   "Libre Caslon Condensed", Georgia, serif; /* always italic */
  --font-body:    "Syne", "Helvetica Neue", Arial, sans-serif;
  --font-util:    "PPGrafier", "Syne", Arial, sans-serif;

  /* ---- Tracking (from guidelines, thousandths of an em) ---- */
  --track-display: -0.010em;  /* Imbue -10  */
  --track-serif:   -0.025em;  /* Libre Caslon -25 */
  --track-body:    0em;       /* Syne 0 */
  --track-caps:    0.14em;    /* small caps / eyebrows */

  /* ---- Type scale (fluid-ish, px) ---- */
  --fs-display: 88px;   /* H1 hero */
  --fs-h1:      64px;
  --fs-h2:      44px;
  --fs-h3:      30px;   /* serif italic */
  --fs-h4:      20px;   /* Syne semibold */
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-caption: 12px;

  /* ---- Line heights ---- */
  --lh-display: 0.92; /* @kind other */
  --lh-heading: 1.05; /* @kind other */
  --lh-body:    1.55; /* @kind other */
  --lh-tight:   1.2;  /* @kind other */
}

/* ---- Optional utility classes consumers may use ---- */
.sh-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
}
.sh-serif {
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: var(--track-serif);
  line-height: var(--lh-heading);
}
.sh-body {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: var(--track-body);
  line-height: var(--lh-body);
}
.sh-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-size: var(--fs-caption);
}
