Add :host rule to @theme layer (#15975)

Resolves #15799
Resolves #14478
Part-of #15005

Adds a `:host` selector for the `@theme` layer. This is necessary for
the `@theme` layer to work correctly in shadow DOM.

Also updates the snapshots for the tests that were affected by this
change (in a separate commit).

## Test plan

Tested via the Vite playground:

<img width="1121" alt="Screenshot 2025-01-29 at 15 06 49"
src="https://github.com/user-attachments/assets/a7908135-5ff8-472f-a053-d2c6d5c81e1b"
/>

Additionally made sure that `@property` defaults also work across
Firefox, Chrome, and Safari (the `@property` definition from the root is
pulled in) and added a UI spec.

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 "@layer theme {
-  :root {
+  :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

packages/@tailwindcss-postcss/src/index.test.ts

@@ -280,7 +280,7 @@ test('runs `Once` plugins in the right order', async () => {
   )
 
   expect(result.css.trim()).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --color-red-500: red;
     }
 
@@ -297,7 +297,7 @@ test('runs `Once` plugins in the right order', async () => {
     }"
   `)
   expect(after).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
       --color-red-500: red;
     }