# 🎨 Skill: Design System Enforcer (PlatformSistemas)

## 🎯 Objetivo
Garantir que todas as alterações no frontend respeitem os novos padrões de "Engenharia de Elite": Tipografia Fluida, Coordenação de Layout e Mobile-First.

---

## 🔡 Regras de Tipografia

### ❌ PROIBIDO
- Usar `px` fixos para `font-size`.
- Usar `vw` puro para texto.
- Usar valores mágicos ou hardcoded.

### ✅ OBRIGATÓRIO
- Usar variáveis CSS de escala fluida:
  - `var(--text-xs)`
  - `var(--text-sm)`
  - `var(--text-base)`
  - `var(--text-lg)`
  - `var(--text-xl)`
  - `var(--text-2xl)`
  - `var(--text-3xl)`
- Usar `clamp()` para novos tamanhos customizados.

---

## 🏗️ Regras de Layout (Coordenação)

### ❌ PROIBIDO
- Usar larguras fixas para o conteúdo principal que não considerem a sidebar.
- Definir `z-index` arbitrário.

### ✅ OBRIGATÓRIO
- Usar variáveis de coordenação:
  - `--sidebar-width-expanded` (240px)
  - `--sidebar-width-collapsed` (80px)
  - `--header-height` (64px)
- Padding/Margin de containers principais deve ser coordenado com `--sidebar-width`.

---

## 📱 Regras Mobile-First
- Sempre testar se a alteração mantém o layout travado no mobile (`user-scalable=no`).
- Priorizar containers com `min-h` e `max-h-[80vh]` para evitar quebras em telas pequenas.