# VantageProMarkets — Design System

Canonical: **`design-system/vantagepromarkets/MASTER.md`**

## Global theme (light / dark)

- **Control:** `<html data-theme="light|dark">` set by `partials/vpm/theme-init.blade.php` (no flash) and `resources/js/theme.js` (toggle + `localStorage` key `vpm-theme`).
- **Toggle:** `<x-vpm.theme-toggle />` in marketing header, dashboard header, and auth panel.
- **Tokens:** `resources/css/vpm/theme.css` defines surfaces, text, and institutional (`--vpm-i-*`) variables per theme.
- **Default:** System `prefers-color-scheme` when no saved preference.

## Unified app shell

All authenticated product pages use **`layouts/vpm-dashboard.blade.php`**:

- Sidebar navigation (`config/vpm-navigation.php`)
- Top bar with balance, theme toggle, notifications
- Shared panels, tables, buttons (`--vpm-*` tokens)

Terminal pages (Trade, Copy, Mining) use `@section('content_class', 'vpm-dashboard__content--terminal')` for full-width chart layout.

## Surfaces

| Surface | Layout | Theme |
|---------|--------|--------|
| **Marketing** | `vpm-marketing` + institutional partials | Light / dark via global theme |
| **Auth** | `vpm-auth` | Light / dark via global theme |
| **App / Admin** | `vpm-dashboard` | Light / dark via global theme |

## Brand colors (both themes)

| Role | Hex | Token |
|------|-----|--------|
| Brand / CTA | `#2962FF` | `--vpm-cta` |
| Institutional accent | `#006c49` | `--vpm-i-secondary` (marketing) |
| Buy / Sell | `#26A69A` / `#EF5350` | `--vpm-success` / `--vpm-danger` |

**Typography:** Geist · JetBrains Mono · Material Symbols Outlined

```bash
npm run build && php artisan serve
```