# Guia de Padrão Visual e Design System SVG — CyberCore Signer

Este documento estabelece a especificação oficial de design, geometria, tokens de cores e regras de compatibilidade para todos os ícones e elementos gráficos vetoriais (**SVG**) do ecossistema **CyberCore Signer**.

---

## 1. Princípios de Design

1. **Clareza e Precisão:** Cada ícone deve comunicar imediatamente sua função técnica (PDF, XML, assinatura embutida, validação, credenciais).
2. **Minimalismo e Geometria Pura:** Evitar ruídos visuais, nós desnecessários, filtros proprietários ou imagens bitmap embutidas (`<image>`).
3. **Consistência de Traço e Escala:** Espessuras de contorno previsíveis e alinhadas ao grid de 48x48 pixels.
4. **Interoperabilidade:** Totalmente compatível com editores vetoriais modernos (**Inkscape, Figma, Adobe Illustrator**) e com o parser nativo de JavaFX em `AssetManager`.

---

## 2. Grid e Canvas Canônico

| Propriedade | Valor Padrão | Descrição |
|---|---|---|
| **ViewBox** | `0 0 48 48` | Padrão obrigatório para ícones da grade de ações e ferramentas laterais. |
| **Dimensões Base** | `width="48" height="48"` | Dimensões nominais 1:1. |
| **Área Segura** | `4px` de margem interna | O conteúdo vetorial deve se concentrar entre `(4, 4)` e `(44, 44)`. |
| **Raio de Canto Padrão** | `rx="3"` ou `rx="6"` | Arredondamentos harmônicos em cantos de janelas e etiquetas. |

---

## 3. Paleta de Cores e Tokens Visuais

Os ícones utilizam uma paleta de cores corporativa baseada em Material Design e Tailwind Modern, com alto contraste sobre fundos claros e escuros:

| Token | Hexadecimal | Papel / Significado |
|---|---|---|
| **`color-brand-primary`** | `#0288d1` | Azul CyberCore. Traço padrão de folhas, botões principais e XML. |
| **`color-brand-deep`** | `#01579b` | Azul escuro para dobras e acentos de profundidade. |
| **`color-paper-fold`** | `#b3e5fc` | Preenchimento suave da dobra superior do documento padrão. |
| **`color-pdf-accent`** | `#d32f2f` | Vermelho institucional do formato Adobe PDF. |
| **`color-pdf-fold`** | `#ffcdd2` | Preenchimento suave da dobra do documento PDF. |
| **`color-success`** | `#10b981` / `#2e7d32` | Verde esmeralda para assinaturas válidas e verificações. |
| **`color-gold-seal`** | `#f59e0b` / `#d97706` | Dourado e âmbar para selos notariais e certificação digital. |
| **`color-paper-lines`** | `#b0bec5` / `#cfd8dc` | Linhas de texto representativas e divisórias neutras. |
| **`color-console-bg`** | `#1e293b` | Fundo de janelas de terminal (Logs). |
| **`color-danger-exit`** | `#d32f2f` | Seta e alertas de encerramento do agente. |

---

## 4. Anatomia dos Ícones de Documentos

Para documentos com dobra (como PDF, XML, Atachada e Validador):

```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
  <!-- 1. Folha de documento com dobra -->
  <path d="M 8 4 L 32 4 L 42 14 L 42 44 L 8 44 Z" 
        fill="#ffffff" stroke="[COR_BORDA]" stroke-width="2.5" stroke-linejoin="round"/>
        
  <!-- 2. Dobra de canto superior direito -->
  <path d="M 32 4 L 32 14 L 42 14 Z" 
        fill="[COR_FUNDO_DOBRA]" stroke="[COR_BORDA]" stroke-width="2" stroke-linejoin="round"/>
        
  <!-- 3. Linhas de texto representativas -->
  <line x1="13" y1="18" x2="27" y2="18" stroke="#b0bec5" stroke-width="2" stroke-linecap="round"/>
  <line x1="13" y1="22" x2="35" y2="22" stroke="#b0bec5" stroke-width="2" stroke-linecap="round"/>
  <line x1="13" y1="26" x2="35" y2="26" stroke="#b0bec5" stroke-width="2" stroke-linecap="round"/>
  
  <!-- 4. Elemento distintivo inferior (Etiqueta, Caneta, Clipe ou Checkmark) -->
  <rect x="11" y="31" width="28" height="11" rx="3" fill="[COR_BADGE]"/>
  <text x="25" y="39" font-family="'Segoe UI', Arial, sans-serif" 
        font-size="8px" font-weight="bold" fill="#ffffff" text-anchor="middle">[TEXTO]</text>
</svg>
```

---

## 5. Boas Práticas para Exportação no Inkscape / Figma

Ao criar ou editar ícones nas ferramentas vetoriais externas:

1. **Escolha a opção "SVG Simples" (Plain SVG) no Inkscape:**
   - No Inkscape: `Arquivo → Salvar Como... → SVG Simples (*.svg)`.
   - Isso elimina metadados de sessão (`sodipodi:namedview`, guias, zoom e histórico).
2. **Nunca incorpore imagens bitmap (`<image>` base64):**
   - O aplicativo desktop deve conter exclusivamente geometria vetorial limpa (`path`, `rect`, `circle`, `line`, `polygon`, `polyline`, `text`).
3. **Suporte a `style="..."` inline:**
   - O parser do CyberCore Signer (`AssetManager`) suporta tanto atributos XML puros (`fill="#..."`) quanto estilos inline em CSS (`style="fill:#...;stroke:#..."`).
4. **Mantenha o ViewBox Quadrado:**
   - Preserve sempre `viewBox="0 0 48 48"` para garantir alinhamento perfeito nos botões e painéis da interface.