# COOPNEXA — Brand Spec

Extraído das logos anexadas (CN+ app icon, lockup CoopNexa) + tagline do PRD.

## Nome e tagline
- **Produto:** COOPNEXA
- **Tagline:** Gestão inteligente de processos cooperativos
- **Verticais do produto:** 6 módulos NEXA (Plantões, Profissionais, Documentos, Validação, Operadoras, Relatórios)

## Paleta (OKLch — bind em :root)

```css
:root {
  /* Neutros */
  --bg:        oklch(98.5% 0.004 250);    /* #F7F9FC off-white */
  --surface:   oklch(100% 0 0);           /* #FFFFFF cards */
  --surface-2: oklch(96% 0.006 250);      /* #EEF1F6 painéis secundários */
  --border:    oklch(91% 0.008 250);      /* #DEE3EC */
  --border-strong: oklch(84% 0.012 250);  /* #C6CDD8 */
  --muted:     oklch(52% 0.015 250);      /* #6E7585 textos secundários */
  --fg:        oklch(22% 0.03 260);       /* #1A2238 texto principal */

  /* Marca */
  --brand-navy:   oklch(30% 0.09 262);    /* #1E3A5F "Coop" do lockup */
  --brand-blue:   oklch(42% 0.19 265);    /* #1E3C8C azul royal do C */
  --brand-blue-2: oklch(62% 0.19 255);    /* #2E8FFF azul brilhante do N */
  --brand-teal:   oklch(62% 0.11 180);    /* #2BA48D teal do "+" / "Nexa" */
  --brand-teal-2: oklch(72% 0.13 185);    /* #3FD1BB teal mais claro */

  /* Accent (CTA, links, hero) */
  --accent:     var(--brand-blue);
  --accent-hover: oklch(37% 0.19 265);

  /* Status */
  --success:   oklch(58% 0.14 155);       /* #1F9D5B — documento aprovado */
  --warn:      oklch(74% 0.14 75);        /* #D99A1C — pendência aberta */
  --danger:    oklch(58% 0.19 25);        /* #D64545 — recusa / bloqueio */
  --info:      oklch(62% 0.15 240);       /* #3B82F6 — info / check-in */
}
```

### Regras de uso de cor
- `--brand-blue` é o azul institucional (CTA primário, headers em marketing, logo).
- `--brand-teal` é o accent secundário — usar para status "digitalizado", ícone "+" do logo, selos de validação, elementos do fluxo cooperativo. Nunca como CTA primário.
- `--brand-blue-2` só para gradientes de hero e para o estado "ativo" do navegador lateral.
- Status (success/warn/danger) são usados em pills de documento (Aprovado / Pendência / Recusa) — sempre com fundo tingido 10–15% + texto no status color.
- Pacote institucional saúde: fundo claro, nunca navy como background inteiro (navy é cor de texto / topbar).

## Tipografia

```css
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
--font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
--font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
```

- Display 600–700, letter-spacing -0.02em em sizes ≥ 32px
- Body 400–500
- Mono para IDs, Coren, hash, timestamps, tabular-nums em números de contagem

Escala (px): 12 · 14 · 15 · 16 · 20 · 24 · 32 · 40 · 56 · 72

## Posture (do produto SaaS)
- **Chrome restrained:** topbar branca com borda hairline, sidebar colapsável, nenhum shadow em cards.
- **Elevação em 2 níveis:** flat (default) + raised (modais, dropdowns, drawer de digitalização).
- **Radii:** 8px em botões/inputs, 12px em cards, 16px em painéis grandes, 6px em pills de status.
- **Grid:** 12 col max 1440px desktop; mobile-first para fluxo profissional (390–430px).
- **Densidade:** data-dense em listas de pacientes/plantões (tabular, hairline borders, no row striping). Marketing e detalhe de paciente mais aerado.
- **Hero:** um gradiente da marca (`--brand-blue` → `--brand-blue-2`) usado em exatamente um lugar por página.
- **Ícones:** line icons 1.5px stroke (estilo Lucide), nunca emoji, nunca filled.
- **Zero shadows em inputs/cards padrão.** Modais usam shadow sutil (y 4px, blur 16px, opacity 10%).

## Específico do contexto (saúde + LGPD)
- Pills de LGPD/auditoria visíveis mas discretas (ex.: "Trilha de auditoria ativa" no footer de telas sensíveis).
- Status de documento sempre com ícone + label (daltonismo).
- Timestamps absolutos com `font-variant-numeric: tabular-nums`.
- Coren sempre em mono + prefixo UF (ex: `COREN-SP 123456`).

## Logo
- CN+ (ícone quadrado) usado em: favicon, avatar do topbar, splash do mobile.
- Lockup CoopNexa (horizontal) usado em: landing hero, login, documento PDF de fim de ciclo.
- Nunca sobre fundos coloridos que não sejam branco, surface ou navy escuro.