/* ============================================================
   TYPOGRAPHY TOKENS
   Geometric sans for everything narrative (400/500/600 only —
   never 700). Mono for the technical layer only.
   Negative tracking is part of the voice. Headlines are
   sentence-case and often period-terminated.
   ============================================================ */
:root {
  /* Display — weight 600, aggressive negative tracking */
  --type-display-xl-size: 48px;
  --type-display-xl-line: 48px;
  --type-display-xl-weight: 600;
  --type-display-xl-tracking: -2.4px;

  --type-display-lg-size: 32px;
  --type-display-lg-line: 40px;
  --type-display-lg-weight: 600;
  --type-display-lg-tracking: -1.28px;

  --type-display-md-size: 24px;
  --type-display-md-line: 32px;
  --type-display-md-weight: 600;
  --type-display-md-tracking: -0.96px;

  --type-display-sm-size: 20px;
  --type-display-sm-line: 28px;
  --type-display-sm-weight: 600;
  --type-display-sm-tracking: -0.6px;

  /* Body — weight 400 / 500, neutral tracking */
  --type-body-lg-size: 18px;
  --type-body-lg-line: 28px;
  --type-body-md-size: 16px;
  --type-body-md-line: 24px;
  --type-body-sm-size: 14px;
  --type-body-sm-line: 20px;
  --type-body-sm-tracking: -0.28px;

  /* Caption + mono technical layer */
  --type-caption-size: 12px;
  --type-caption-line: 16px;
  --type-code-size: 13px;
  --type-code-line: 20px;

  /* Buttons */
  --type-button-md-size: 14px;
  --type-button-md-line: 20px;
  --type-button-lg-size: 16px;
  --type-button-lg-line: 24px;
  --type-button-weight: 500;
}

/* ---- Convenience composite classes ---- */
.ds-display-xl {
  font-family: var(--font-sans);
  font-weight: var(--type-display-xl-weight);
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-line);
  letter-spacing: var(--type-display-xl-tracking);
  font-feature-settings: var(--font-feature-geometric);
}
.ds-display-lg {
  font-family: var(--font-sans);
  font-weight: var(--type-display-lg-weight);
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-line);
  letter-spacing: var(--type-display-lg-tracking);
}
.ds-display-md {
  font-family: var(--font-sans);
  font-weight: var(--type-display-md-weight);
  font-size: var(--type-display-md-size);
  line-height: var(--type-display-md-line);
  letter-spacing: var(--type-display-md-tracking);
}
.ds-display-sm {
  font-family: var(--font-sans);
  font-weight: var(--type-display-sm-weight);
  font-size: var(--type-display-sm-size);
  line-height: var(--type-display-sm-line);
  letter-spacing: var(--type-display-sm-tracking);
}
.ds-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
}
.ds-body-md {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
}
.ds-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  letter-spacing: var(--type-body-sm-tracking);
}
.ds-caption-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}
.ds-code {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--type-code-size);
  line-height: var(--type-code-line);
}