/* Sapien — Typography tokens
   One family does almost all the work: Helvetica Now Display, mostly Bold.
   Monospace is reserved for micro-labels (steps, indices, eyebrows).
   Display headings track tight (-0.02em); labels track open (+0.02em). */

:root {
  /* ---- Families -------------------------------------------------- */
  --sp-font-display: "Helvetica Now Display", "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sp-font-sans:    "Helvetica Now Display", "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sp-font-ui:      "Inter", "Helvetica Now Display", "Arimo", sans-serif;
  --sp-font-mono:    "Spline Sans Mono", "Suisse Int'l Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

  /* ---- Type scale (desktop, px) ---------------------------------- */
  --sp-text-display: 90px;  /* stat numerals                          */
  --sp-text-h1: 84px;
  --sp-text-h2: 48px;
  --sp-text-h3: 32px;
  --sp-text-h4: 22px;
  --sp-text-h5: 17px;
  --sp-text-body: 15px;
  --sp-text-sm: 14px;
  --sp-text-xs: 13px;
  --sp-text-label: 14px;   /* mono micro-label                        */

  /* ---- Line heights ---------------------------------------------- */
  --sp-leading-tight: 1.1;   /* display + H1/H2                       */
  --sp-leading-snug: 1.2;
  --sp-leading-normal: 1.33; /* body, buttons                        */

  /* ---- Tracking -------------------------------------------------- */
  --sp-track-tight: -0.02em; /* large display headings               */
  --sp-track-normal: 0em;
  --sp-track-label: 0.02em;  /* mono labels, button text             */
  --sp-track-wide: 0.03em;
}

/* ---- Reusable type classes (optional helpers) ------------------- */
.sp-h1 { font-family: var(--sp-font-display); font-weight: var(--sp-weight-bold); font-size: var(--sp-text-h1); line-height: var(--sp-leading-tight); letter-spacing: var(--sp-track-tight); }
.sp-h2 { font-family: var(--sp-font-display); font-weight: var(--sp-weight-bold); font-size: var(--sp-text-h2); line-height: var(--sp-leading-tight); letter-spacing: var(--sp-track-tight); }
.sp-h3 { font-family: var(--sp-font-display); font-weight: var(--sp-weight-bold); font-size: var(--sp-text-h3); line-height: var(--sp-leading-snug); letter-spacing: var(--sp-track-tight); }
.sp-h4 { font-family: var(--sp-font-display); font-weight: var(--sp-weight-bold); font-size: var(--sp-text-h4); line-height: var(--sp-leading-snug); }
.sp-body { font-family: var(--sp-font-sans); font-weight: var(--sp-weight-medium); font-size: var(--sp-text-body); line-height: var(--sp-leading-normal); color: var(--sp-text-muted); }
.sp-label { font-family: var(--sp-font-mono); font-weight: var(--sp-weight-regular); font-size: var(--sp-text-label); letter-spacing: var(--sp-track-label); }