Design System

Paleta de Cores

Light Mode

Token	Valor	Uso
--background	#f8fafc	Fundo do conteúdo
--foreground	#0f172a	Texto principal
--card	#ffffff	Cards, modais
--primary	#1a1f36	Botões principais
--accent	#c9942e	Destaques, gold
--muted	#f1f5f9	Fundos secundários
--muted-foreground	#64748b	Texto secundário
--border	#e2e8f0	Bordas
--destructive	#ef4444	Ações destrutivas
--success	#059669	Status positivo
--warning	#d97706	Alertas

Sidebar (Navy)

Token	Valor
--sidebar-background	#1a1f36
--sidebar-foreground	#94a3b8
--sidebar-primary	#e5b94e (gold)

Tipografia

Contexto	Fonte
App interno	Plus Jakarta Sans (400, 500, 600, 700)
Landing page	Bricolage Grotesque (display) + Figtree (body)

Base: 14px conteúdo, 13px tabelas.

Border Radius

Elemento	Valor
Cards, modais	12px (rounded-xl)
Inputs, botões	10px (rounded-lg)
Badges	pill (rounded-full)

PrimeVue Pass-Through

Todos os componentes PrimeVue são estilizados via preset global em resources/js/primevue-pt.ts. Nunca use :pt inline — isso sobrescreve o preset global.

Componentes cobertos: DataTable, Column, Paginator, InputText, Select, DatePicker, Dialog, Tag, Toast, Checkbox, Avatar.

Padrões de Componentes

DataTable

• Paginação centralizada com texto "Mostrando X a Y de Z" abaixo
• Rows per page: [15, 25, 50, 100]
• Total NÃO aparece no header da página (só no paginator)
• Template: FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport

Select

• Sempre com filter prop habilitado
• Placeholder descritivo

DatePicker

• Locale pt-BR configurado globalmente
• Formato: dd/mm/yy
• First day of week: domingo (0)

Botões

Variante	Classes
Primary	rounded-lg bg-primary text-primary-foreground shadow-sm font-semibold
Secondary	rounded-lg border border-border text-foreground hover:bg-muted
Destructive	rounded-lg bg-destructive text-destructive-foreground shadow-sm
Ghost	rounded-lg hover:bg-muted

Cards

rounded-xl border border-border bg-card p-6

Labels

text-sm font-medium text-foreground + <span class="text-destructive ml-1">*</span> para required.

Sidebar

Agrupada em seções colapsáveis (Secretaria, Igreja, Financeiro) com chevron animado. Grupos auto-expandem quando um subitem está ativo.