/* ============================================================
   Stacks / Ryone — Typography tokens
   Display family: DM Sans (Bold) — headlines, buttons, numerals.
   Text family:    Poppins (400/500/600/700) — body & UI.
   ============================================================ */
:root {
  --font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

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

  /* ---- Display scale (DM Sans Bold, tight tracking) ---- */
  --text-hero-size: 64px;   --text-hero-lh: 64px;   --text-hero-ls: -0.02em;
  --text-h1-size: 48px;     --text-h1-lh: 56px;     --text-h1-ls: -0.02em;
  --text-h2-size: 40px;     --text-h2-lh: 48px;     --text-h2-ls: -0.02em;
  --text-h3-size: 32px;     --text-h3-lh: 40px;     --text-h3-ls: -0.01em;
  --text-h4-size: 24px;     --text-h4-lh: 32px;     --text-h4-ls: -0.01em;

  /* ---- Body scale (Poppins) ---- */
  --text-body-xl-size: 24px;  --text-body-xl-lh: 34px;  /* large lead paragraphs */
  --text-body-l-size: 16px;   --text-body-l-lh: 24px;   /* default UI / paragraph */
  --text-body-size: 14px;     --text-body-lh: 24px;     /* most readable body */
  --text-caption-size: 12px;  --text-caption-lh: 20px;  /* meta, fine print */

  /* ---- Hairline (Poppins Bold, uppercase, wide tracking) ---- */
  --text-hairline-l-size: 16px; --text-hairline-l-ls: 0.08em;
  --text-hairline-s-size: 12px; --text-hairline-s-ls: 0.08em;

  /* ---- Button label (DM Sans Bold) ---- */
  --text-button-size: 16px;   --text-button-lh: 16px;
  --text-button-s-size: 14px; --text-button-s-lh: 16px;
}

/* ---- Optional ready-made text classes (mirror the tokens) ---- */
.t-hero { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-hero-size); line-height: var(--text-hero-lh); letter-spacing: var(--text-hero-ls); }
.t-h1 { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-h1-size); line-height: var(--text-h1-lh); letter-spacing: var(--text-h1-ls); }
.t-h2 { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-h2-size); line-height: var(--text-h2-lh); letter-spacing: var(--text-h2-ls); }
.t-h3 { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-h3-size); line-height: var(--text-h3-lh); letter-spacing: var(--text-h3-ls); }
.t-h4 { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-h4-size); line-height: var(--text-h4-lh); letter-spacing: var(--text-h4-ls); }
.t-body-xl { font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--text-body-xl-size); line-height: var(--text-body-xl-lh); }
.t-body-l { font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--text-body-l-size); line-height: var(--text-body-l-lh); }
.t-body { font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.t-body-bold { font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.t-caption { font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--text-caption-size); line-height: var(--text-caption-lh); }
.t-caption-bold { font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: var(--text-caption-size); line-height: var(--text-caption-lh); }
.t-hairline-l { font-family: var(--font-body); font-weight: var(--fw-bold);
  font-size: var(--text-hairline-l-size); letter-spacing: var(--text-hairline-l-ls); text-transform: uppercase; }
.t-hairline-s { font-family: var(--font-body); font-weight: var(--fw-bold);
  font-size: var(--text-hairline-s-size); letter-spacing: var(--text-hairline-s-ls); text-transform: uppercase; }