# Sistema de Ícones — CyberCore Signer

Este documento estabelece as especificações de design, gramática visual, convenções de código e diretrizes de renderização do sistema de ícones do **CyberCore Signer**.

---

## 1. Gramática Visual e Grid Base

O sistema de ícones do CyberCore Signer foi projetado para oferecer clareza, consistência corporativa e alta fidelidade tanto no **Modo Claro** quanto no **Modo Escuro**, além de suporte a telas com alta densidade de pixels (HiDPI / Retina).

| Parâmetro | Especificação | Descrição |
| :--- | :--- | :--- |
| **ViewBox Canônico** | `0 0 24 24` | Todos os ícones são desenhados em um canvas quadrado padronizado de 24×24 pixels. |
| **Safe Area** | `2px` em todas as bordas | Os grafismos principais ficam contidos na área útil de `20×20px` (coordenadas de `2` a `22`). |
| **Stroke (Espessura)** | `1.75px` a `2.0px` | Traços consistentes entre todos os glifos vetoriais, proporcionando peso uniforme. |
| **Cantos e Terminações** | `round` | `stroke-linecap="round"` e `stroke-linejoin="round"` para um visual moderno e suave. |
| **Texto Embutido** | **Nenhum** (`Proibido`) | Ícones não devem incorporar elementos `<text>`. Toda semântica é transmitida por formas puras e labels da interface. |

---

## 2. Paleta de Cores e Tintas Semânticas

Os ícones utilizam `currentColor` como tinta principal, permitindo repintura dinâmica e herança das cores dos tokens do tema ativo:

| Papel | Token / Cor Modo Claro | Token / Cor Modo Escuro | Uso |
| :--- | :--- | :--- | :--- |
| **Tinta Principal (`currentColor`)** | `#1E293B` (`-fx-color-text`) | `#F1F5F9` (`-fx-color-text`) | Linhas de contorno, silhuetas e glifos primários. |
| **Acento Primário** | `#0288D1` (`-fx-color-primary`) | `#38BDF8` (`-fx-color-primary`) | Elementos de destaque, dobras de documentos, escudos. |
| **Sucesso** | `#10B981` (`-fx-color-success`) | `#34D399` (`-fx-color-success`) | Confirmações, validações concluídas (`check`, `validate`). |
| **Alerta / Atenção** | `#F59E0B` (`-fx-color-warning`) | `#FBBF24` (`-fx-color-warning`) | Avisos de validade próxima, selos e certificações (`seal`). |
| **Erro / Perigo** | `#EF4444` (`-fx-color-error`) | `#F87171` (`-fx-color-error`) | Ações destrutivas, falhas de assinatura (`error`, `exit`). |
| **Atenuado / Muted** | `#64748B` (`-fx-color-text-muted`) | `#94A3B8` (`-fx-color-text-muted`) | Guias internas, linhas secundárias, fechar (`close`). |

---

## 3. Escala de Tamanhos Padronizados

Para manter a consistência da interface, os ícones devem ser consumidos exclusivamente através dos 5 tamanhos canônicos definidos na fachada `Icons`:

```
   16px         20px         24px         32px         40px
 [ Micro ]    [ Pequeno ]  [ Padrão ]   [ Médio ]    [ Grande ]
```

- **`SIZE_16` (16×16 px):** Badges de status de certificado, botões auxiliares pequenos de janelas de diálogo (ex.: fechar, atualizar).
- **`SIZE_20` (20×20 px):** Menus secundários, botões de ação secundária, itens compactos em listas.
- **`SIZE_24` (24×24 px):** Tamanho padrão de componentes, botões de barra lateral do Hub, campos com ícone prefixado.
- **`SIZE_32` (32×32 px):** Cabeçalhos de diálogos de aprovação CCSP, títulos de assistentes.
- **`SIZE_40` (40×40 px):** Cartões e botões do painel principal (Hub de Ações Rápidas).

---

## 4. Catálogo dos Ícones Vetoriais

| Arquivo SVG | Glifo / Nome | Propósito e Uso na Aplicação |
| :--- | :--- | :--- |
| `pdf.svg` | `Icons.pdf()` | Assinatura de documentos PDF e fluxos PAdES. |
| `xml.svg` | `Icons.xml()` | Assinatura de documentos XML e notas fiscais (XMLDSig). |
| `file.svg` | `Icons.file()` | Assinatura de arquivos e digests genéricos. |
| `attached.svg` | `Icons.attached()` | Assinatura atachada / envelopada (CAdES Attached). |
| `batch.svg` | `Icons.batch()` | Assinatura de múltiplos documentos em lote. |
| `co-sign.svg` | `Icons.coSign()` | Adição de co-assinatura em documento já assinado. |
| `timestamp.svg` | `Icons.timestamp()` | Aplicação de carimbo do tempo (TSA). |
| `ltv.svg` | `Icons.ltv()` | Assinatura com validação de longo prazo (LTV). |
| `validate.svg` | `Icons.validate()` | Validador de integridade e assinaturas digitais. |
| `validate-timestamp.svg` | `Icons.validateTimestamp()` | Validador específico de carimbos de tempo. |
| `seal.svg` | `Icons.seal()` | Gerenciamento e aplicação de selos visuais. |
| `seal-icp-brasil.svg` | `Icons.sealIcpBrasil()` | Selo vetorial oficial padrão ICP-Brasil. |
| `cert.svg` | `Icons.certificates()` | Gerenciamento e seleção de certificados A1 e A3. |
| `shield.svg` | `Icons.shield()` | Segurança, proteção e integridade do agente. |
| `settings.svg` | `Icons.settings()` | Painel de configurações e preferências locais. |
| `logs.svg` | `Icons.logs()` | Visualizador de registros de auditoria e logs locais. |
| `tutorial.svg` | `Icons.tutorial()` | Guia interativo e tutorial de primeiros passos. |
| `about.svg` | `Icons.about()` | Diálogo sobre o CyberCore Signer, versão e licença. |
| `exit.svg` | `Icons.exit()` | Confirmação e encerramento do agente desktop. |
| `refresh.svg` | `Icons.refresh()` | Atualizar lista de certificados e recarregar dados. |
| `sun.svg` | `Icons.sun()` | Alternador para Modo Claro. |
| `moon.svg` | `Icons.moon()` | Alternador para Modo Escuro. |
| `arrow-right.svg` | `Icons.arrowRight()` | Navegação para próximo passo ou expansão. |
| `close.svg` | `Icons.close()` | Fechar diálogo, dispensar notificação ou cancelar. |
| `check.svg` | `Icons.check()` | Operação concluída com sucesso ou item selecionado. |
| `error.svg` | `Icons.error()` | Alerta de falha, cancelamento ou erro de hardware. |
| `star.svg` | `Icons.star()` | Certificado padrão ou favorito selecionado. |
| `zoom-in.svg` | `Icons.zoomIn()` | Aumentar zoom na visualização de documento ou selo. |
| `zoom-out.svg` | `Icons.zoomOut()` | Reduzir zoom na visualização de documento ou selo. |
| `zoom-fit.svg` | `Icons.zoomFit()` | Ajustar visualização à tela ou página inteira. |

---

## 5. Implementação Técnica

### Fachada `Icons`
A classe `br.com.cybercore.signer.ui.components.Icons` centraliza a instanciação:
```java
// Tamanho padrão (24px) com cor do tema ativo:
Node icon = Icons.settings();

// Tamanho específico:
Node refresh = Icons.refresh(Icons.SIZE_16);

// Tinta customizada:
Node custom = Icons.of("pdf", Icons.SIZE_40, Color.web("#0288D1"));
```

### Repintura Dinâmica
Ao registrar alteração de tema em `ThemeManager`, os nós de ícone baseados em `currentColor` recebem automaticamente o listener e atualizam suas cores em tempo real sem necessidade de recriar a janela.