/* Shared type roles for the static homepage and React pages.
   Use role tokens, not new page-specific pixel sizes. Diagram internals are separate. */
:root {
  --font-body: "DM Sans", Arial, sans-serif;
  --type-body: 1.125rem;
  --type-compact: 1rem;
  --type-meta: .875rem;
  --type-label: .8125rem;
  --type-control: 1rem;
  --type-lead: 1.25rem;
  --type-article: 1.25rem;
  --type-h1: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  --type-h2: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --type-h3: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --type-article-h2: clamp(1.75rem, 1.5rem + .75vw, 2.25rem);
  --type-display: clamp(2.75rem, 1.5rem + 4vw, 5.5rem);
  --leading-body: 1.65;
  --leading-heading: 1.12;
}
@media (max-width: 700px) {
  :root { --type-body: 1.0625rem; --type-lead: 1.125rem; --type-article: 1.125rem; }
}