/* ============================================================================ tokens.css — SÓ custom properties (design system VPA, portado do doc Chave Dez) Regra: nenhum componente referencia cor crua; sempre um token semântico daqui. Tema: claro é o padrão; escuro via [data-tema="escuro"] no . Marca do Grupo VPA: #173656 (azul-marinho). Rampa derivada para os estados que precisam de contraste no tema escuro (o marinho puro é escuro demais para acender). ============================================================================ */ :root { /* Superfícies e texto */ --fundo: #ffffff; --texto: #09090b; --cartao: #ffffff; --cartao-texto: var(--texto); /* Marca e ações — base = cor da marca VPA #173656 */ --primaria: #173656; --primaria-texto: #ffffff; --neutra: #f4f4f5; /* muted */ --neutra-texto: #71717a; /* muted-foreground */ --destrutiva: #dc2626; /* Estrutura */ --borda: #e4e4e7; --borda-campo: #e4e4e7; --anel: #94a3b8; /* anel de foco de controles clicáveis */ /* Sidebar (família própria — no escuro o primary global é escuro demais) */ --sidebar-fundo: #fafafa; --sidebar-texto: var(--texto); --sidebar-primaria: #173656; --sidebar-realce: #eef2f6; --sidebar-borda: var(--borda); /* Estados semânticos (fórmula: fundo cor a 10%, texto tom -700) */ --sucesso: #22c55e; --sucesso-texto: #15803d; --atencao: #f59e0b; --atencao-texto: #b45309; --info: #3b82f6; --info-texto: #1d4ed8; /* Rampa de gráficos (observabilidade): marca → azuis claros */ --grafico-1: #173656; --grafico-2: #3d6ea5; --grafico-3: #6f9fd8; /* Tipografia (fontes self-hosted pendentes — fallback do sistema até lá) */ --fonte-corpo: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --fonte-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* Raio (base 10px) */ --raio-sm: 6px; --raio-md: 8px; --raio-lg: 10px; --raio-xl: 14px; /* Sombras (elevação = borda; sombra só em botão de contorno) */ --sombra-xs: 0 1px 2px rgb(0 0 0 / 5%); } [data-tema="escuro"] { --fundo: #09090b; --texto: #fafafa; --cartao: #18181b; /* Marca lifada para o escuro: o marinho puro (#173656) some no fundo escuro. */ --primaria: #3d6ea5; --primaria-texto: #ffffff; --neutra: #27272a; --neutra-texto: #a1a1aa; --destrutiva: #f87171; --borda: rgb(255 255 255 / 10%); --borda-campo: rgb(255 255 255 / 15%); --anel: #64748b; --sidebar-fundo: #18181b; --sidebar-texto: #fafafa; --sidebar-primaria: #6f9fd8; --sidebar-realce: #27272a; --sidebar-borda: rgb(255 255 255 / 10%); --sucesso-texto: #4ade80; --atencao-texto: #fbbf24; --info-texto: #60a5fa; --grafico-1: #6f9fd8; --grafico-2: #3d6ea5; --grafico-3: #a9c5e6; }