:root {
  /* Desktop scale */
  --display-family: var(--font-display); --display-size: 64px; --display-line: 68px; --display-weight: 700; --display-tracking: -1.5px;
  --h1-family: var(--font-display); --h1-size: 48px; --h1-line: 56px; --h1-weight: 600; --h1-tracking: -1px;
  --h2-family: var(--font-display); --h2-size: 34px; --h2-line: 42px; --h2-weight: 600; --h2-tracking: -0.4px;
  --h3-family: var(--font-display); --h3-size: 24px; --h3-line: 32px; --h3-weight: 500; --h3-tracking: 0px;
  --body-l-size: 18px; --body-l-line: 30px;
  --body-size: 16px; --body-line: 28px;
  --small-size: 14px; --small-line: 22px;
  --spec-size: 12px; --spec-line: 18px; --spec-weight: 500; --spec-tracking: 2px;

  /* Mobile scale */
  --display-size-mobile: 40px; --display-line-mobile: 44px;
  --h1-size-mobile: 32px; --h1-line-mobile: 40px;
  --h2-size-mobile: 26px; --h2-line-mobile: 34px;
  --h3-size-mobile: 20px; --h3-line-mobile: 28px;
  --body-line-mobile: 26px;

  --measure: 70ch;
}

/* Utility text styles — optional, mirror the named styles exactly */
.bt-display { font-family: var(--display-family); font-size: var(--display-size); line-height: var(--display-line); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); color: var(--text-heading); margin: 0 }
.bt-h1 { font-family: var(--h1-family); font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); letter-spacing: var(--h1-tracking); color: var(--text-heading); margin: 0 }
.bt-h2 { font-family: var(--h2-family); font-size: var(--h2-size); line-height: var(--h2-line); font-weight: var(--h2-weight); letter-spacing: var(--h2-tracking); color: var(--text-heading); margin: 0 }
.bt-h3 { font-family: var(--h3-family); font-size: var(--h3-size); line-height: var(--h3-line); font-weight: var(--h3-weight); color: var(--text-heading); margin: 0 }
.bt-body-l { font-family: var(--font-body); font-size: var(--body-l-size); line-height: var(--body-l-line); color: var(--text-body); margin: 0 }
.bt-body { font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-line); color: var(--text-body); margin: 0 }
.bt-small { font-family: var(--font-body); font-size: var(--small-size); line-height: var(--small-line); color: var(--text-secondary); margin: 0 }
.bt-spec { font-family: var(--font-mono); font-size: var(--spec-size); line-height: var(--spec-line); font-weight: var(--spec-weight); letter-spacing: var(--spec-tracking); text-transform: uppercase; margin: 0 }

@media (max-width: 640px) {
  .bt-display { font-size: var(--display-size-mobile); line-height: var(--display-line-mobile) }
  .bt-h1 { font-size: var(--h1-size-mobile); line-height: var(--h1-line-mobile) }
  .bt-h2 { font-size: var(--h2-size-mobile); line-height: var(--h2-line-mobile) }
  .bt-h3 { font-size: var(--h3-size-mobile); line-height: var(--h3-line-mobile) }
  .bt-body, .bt-body-l { font-size: var(--body-size); line-height: var(--body-line-mobile) }
}