:root {
  color-scheme: light dark;
}

html {
  background-color: var(--sl-color-neutral-0);
  color: var(--sl-color-neutral-900);
  font-family: var(--sl-font-sans);
}

body {
  min-width: 390px;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--sl-color-neutral-1000);
}

p {
  color: var(--sl-color-neutral-800);
}

/* 
  Purpose: Prevent background scrolling when the mobile menu is open.
  This makes the open menu behave like a modal overlay.
*/
body.menu-open {
  overflow: hidden;
}