/*
 * Local typography experiment.
 * Enable: index.html?typography=sans
 * Disable: remove the typography query parameter.
 */

:root[data-typography="sans"] {
  --preview-font-sans: "Manrope", "Inter", "Avenir Next", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --preview-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
}

:root[data-typography="sans"] body,
:root[data-typography="sans"] body *:not(code):not(pre) {
  font-family: var(--preview-font-sans);
}

:root[data-typography="sans"] h1,
:root[data-typography="sans"] h2 {
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.052em;
}

:root[data-typography="sans"] h3 {
  font-weight: 650;
  letter-spacing: -0.022em;
}

:root[data-typography="sans"] .situation-example p {
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.025em;
}

:root[data-typography="sans"] .hero-facts strong,
:root[data-typography="sans"] .card-number,
:root[data-typography="sans"] .process-index,
:root[data-typography="sans"] .knowledge-grid span,
:root[data-typography="sans"] .control-grid article > span,
:root[data-typography="sans"] .service-list article > span,
:root[data-typography="sans"] .launch-fact strong,
:root[data-typography="sans"] .price strong,
:root[data-typography="sans"] .not-found-panel > strong {
  font-weight: 700;
  letter-spacing: -0.035em;
}

:root[data-typography="sans"] code,
:root[data-typography="sans"] pre {
  font-family: var(--preview-font-mono);
}