@font-face {
  font-family: "Saira";
  src: url("../fonts/saira/Saira-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --app-font-saira: "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html:not([data-bs-theme-font]),
html[data-bs-theme-font="saira"] {
  --tblr-body-font-family: var(--app-font-saira);
  --tblr-body-font-face: var(--app-font-saira);
}

html[data-bs-theme-font="sans-serif"] {
  --tblr-body-font-family: var(--tblr-font-sans-serif);
  --tblr-body-font-face: var(--tblr-font-sans-serif);
}

html[data-bs-theme-font="serif"] {
  --tblr-body-font-family: var(--tblr-font-serif);
  --tblr-body-font-face: var(--tblr-font-serif);
}

html[data-bs-theme-font="monospace"] {
  --tblr-body-font-family: var(--tblr-font-monospace);
  --tblr-body-font-face: var(--tblr-font-monospace);
  --tblr-body-font-size: 80%;
}

html[data-bs-theme-font="comic"] {
  --tblr-body-font-family: var(--tblr-font-comic);
  --tblr-body-font-face: var(--tblr-font-comic);
}