Prepend toolbar to toolbar variables

Here's the proposal to change the name of the variables from --color-focus to --toolbar-color-focus, prepending the module/component to the name.

A few things to discuss here and that I'm looking for feedback:

1. I've used just "toolbar" here to simplify the resulting names, but maybe I should use admin-toolbar? Thoughts? To give some context, we might add a top contextual bar that can be called toolbar-whatever (no idea yet).
2. I've changed where this is declared: from the :root element to the .admin-toolbar component itself. The goal is to scope the variable declaration to the component itself so we don't expose it to everything. I've left it as an independent file because if we add another component called .toolbar-contextual or whatever we end up choosing, we declare the variables in 1 file for the module Navigation.
3. I've defined the variables with the defaults following this great article from Lea Verou, but I haven't used the convention --_color she mentions that prepends with an underscore to evoke a private variable because I don't think it's a good call to adopt this for core at this point.

Thoughts?

Adding credit to @finnsky for his work in #3386927: [PLAN] Refactor CSS related to this.

(waiting for more feedback before moving on)

I just opened a new MR because it was easier with all the changes needed. Things I've done that change from the previous MR:

• I scoped the Tooltip variables for the Tooltip component itself. Since it's outside the .admin-toolbar, the variables were outside of scope, and since it's supposed to be its own element it's better to have the variables defined there. I've kept the same naming used everywhere else though. I think we can refactor the variable names when we can really make this component independent.
• I haven't defined the z-index because most elements that needed it were outside the .admin-toolbar itself too, so it didn't make sense to define them there. We could define them on :root but I'd prefer to do that in a follow-up and focus on approving&getting in the approach suggested here.

Summary of the discussion on the meeting today:

• We'll keep the :root as a place to define the variables because they will affect several components.
• Replace --toolbar-variablename with --admin-toolbar-variablename, so we prepend the variables with "admin-toolbar" to make it more obvious that it's for the admin elements.

Edit: And I've forgot to mention that we'll move the discussion about the conflict with simple variable names to a follow-up so we can get this in and avoid all the code collisions, and just discuss about the defaults defined on the variables later on that follow-up.

Agreed with @finnsky: I would change --sidebar-header and --sidebar-width to --admin-toolbar-sidebar-header and --admin-toolbar-sidebar-width or similar too.

Thanks for the work, this is almost ready!

Merging this so we can start working on the followups.

Feel free to open the follow-ups for:

• Issue for adding z-index to the variables now they are on the :root.
• Issue for discussing the default value defined, that can be easily overridden.
• Move gradients into variables.