Theme-ui: Apply `styles.root` on every element or the root `html` element

[kripod]

Is your feature request related to a problem? Please describe.
Currently, everything passed to styles.root gets applied on body. When trying to define a global style like below, it generates a body and body h1 selector instead of * and h1, respectively:

// theme.js
export default {
  styles: {
    root: {
      fontFamily: "'Inter', system-ui, sans-serif",
      h1: { fontSize: '3rem' }
    }
  }
};

Results in:

body {
  font-family: 'Inter', system-ui, sans-serif;
}

body h1 {
  fontSize: 3rem;
}

Describe the solution you'd like
Instead of the code above, the following should be generated:

* {
  font-family: 'Inter', system-ui, sans-serif;
}

h1 {
  fontSize: 3rem;
}

When the body selector is desired, it should be nested under styles.root:

// theme.js
export default {
  styles: {
    root: {
      body: {
        h1: { fontSize: '3rem' } // Results in a `body.h1` selector
      }
    }
  }
};

Describe alternatives you've considered
As an alternative. an html selector could be generated instead of *.

[jxnblk]

The theme.styles.root is only intended to style the body element, and I would recommend avoiding child selectors in Theme UI as much as possible. If you want to add other global styles, you can use Emotion's Global component, which will still have access to the Theme UI theming context

[kripod]

Thank you for the advice! I think this should be stated with more emphasis in the documentation.