Jetpack: Various CSS enhancements originating from the Base Styles package

### The Issue

Various improvements can be made to how CSS variables / selectors are added and used throughout Jetpack. For this specific issue, the suggestions are based on CSS that currently exists in the Base Styles package.

### Suggested Changes

The suggestions were made in this PR comment - pasting them in below as is: https://github.com/Automattic/jetpack/pull/28024#issuecomment-1362130569

> 1. Separate CSS colour variables into their own file. That way they can be imported only where they are needed without pulling in extra CSS, e.g. in https://github.com/Automattic/jetpack/pull/28039 which depends on a single colour variable only.
> 2. Separate Sass mixins into their own file; same as above, then one can import only mixins if only those are needed.
> 3. Find if CSS rules affecting body tag directly can be removed, or if those rules should moved into CSS selector unique to Jetpack. If they're needed in multiple places, consider turning it into mixin.
> 4. Move rest of the CSS selectors (jp-wrap etc) to their own file, or directly be with JS component or somewhere where its clear where they are used, what they do, and only get imported when meant to be imported.
> 5. Further down the road I suggest exploring use of `@use` as it avoids loading e.g. colour variables multiple times, and ensures they get loaded just once. Improves devex and performance. :-)

Start by reviewing the CSS in the Base Styles package and the referenced comment in PR #28024. Map the existing colour variables, Sass mixins, body rules, and selectors such as jp-wrap, then define a focused change that separates or relocates them and verify that imports still provide the intended styles without unnecessary CSS.

Written by the indexing model from the issue text.