Layer the token files and keep their utilities apart

Plan step 33. Each token file now opens with the material layer
statement and wraps its declarations in material.tokens (the font face
in material.base), so an application's unlayered scheme outranks the
package default whatever the selectors, and the foundation can import
the files with no layer() on the import.

The type-* and state utilities move to tokens/utilities.css, still
imported by material.css, so no file the foundation imports carries a
Tailwind directive. [x-cloak] moves beside the [hidden] rule in
foundation/hidden.css, outside every layer; material.css imports it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/foundation/hidden.css

@@ -0,0 +1,23 @@
+/*
+ * The two rules that hide, outside every layer.
+ *
+ * A layered rule always loses to an unlayered one, and no rule without `!important` beats one with
+ * it, so these two sit outside the layers and carry `!important`: whatever `display` a component
+ * gives its root, `hidden` on it hides it, and an application can pass `hidden` to any component.
+ * `hidden="until-found"` is left to the browser, which keeps such content searchable.
+ * `[x-cloak]` hides what Alpine has not started yet; Alpine removes the attribute when it has.
+ *
+ * Only a layered `!important` could outrank these, and the package writes none. The file is
+ * apart from reset.css because material.css, which stays for applications importing it after
+ * Tailwind, needs `[x-cloak]` without the reset.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+[hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+}
+
+[x-cloak] {
+    display: none !important;
+}