:root {
  --page-bg: var(--background-neutral);
  --page-color: var(--text-neutral);

  font-family: "InterVariable", sans-serif;
  font-feature-settings:
    "liga" 1,
    "calt" 1;
  font-optical-sizing: auto;
  font-size: 1em;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  color: var(--page-color);
}

html {
  background-color: var(--page-bg);
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;

  &:has(.mobile-nav:not([inert])) {
    overflow: hidden;
  }

  &.overlay-page {
    --page-bg: var(--background-secondary-soft);
  }
}

main {
  hyphens: auto;
}

@layer reset {
  *:focus-visible {
    --outline-color: currentcolor;
    outline: var(--border-xs) solid var(--outline-color);
    outline-offset: 0.25em;
  }
}