/* ============================================================
   doslovno.by — Typography tokens
   Display = Satoshi (700/900), Body/UI = Inter (400/500/600).
   Scale mirrors the Wise specimen — proven for hero + long-form.
   ============================================================ */
:root {
  --font-display: "Satoshi", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

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

  /* ---- Type scale: size / line-height ---- */
  --display-xl-size: 64px;   --display-xl-lh: 64px;   --display-xl-weight: 900;
  --display-md-size: 40px;   --display-md-lh: 44px;   --display-md-weight: 900;
  --display-sm-size: 32px;   --display-sm-lh: 38px;   --display-sm-weight: 600;
  --display-xs-size: 24px;   --display-xs-lh: 31px;   --display-xs-weight: 600;

  --body-lg-size: 20px;      --body-lg-lh: 30px;      --body-lg-weight: 400;
  --body-md-size: 16px;      --body-md-lh: 24px;      --body-md-weight: 400;
  --body-sm-size: 14px;      --body-sm-lh: 20px;      --body-sm-weight: 400;
  --caption-size: 12px;      --caption-lh: 16px;      --caption-weight: 400;

  --tracking-tight: -0.02em;  /* display */
  --tracking-normal: 0;
}

/* Optional helper classes — components mostly use the vars directly. */
.t-display-xl { font-family: var(--font-display); font-size: var(--display-xl-size); line-height: var(--display-xl-lh); font-weight: var(--display-xl-weight); letter-spacing: var(--tracking-tight); }
.t-display-md { font-family: var(--font-display); font-size: var(--display-md-size); line-height: var(--display-md-lh); font-weight: var(--display-md-weight); letter-spacing: var(--tracking-tight); }
.t-display-sm { font-family: var(--font-display); font-size: var(--display-sm-size); line-height: var(--display-sm-lh); font-weight: var(--display-sm-weight); }
.t-display-xs { font-family: var(--font-display); font-size: var(--display-xs-size); line-height: var(--display-xs-lh); font-weight: var(--display-xs-weight); }
.t-body-lg { font-family: var(--font-body); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); }
.t-body-md { font-family: var(--font-body); font-size: var(--body-md-size); line-height: var(--body-md-lh); }
.t-body-sm { font-family: var(--font-body); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); }
.t-caption { font-family: var(--font-body); font-size: var(--caption-size); line-height: var(--caption-lh); }

/* Mobile: shrink hero display. */
@media (max-width: 640px) {
  :root { --display-xl-size: 40px; --display-xl-lh: 42px; --display-md-size: 30px; --display-md-lh: 34px; }
}