@layer base {
  /*********************
  * HTML and Body *
  * We don't set a default typography size here because it's better for the user to set it in the root of the project.
  *********************/
  html {
    font-family: system-ui, sans-serif;
    line-height: var(--leading, 1.5);
    font-variant-ligatures: common-ligatures;
  }

  body {
    color: var(--text-color);
    background-color: var(--bg-color);
    text-rendering: optimizelegibility;
  }

  /*********************
  * Nicer Headers *
  *********************/
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-variant-numeric: oldstyle-nums proportional-nums;
  }

  pre {
    padding: 1em;
    border-radius: var(--radius);
  }

  code {
    font-size: 0.8em;

    :not(pre) > & {
      display: inline;
      padding: 0.2em 0.25em;
      border-radius: var(--radius);
    }

    pre > & {
      background-color: transparent;
    }
  }
}