# CMS Typography System

## Stack
- **Fonte**: Inter (400, 500, 600, 700) — WOFF2 local, `font-display: swap`
- **Base**: `14px` (1rem) — 0.875× do browser default 16px
- **Escala**: Minor Third 1.200 (modular scale progressiva)
- **Line-height**: 1.4 para corpo, 1.15–1.35 para títulos (denso para dashboard)

## Design Tokens

Declarados em `:root` no `cms-layout.css`:

| Token | rem | px (14px base) | Uso Principal |
|-------|-----|----------------|---------------|
| `--text-xs` | 0.785rem | ~11px | `th`, badges, breadcrumbs, sidebar submenu |
| `--text-sm` | 0.875rem | ~12px | `small`, `.form-text`, sidebar links, footer |
| `--text-base` | 1rem | **14px** | Corpo, `p`, `td`, `input`, `button`, `select`, `label` |
| `--text-md` | 1.15rem | ~16px | `h6`, sub-headers |
| `--text-lg` | 1.35rem | ~19px | `h5` (card titles, modal titles) |
| `--text-xl` | 1.6rem | ~22px | `h4` (section titles) |
| `--text-2xl` | 1.9rem | ~26px | `h3` (page header) |
| `--text-3xl` | 2.3rem | ~32px | `h1`, `h2` (KPIs, big numbers) |

### Font Weights

| Token | Valor | Uso |
|-------|-------|-----|
| `--font-regular` | 400 | Corpo de texto |
| `--font-medium` | 500 | Sidebar links |
| `--font-semibold` | 600 | Títulos h4-h6, card headers, `th` |
| `--font-bold` | 700 | Títulos h1-h3, breadcrumbs |

## Element Mapping

```css
h1, h2 { font-size: var(--text-3xl); font-weight: var(--font-bold); line-height: 1.15; }
h3     { font-size: var(--text-2xl); font-weight: var(--font-bold); line-height: 1.2; }
h4     { font-size: var(--text-xl);  font-weight: var(--font-semibold); line-height: 1.25; }
h5     { font-size: var(--text-lg);  font-weight: var(--font-semibold); line-height: 1.3; }
h6     { font-size: var(--text-md);  font-weight: var(--font-semibold); line-height: 1.35; }
th     { font-size: var(--text-xs);  font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; }
p, td, label, input, select, button, span, li { font-size: var(--text-base); line-height: 1.4; }
small, .form-text, .help-text, .text-muted { font-size: var(--text-sm); }
```

## Acessibilidade (Font Scale)

- Botão **A-** (scale × 0.9) → base 12.6px
- Botão **A+** (scale × 1.1) → base 15.4px
- Range completo: 0.8× (11.2px) a 1.4× (19.6px)
- Implementado via `document.documentElement.style.fontSize = (14 * scale) + 'px'`
- Persistência: `localStorage('cms_font_scale')`

## Arquivos Modificados

| Arquivo | Mudança |
|---------|---------|
| `public/assets/css/cms-layout.css` | Design tokens (`--text-*`, `--font-*`), element mapping (h1–h6, th, p, small), font-size: 14px no html, substituição de ~12 hardcoded font-size por tokens, padding adjustments (main, card, sidebar) |
| `V2/layouts/cms/layouts/app.blade.php` | Preload + carregamento do Inter CSS; `applyFontScale` corrigido para base 14px |
| `V2/layouts/cms/layouts/footer.blade.php` | Removido `style="font-size: 0.85rem"` inline |
| `V2/layouts/cms/dashboard.blade.php` | Removidos 2 inline `font-size` (0.9rem na table, 11px no td) |
| `V2/layouts/cms/partials/table.blade.php` | Sort icon `font-size: 0.75rem` → `0.785rem` |
| `V2/layouts/cms/search/index.blade.php` | Removido `style="font-size: 0.95rem"` inline na table |
| `tests/Unit/V2/Layouts/Cms/CmsTypographyTest.php` | **Novo** — 11 testes, 45 asserções |

## Notebook Density (1366×768)

| Componente | Padding Anterior | Novo |
|------------|-----------------|------|
| Main content | 1.5rem 2rem | 1.25rem 1.5rem |
| Card body | 1.5rem | 1rem 1.25rem |
| Card header | 1.25rem 1.5rem | 0.75rem 1.25rem |
| Card footer | 1rem 1.5rem | 0.75rem 1.25rem |
| Sidebar menu link | 0.4rem 0.75rem | 0.35rem 0.75rem |
| Sidebar submenu | 0.3rem 0.75rem 0.3rem 2.2rem | 0.25rem 0.75rem 0.25rem 2.2rem |

## Testes

```
Tests: 264, Assertions: 636
CmsTypography: 11 tests, 45 assertions — OK
```

```bash
docker compose exec app vendor/bin/phpunit --testsuite "V2 Unit" --filter CmsTypography
```

## Manutenção

- **Novo componente**: use `var(--text-*)` em vez de `font-size` literal
- **Nova view**: evite `style="font-size:..."` inline — crie classe ou use token
- **Token ausente**: adicione no `:root` seguindo a escala 1.200