docs/design: new design by BYTEMALTE and Docs

ARCHITECTURE.md

@@ -0,0 +1,64 @@
+# Architecture
+
+## Overview
+
+mcalc is a simple calculator application built with Dioxus 0.7. The architecture follows a clean separation between UI and business logic.
+
+## Components
+
+### `src/main.rs`
+- Application entry point
+- Loads global CSS stylesheet
+- Renders the root `Calculator` component
+
+### `src/ui.rs`
+- Contains the `Calculator` component
+- Manages reactive state via Dioxus Signals
+- Renders the display and keypad grid
+- Delegates operations to `logic.rs`
+
+### `src/logic.rs`
+- Pure business logic functions
+- No Dioxus dependencies
+- Handles digit input, operator selection, and calculation
+
+## State Management
+
+The calculator uses Dioxus `Signal<String>` for reactive state:
+
+| Signal | Purpose |
+|--------|---------|
+| `first_num` | First operand |
+| `second_num` | Second operand |
+| `operator` | Selected operator (+, -, *, /) |
+
+State flows from `ui.rs` to `logic.rs` via function parameters. The UI component owns the state; logic functions mutate it through write handles.
+
+## Data Flow
+
+```
+User Input → ui.rs (onclick handlers) → logic.rs (pure functions) → State Update → Re-render
+```
+
+1. User clicks a button
+2. Event handler calls logic function (e.g., `input_digit`)
+3. Logic function mutates the signal
+4. Dioxus detects the change and re-renders
+
+## Design System
+
+The UI follows the [BYTEMALTE design system](BYTEMALTE.md):
+
+- Dark theme with `#0F172A` background
+- Primary accent: `#8888FF`
+- Secondary accent: `#3DDC84`
+- Error/clear: `#EF4444`
+
+## File Responsibilities
+
+| File | Responsibility |
+|------|----------------|
+| `main.rs` | App initialization, asset loading |
+| `ui.rs` | Component rendering, state ownership |
+| `logic.rs` | Calculator operations, validation |
+| `assets/main.css` | Styling, theming, animations |