/* One responsive type scale for marketing, public React pages and the app.
   Relative units preserve browser font preferences and text zoom. */
:root {
  font-size:125%;
  --insitu-type-title:2rem;
  --insitu-type-section:var(--insitu-type-title);
  --insitu-type-subtitle:1.5rem;
  --insitu-type-card:1.5rem;
  --insitu-type-support:1.125rem;
  --insitu-type-body:1rem;
  --insitu-type-control:1rem;
  --insitu-type-label:.9rem;
  --insitu-type-caption:.85rem;
  --insitu-leading-title:1.1;
  --insitu-leading-body:1.55;
  --insitu-leading-control:1.4;
}

@media(min-width:768px) {
  :root {
    font-size:143.75%;
    --insitu-type-title:2.8rem;
    --insitu-type-subtitle:1.6rem;
    --insitu-type-card:1.6rem;
    --insitu-type-support:1.2rem;
    --insitu-type-body:1.05rem;
    --insitu-type-control:1rem;
    --insitu-type-label:.95rem;
    --insitu-type-caption:.85rem;
  }
}

@media(min-width:1920px) {
  :root {
    font-size:156.25%;
    --insitu-type-title:3.2rem;
    --insitu-type-subtitle:1.8rem;
    --insitu-type-card:1.8rem;
    --insitu-type-support:1.3rem;
    --insitu-type-body:1.1rem;
    --insitu-type-control:1.1rem;
    --insitu-type-label:1rem;
    --insitu-type-caption:.9rem;
  }
}