move docs to docs/ folder, merge architecture files, update references

docs/MATERIAL-DESIGN.md

@@ -0,0 +1,79 @@
+# Material Design Resources
+
+Material Design icons and components are available in the MosisDesigner repository.
+
+## Material Design Icons
+
+**Location**: `D:\Dev\Mosis\MosisDesigner\material-design-icons`
+
+A comprehensive icon library from Google with 2000+ icons across 20 categories:
+
+| Category | Examples |
+|----------|----------|
+| action | home, search, settings, delete, info |
+| alert | error, warning, notification |
+| av | play, pause, volume, mic |
+| communication | phone, message, email, contacts |
+| content | add, remove, copy, paste |
+| device | battery, wifi, bluetooth, gps |
+| editor | format, text, color, brush |
+| file | folder, attachment, download, upload |
+| hardware | keyboard, mouse, phone, tablet |
+| home | lightbulb, thermostat, security |
+| image | camera, photo, filter, tune |
+| maps | location, directions, navigation |
+| navigation | arrow, chevron, menu, close |
+| notification | sync, update, event |
+| places | hotel, restaurant, airport |
+| search | search variants |
+| social | share, person, group, notifications |
+| toggle | star, checkbox, radio |
+
+**Available Formats**:
+- `src/` - SVG source files organized by category
+- `png/` - PNG files at multiple DPIs (24dp, 36dp, 48dp)
+- `font/` - Icon fonts (WOFF, TTF)
+- `symbols/` - Material Symbols variable font (newer)
+- `variablefont/` - Variable font files
+
+**Icon Styles**:
+- Outlined (default)
+- Filled
+- Rounded
+- Sharp
+- Two-tone (Material Icons only)
+
+## Material Design Lite
+
+**Location**: `D:\Dev\Mosis\MosisDesigner\material-design-lite`
+
+CSS/JS component library implementing Material Design (reference implementation):
+
+| Directory | Contents |
+|-----------|----------|
+| `src/` | SASS source for components |
+| `docs/` | Component documentation |
+| `templates/` | Page templates |
+
+**Key Components** (for design reference):
+- Buttons (raised, flat, FAB)
+- Cards
+- Dialogs
+- Lists
+- Menus
+- Navigation drawers
+- Progress indicators
+- Sliders
+- Snackbars
+- Tables
+- Tabs
+- Text fields
+- Tooltips
+
+## Using Icons in Mosis
+
+1. **Find icon** at https://fonts.google.com/icons
+2. **Export SVG** from `material-design-icons/src/<category>/<name>/`
+3. **Convert to TGA** using image tool (24x24 or 32x32, RGBA)
+4. **Place in** `src/main/assets/icons/`
+5. **Reference in RML**: `<img src="../../icons/<name>.tga"/>`