docs: add comprehensive documentation for installation, architecture, and styling

docs/styling.md

@@ -0,0 +1,23 @@
+# Styling Guide
+
+Modus handles styling dynamically using **Matugen**. This allows the shell to automatically match its color palette with your current wallpaper.
+
+## How it works
+
+1. When a new wallpaper is set (or the shell starts), Matugen generates a color palette.
+2. Modus uses a Matugen template located at `config/matugen/templates/modus.css`.
+3. Matugen processes the template and outputs the final stylesheet to `src/shared/styles/colors.css`.
+4. Modus automatically hot-reloads the new CSS, instantly applying the colors to the panel, dock, widgets, and menus.
+
+## Customizing the Look
+
+If you want to manually tweak borders, padding, font sizes, or add custom CSS classes, you should modify the files in `src/shared/styles/`.
+
+### The CSS Hierarchy
+
+- `src/shared/styles/main.css`: The primary entry point. It imports all other CSS components.
+- `src/shared/styles/colors.css`: **DO NOT EDIT THIS MANUALLY.** This is automatically generated by Matugen. If you want to change how colors are generated, edit the template at `config/matugen/templates/modus.css`.
+- `src/shared/styles/components/`: Contains isolated CSS for specific widgets (e.g. `dock.css`, `notification.css`, `panel.css`).
+
+> [!TIP]
+> If you create a custom widget or add a new component, you can add a `.css` file inside the `components` directory and then `@import` it in `main.css`. Modus will apply it the next time it restarts!