/* Self-hosted typography: Open Sans throughout the landing, Inter in cabinet demos. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter/InterVariable.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/open-sans/OpenSans-Variable.woff2') format('woff2');
}

:root {
  --site-font-sans: 'Open Sans', 'Inter', Arial, sans-serif;
  --site-font-heading: var(--site-font-sans);
  --site-font-ui: 'Inter', Arial, sans-serif;
  --bs-font-sans-serif: var(--site-font-sans);
  --bs-body-font-family: var(--site-font-sans);
  --bs-font-monospace: var(--site-font-sans);
}

html {
  font-synthesis: none;
  font-optical-sizing: auto;
  font-feature-settings: 'liga' 1, 'calt' 1;
}

body, button, input, select, textarea {
  font-family: var(--site-font-sans);
}

h1, h2, h3, h4, h5, h6, .rules-panel-head strong {
  font-family: var(--site-font-heading);
}

/* Cabinet demos keep Inter in every section, including their controls. */
.ap-window,
.ap-window :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea),
.ap-window .mono {
  font-family: var(--site-font-ui);
}

.mono {
  font-family: var(--site-font-sans);
  font-variant-numeric: tabular-nums;
}