docs: explain utilities group in layers.md

Author: J-Sek

packages/docs/src/pages/en/styles/layers.md

@@ -42,3 +42,25 @@ Your own styles will always override vuetify's if you don't use `@layer` yoursel
   vuetify-utilities,
   vuetify-final;
 ```
+
+## Utilities group
+
+The `vuetify-utilities` layer itself contains nested sublayers to control the order of utility styles:
+
+```css
+@layer vuetify-utilities {
+  @layer theme-base;
+  @layer typography;
+  @layer helpers;
+  @layer theme-background;
+  @layer theme-foreground;
+}
+```
+
+- **theme-base**: CSS custom properties for theme colors and other variables, applied to `:root` or a scoped selector.
+- **typography**: Typography-related CSS custom properties and classes generated by the typography system.
+- **helpers**: Utility classes like spacing (`.pa-4`, `.ma-2`), display (`.d-flex`), and text alignment (`.text-center`).
+- **theme-background**: Background color utilities such as `.bg-primary` and `.bg-surface`.
+- **theme-foreground**: Text color utilities such as `.text-primary` and `.text-error`.
+
+This ordering ensures that explicit color utilities (background and foreground) can override helper classes when both are applied to the same element.