/* ============================================================
   TYPOGRAPHY — Poppins everywhere; JetBrains Mono for data
   ============================================================ */
:root {
  /* Families */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains 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-black:    800; /* @kind font */

  /* Type scale — px-based, modular ~1.25.
     Display sizes intended for large surfaces (web hero, slides). */
  --fs-display-2xl: 76px;
  --fs-display-xl:  60px;
  --fs-display-lg:  48px;
  --fs-h1: 39px;
  --fs-h2: 31px;
  --fs-h3: 25px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro:   11px;

  /* Line heights */
  --lh-tight:   1.04; /* @kind font */
  --lh-snug:    1.18; /* @kind font */
  --lh-heading: 1.25; /* @kind font */
  --lh-body:    1.55; /* @kind font */
  --lh-relaxed: 1.7; /* @kind font */

  /* Letter spacing — Poppins headlines tighten slightly; eyebrows track wide */
  --ls-display:  -0.02em; /* @kind font */
  --ls-heading:  -0.01em; /* @kind font */
  --ls-body:      0em; /* @kind font */
  --ls-eyebrow:   0.14em;  /* @kind font */
  --ls-wordmark:  0.02em; /* @kind font */
}

/* ---- Optional utility classes (semantic specimens) ---- */
.sl-display-2xl { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.sl-display-xl  { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-xl);  line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.sl-display-lg  { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-lg);  line-height: var(--lh-snug);  letter-spacing: var(--ls-display); }
.sl-h1 { font-family: var(--font-display); font-weight: var(--fw-bold);     font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.sl-h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.sl-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-heading); }
.sl-h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-snug); }
.sl-body-lg { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.sl-body    { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body);    line-height: var(--lh-body); }
.sl-body-sm { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.sl-eyebrow { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-caption); line-height: 1; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.sl-mono    { font-family: var(--font-mono); font-weight: var(--fw-medium); font-size: var(--fs-body-sm); }