# VEZA Design System v5.0 (Gold Master)

Welcome to the **Veza Design System**, a modular, cyberpunk-inspired UI framework built for the next generation of decentralized applications.

## 🌟 Overview
This system uses a highly scalable architecture designed for maintainability and performance.

- **Aesthetic**: Neon Ronin (Cyberpunk, Glitch, Glassmorphism)
- **Architecture**: ITCSS (CSS) & ES Modules (JS)
- **Structure**: Hub & Spoke (Documentation Hub -> Page Templates)

## 📂 Project Structure

```bash
/design
├── index.html          # Documentation Hub & Atom Library
├── templates/          # Production-ready Layouts
│   ├── auth.html       # Login / Register / 2FA
│   ├── nexus.html      # User Profile / Stats
│   ├── social.html     # Feed / Chat / Stories
│   ├── market.html     # Shop / Cart / Checkout
│   └── studio.html     # Dashboard / Analytics
├── css/                # ITCSS Styled Architecture
│   ├── 1-settings/     # Tokens (Colors, Fonts)
│   ├── 2-generic/      # Resets
│   ├── 4-objects/      # Animations
│   ├── 5-components/   # Atoms (Buttons, Cards)
│   ├── 6-modules/      # Organisms (Auth, Chat)
│   ├── 7-utilities/    # Helpers
│   └── style.css       # Main Manifest (Import this!)
└── js/                 # ES Modules
    ├── core/           # Boot, Theme
    ├── ui/             # Navigation, Search
    └── main.js         # Entry Point
```

## 🚀 Getting Started

1.  **Link the CSS**:
    Add the main stylesheet to your `<head>`:
    ```html
    <link rel="stylesheet" href="css/style.css">
    ```

2.  **Import the JS**:
    Add the module script before the closing `</body>` tag:
    ```html
    <script type="module" src="js/main.js"></script>
    ```

3.  **Use a Template**:
    Copy any file from `templates/` to start a new page with the grid layout pre-configured.

## 🎨 Key Features

*   **Theming**: Native Light/Dark mode support (switching via `js/core/theme.js`).
*   **Glitch Effects**: CSS-only text glitches using `.glitch` class and `data-text` attribute.
*   **Glassmorphism**: Utility classes for backdrop blurs and translucent panels.
*   **Modular**: Load only what you need, or use the pre-bundled `style.css`.

## 🛠 Development

To extend the system:
1.  **New Components**: Add a new file in `css/5-components/_my-component.css` and import it in `css/style.css`.
2.  **New Logic**: Add a module in `js/ui/` and import/init it in `js/main.js`.

---
*System Status: ONLINE* 💠
