Prompt · Design System Sancruza

1. Abra o projeto, salve a versão atual.
2. Tire screenshot ANTES de 3 telas internas (vai servir de comparação).
3. Cole o prompt abaixo no chat.
4. Compare ANTES/DEPOIS e teste 3 fluxos críticos.

Aplique APENAS o DESIGN SYSTEM do padrão Sancruza (Sancruza Core) — prompt-design v2.1.

ESCOPO DESTE PROMPT_DESIGN (LEIA ANTES)
- SÓ mexe em: cores, tipografia, espaçamento, variantes de componentes shadcn, classes Tailwind, src/styles.css.
- NÃO mexe em: autenticação, fluxo de login, schema do banco, RLS, lógica de negócio, estrutura de rotas, hooks de dados, queries.
- NÃO altera USABILIDADE. Botões continuam no mesmo lugar, com o mesmo rótulo, abrindo o mesmo modal. Telas continuam com a mesma estrutura (header, sidebar, conteúdo). Só o VISUAL muda.
- Se o login está feio, IGNORE — existe um prompt-login separado. Se o banco está inseguro, IGNORE — existe um prompt-blindagem.

REGRA DE OURO
Reclamação real recebida: "fez o login certo mas não mudou nada do design". O OPOSTO também é reprovação: "mudou o design mas quebrou o fluxo do usuário". Esse prompt aplica visual SEM quebrar usabilidade.

IDENTIDADE SANCRUZA (resumo executivo)
- Paleta: azul corporativo profundo (primary) + acentos navy na sidebar + VERMELHO SANCRUZA #E30613 como cor de marca/destaque pontual. Neutros frios.
- Tipografia: DM Serif Display (títulos h1–h6, peso 400, tracking levemente fechado) + Fira Sans (corpo, UI, tabelas, formulários — pesos 300/400/500/600/700).
- Estilo: Minimalista Executivo. Cantos discretos (radius ~0.375rem), sombras suaves, bordas finas, muita respiração. Densidade controlada só em tabelas/dashboards.
- Vermelho #E30613: usado COM PARCIMÔNIA — CTA crítico, badges de status de marca, logomarca. Nunca como fundo de seção inteira nem em massa.

================================================================
0. PRÉ-REQUISITOS
================================================================
a) Confirme ao humano: "Este prompt mexe SÓ no visual. Autenticação, dados e fluxos continuam idênticos."
b) Tire um screenshot ANTES de 3 telas internas (dashboard, uma listagem, uma de detalhe). Vai ser usado pra comparar depois.
c) Stack: src/router.tsx + src/routes/__root.tsx → tanstack. Caso contrário, vite-spa.

================================================================
1. IMPORTAR TOKENS CANÔNICOS DO SANCRUZA CORE
================================================================
1.1 Carregue as fontes oficiais no <head> (root route do TanStack ou index.html do Vite-SPA):

        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Fira+Sans:wght@300;400;500;600;700&display=swap" />

1.2 No src/styles.css (ou src/index.css), coloque NA PRIMEIRA LINHA, antes de qualquer @import "tailwindcss":

        @import url("https://coresancruza.lovable.app/api/public/design-tokens.css");
        @import "tailwindcss";

    OBS: o endpoint de tokens canônicos ainda atende no domínio histórico `coresancruza.lovable.app` por compatibilidade com os 30 sistemas em produção. Os tokens servidos já são os do branding Sancruza (azul + vermelho #E30613, DM Serif Display + Fira Sans).

1.3 REMOVA do styles.css local toda redefinição destes tokens (vêm do Sancruza Core):
    --primary, --background, --foreground, --border, --warning, --destructive,
    --success, --info, --muted, --accent, --card, --sidebar-*, --brand-red,
    --category-1..6, --font-sans, --font-display.
    PODE manter variáveis 100% específicas do sistema (--kanban-column-bg etc.) desde que não colidam.

1.4 Registre no bloco @theme inline do Tailwind v4 pra virarem utilities
    (bg-primary, text-muted-foreground, border-border, bg-category-1...).
    Tailwind v4 não enxerga tokens carregados em runtime sem isso.

1.5 Configure --font-sans: "Fira Sans" e --font-display: "DM Serif Display" no @theme. Garanta no @layer base que h1-h6 usem font-display (peso 400, line-height 1.1) e body use font-sans.

================================================================
2. REFATORAR O APP INTEIRO — cor por token
================================================================
Não é opcional. Passe por CADA arquivo em src/components e src/routes:

- bg-blue-*, bg-green-*, bg-purple-*, bg-pink-*, bg-red-*, bg-yellow-*,
  bg-orange-*, bg-indigo-*, bg-cyan-*, bg-teal-* → token semântico
  (bg-primary, bg-category-N, bg-warning, bg-destructive…).
- text-white → text-primary-foreground (ou text-foreground sobre fundo claro).
- bg-white → bg-background ou bg-card.
- bg-black → bg-foreground.
- text-gray-*, text-slate-*, text-zinc-* → text-muted-foreground / text-foreground.
- border-gray-*, border-slate-* → border-border.
- Qualquer #hex / rgb() / hsl() em style={{}} fora da tela de Login → REMOVA, use classe Tailwind.
- Gradientes decorativos (from-blue-500 to-pink-500) → from-primary to-sidebar, ou remova.
- Vermelho #E30613 NUNCA hardcoded em componente — use bg-brand-red / text-brand-red (ou bg-destructive quando for erro real).

REGRA DE NÃO-REGRESSÃO: NÃO renomeie componentes, NÃO altere props, NÃO mude estrutura de JSX além de classNames. Se um botão era <Button onClick={x}>Salvar</Button>, continua sendo — só mudam as classes/variantes.

================================================================
3. HEADER AUTENTICADO PADRÃO
================================================================
Substitui qualquer header custom (mantendo os MESMOS LINKS e ações):
- h-16, bg-background, border-b border-border. NUNCA gradiente colorido. NUNCA vermelho como fundo de header.
- Esquerda: logo OFICIAL Sancruza, altura ~32-40px, SEM wrapper colorido atrás (NADA de quadrado bg-primary, NADA de rounded-md com fundo, NADA de ring/border colorido). A logo já tem identidade própria — envolvê-la num quadrado faz parecer etiqueta colada.
    URL absoluta da logo Sancruza:
    https://project--31b09c74-1b33-4cdf-b3df-15ea0c40d2aa.lovable.app/__l5e/assets-v1/9530e63d-1f2f-4b74-acfa-28fe5f3d63bb/sancruza-logo.png
  Ao lado: divisor vertical sutil (h-8 w-px bg-border) + nome do sistema (text-foreground font-display text-lg) + tagline curta (text-muted-foreground text-xs). Referência canônica: header do Sancruza Core.
- Direita: link "← Sancruza Core" (text-muted-foreground hover:text-foreground) + email do usuário (text-sm text-muted-foreground) + botão "Sair" (variant outline size sm).

================================================================
4. COMPONENTES SHADCN — padrão obrigatório
================================================================
Refatore todos:
- Button default: bg-primary text-primary-foreground. Outline: border-border bg-background. Ghost: transparente hover:bg-muted. Destructive: bg-destructive text-destructive-foreground. NUNCA bg-blue/green/purple-*.
- Card: bg-card text-card-foreground border-border shadow-sm rounded-md. Sem gradiente colorido no fundo.
- Input/Select/Textarea: bg-background border-input focus:ring-ring. Fonte Fira Sans (herda do body).
- PLACEHOLDER SOME NO FOCO (obrigatório, v2.1): o placeholder deve desaparecer ao FOCAR o campo, não só ao digitar. Vale para TODOS os inputs e textareas do sistema. Já vem nos tokens canônicos; se o satélite não importa o CSS do Core, adicione no @layer base do styles.css:

        input::placeholder,
        textarea::placeholder { transition: opacity 150ms ease; }

        input:focus::placeholder,
        textarea:focus::placeholder { opacity: 0; }

  Não mexe em cor, tipografia, layout ou estrutura de componente — só o comportamento do placeholder.
- Tabs: TabsList bg-muted; TabsTrigger ativo bg-background text-foreground shadow-sm.
- Badge default: bg-primary/10 text-primary. Destructive: bg-destructive/10 text-destructive. Warning: bg-warning/10 text-warning-foreground. Brand (marca/destaque Sancruza): bg-brand-red/10 text-brand-red — uso pontual. Categoria: bg-category-N/10 text-category-N.
- Table: thead bg-muted/50 text-muted-foreground font-medium; linhas hover:bg-muted/30; border border-border. NUNCA serif em conteúdo de tabela — Fira Sans pra densidade legível.
- Dialog/Modal: bg-background border-border; overlay bg-foreground/40. Título do dialog em font-display.
- Toast: success/destructive/warning dos tokens. Nunca hex.
- Títulos de página (h1) em font-display, text-3xl/4xl, peso 400, tracking-tight.

================================================================
5. ESTADO vs DECORAÇÃO vs MARCA (regra dura, causa de reprovação)
================================================================
- --destructive = ERRO (excluir, falha, validação).
- --warning = ALERTA (estoque baixo, pendência, prazo).
- --success = CONFIRMAÇÃO.
- --brand-red (#E30613) = MARCA SANCRUZA (logo, CTA institucional pontual, badge "novo/destaque").
- Esses quatro NUNCA viram cor de categoria/agrupamento. Categorias visuais (gênero, tipo, segmento, linha, divisão, status de funil) OBRIGATORIAMENTE usam --category-1..6 do Sancruza Core, na ordem de aparição. Mais de 6 categorias: cicla ou agrupa — NÃO invente cor.
- --brand-red NÃO é fundo de seção, header, sidebar ou card grande. Acento pontual apenas.

================================================================
6. AUDITORIA OBRIGATÓRIA (terminal)
================================================================
Rode no terminal e cole o output. Se QUALQUER um dos comandos 1-4 retornar > 0, REFATORE antes de entregar:

    # 1) cores arbitrárias do Tailwind
    rg -n "bg-(red|blue|green|yellow|pink|purple|orange|indigo|cyan|teal)-[0-9]" src/ | wc -l
    # 2) preto/branco/cinza hardcoded
    rg -n "text-white|bg-white|bg-black|text-black|text-gray-|text-slate-|text-zinc-" src/ | wc -l
    # 3) hex/rgb/hsl em JSX (fora da tela de Login e /sem-acesso)
    rg -n "#[0-9a-fA-F]{3,8}" src/components src/routes | rg -v "login-sancruza|login-sg|sem-acesso" | wc -l
    # 4) redefinição local de tokens do Sancruza Core
    rg -n "^\s*--(primary|background|foreground|border|warning|destructive|success|muted|accent|card|sidebar|brand-red|category-[1-6])\s*:" src/ | wc -l
    # 5) ESTADO/MARCA usado como DECORAÇÃO — inspecione cada match
    rg -n "bg-destructive|bg-warning|bg-success|bg-brand-red|border-destructive|border-warning" src/components src/routes
    # 6) fontes default residuais (Inter, Poppins, Barlow, system-ui hardcoded)
    rg -n "font-family.*(Inter|Poppins|Barlow|Roboto)" src/

================================================================
7. AUDITORIA DE NÃO-REGRESSÃO (visual + funcional)
================================================================
- Tire screenshot DEPOIS das mesmas 3 telas tiradas no passo 0.
- Compare visualmente: o VISUAL mudou (tipografia serif nos títulos, sans nas tabelas, paleta azul + vermelho de marca), mas a ESTRUTURA é idêntica (mesmos botões nos mesmos lugares, mesma sidebar, mesmas colunas de tabela, mesmos modais).
- Teste funcional: clique em 3 fluxos críticos (criar, editar, excluir um registro). Tudo continua funcionando igual.
- Se algum fluxo quebrou, VOLTE — você ultrapassou o escopo. Esse prompt é VISUAL.

================================================================
8. ENTREGÁVEL FINAL
================================================================
1) Confirmação: "Autenticação NÃO foi tocada. Dados NÃO foram tocados. Apenas visual."
2) Output literal dos 6 comandos da auditoria 6. Comandos 1-4 e 6 devem ser 0.
3) Screenshots ANTES/DEPOIS das 3 telas internas (dashboard + listagem + detalhe).
4) Lista de arquivos refatorados — espera-se DEZENAS (se só 3-4, você não fez o trabalho).
5) Confirmação de teste funcional: 3 fluxos críticos (criar, editar, excluir) continuam funcionando.
6) Checklist:
    (a) Fontes DM Serif Display + Fira Sans carregadas no <head>.
    (b) @import dos tokens do Sancruza Core na primeira linha do styles.css.
    (c) Tokens locais conflitantes removidos.
    (d) @theme inline registrado no Tailwind v4 (incluindo --font-sans, --font-display, --color-brand-red).
    (e) Auditoria 6 com 0 nos comandos 1-4 e 6.
    (f) Header autenticado refatorado (logo Sancruza sem wrapper colorido).
    (g) Títulos em DM Serif Display, corpo/UI em Fira Sans.
    (h) Componentes shadcn no padrão.
    (i) ESTADO (destructive/warning/success) e MARCA (brand-red) não usados como decoração.
    (j) Categorias usando --category-1..6.
    (k) Vermelho #E30613 só como acento pontual, nunca em massa.
    (l) Nenhum fluxo do usuário quebrou.

Se algum item falhar, PARE e reporte. NÃO entregue parcial.