/* ============================================================
   Sail — Typography tokens
   Manrope = display / headlines.  Poppins = UI + body.
   Scale and weights mirror the product (14px base UI text,
   Poppins Medium is the workhorse weight).
   ============================================================ */
:root {
  /* Families */
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Type scale (px) */
  --text-xs:   12px;
  --text-sm:   14px;   /* base UI text */
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;
  --text-5xl:  40px;
  --text-6xl:  48px;
  --text-display: 64px;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
}

/* ---- Specimen helper classes (used by cards & kits) ----------- */
.sail-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.sail-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.sail-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: var(--leading-snug); color: var(--text-primary); }
.sail-h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--text-primary); }
.sail-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.sail-body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.sail-label { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-primary); }
.sail-eyebrow { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); }