/* ===================================================================== GPAprocede — Design Tokens --------------------------------------------------------------------- Extraído de: Design_system_sistema2026/prospect.ai design system.html (design system "prospect.ai" v1.0 · Jul 2026) REGRA: nenhuma cor, tamanho, raio ou sombra deve ser escrita diretamente no código da aplicação. Use sempre var(--token). PRD §27.1 e §27.3. Este arquivo tem duas partes: PARTE A — tokens copiados literalmente do design system. PARTE B — tokens NOVOS, derivados por nós (modo escuro e status financeiros). Todos documentados, conforme PRD §27.1.6. ===================================================================== */ /* ===================================================================== PARTE A — TOKENS ORIGINAIS DO DESIGN SYSTEM ===================================================================== */ :root { /* --------------------------------------------------------------- 1. TIPOGRAFIA — três famílias, um papel cada --------------------------------------------------------------- */ --font-display: 'Space Grotesk', system-ui, sans-serif; /* títulos: 400/500/700 */ --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; /* interface: 300–800 */ --font-data: 'JetBrains Mono', ui-monospace, monospace; /* números: 400/500/600 */ --font-accent: 'Instrument Serif', Georgia, serif; /* itálico decorativo */ /* Escala de 10 passos (razão 1.25). Formato: tamanho / entrelinha / tracking */ --text-display-2xl: 700 /* peso */; /* usar via classe .t-display-2xl */ --size-display-2xl: 128px; --lh-display-2xl: 0.88; --tr-display-2xl: -0.045em; --size-display-xl: 96px; --lh-display-xl: 0.88; --tr-display-xl: -0.040em; --size-h1: 64px; --lh-h1: 0.96; --tr-h1: -0.030em; --size-h2: 44px; --lh-h2: 1.08; --tr-h2: -0.025em; --size-h3: 32px; --lh-h3: 1.12; --tr-h3: -0.020em; --size-h4: 22px; --lh-h4: 1.28; --tr-h4: -0.010em; --size-body-lg: 18px; --lh-body-lg: 1.50; --tr-body-lg: 0; --size-body: 16px; --lh-body: 1.50; --tr-body: 0; --size-body-sm: 14px; --lh-body-sm: 1.40; --tr-body-sm: 0; --size-caption: 12px; --lh-caption: 1.30; --tr-caption: 0.08em; /* --------------------------------------------------------------- 2. CORES DE MARCA — Signal Blue (9 tons) 500 = elementos interativos · 900 = texto sobre papel --------------------------------------------------------------- */ --blue-50: #F3F5FF; --blue-100: #E4E9FF; --blue-200: #C7D2FF; --blue-300: #A4B4FF; --blue-400: #6A81FF; --blue-500: #2A4BFF; /* base — a cor de trabalho */ --blue-700: #1E3AA8; --blue-800: #14276E; --blue-900: #0A1740; /* Sunlit Yellow (9 tons) 500 = destaques · 100 = superfície de hover · 800+ = texto */ --yellow-50: #FFFBEE; --yellow-100: #FFF2CB; --yellow-200: #FFE595; --yellow-300: #FFD86A; --yellow-400: #FFCF4F; --yellow-500: #FFC93C; /* base — marca-texto, nunca fundo de tela */ --yellow-700: #D89A00; --yellow-800: #8E6300; /* mínimo legível sobre branco */ --yellow-900: #4A3300; /* --------------------------------------------------------------- 3. NEUTROS QUENTES --------------------------------------------------------------- */ --paper: #F5F3EA; /* fundo da aplicação */ --card: #FFFFFF; /* superfície de cartões e tabelas */ --silk: #E6E3D6; /* divisórias, trilhos, estados desabilitados */ --fog: #A8A5A0; /* texto de apoio fraco, placeholders */ --slate: #4A4744; /* texto secundário */ --ink: #0B0B0F; /* texto principal */ /* --------------------------------------------------------------- 4. SEMÂNTICAS — só para status Cada uma tem par PREENCHIMENTO (fill) e TEXTO (text). O par -text é obrigatório quando a cor vai sobre branco/papel: as versões -fill NÃO atingem 4.5:1 e reprovam em WCAG AA (PRD §26.3). --------------------------------------------------------------- */ --success-fill: #17A672; --success-text: #0E6B48; /* 5.99:1 sobre branco */ --warn-fill: #F97316; --warn-text: #9A3E00; /* 6.86:1 */ --danger-fill: #E5484D; --danger-text: #A1272B; /* 7.40:1 */ --violet-fill: #7C3AED; --violet-text: #4C1D95; /* 5.68:1 */ /* --------------------------------------------------------------- 5. ESPAÇAMENTO — grade de 4px, passos não lineares --------------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 96px; --s-12: 128px; /* --------------------------------------------------------------- 6. RAIOS — "soft, not sharp" Regra do design system: nada abaixo de 6px em elemento interativo. --------------------------------------------------------------- */ --r-xs: 2px; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px; --r-full: 999px; /* --------------------------------------------------------------- 7. ELEVAÇÃO — quente, baixa, física --------------------------------------------------------------- */ --e-0: none; --e-1: 0 1px 2px rgba(11,11,15,0.06); /* repouso */ --e-2: 0 4px 12px rgba(11,11,15,0.08); /* cartão */ --e-3: 0 12px 32px rgba(11,11,15,0.10); /* popover */ --e-4: 0 24px 60px rgba(11,11,15,0.14); /* modal */ /* Anel de foco: AMARELO, não azul. Vem do design system. */ --focus-ring: 0 0 0 4px rgba(255,201,60,0.25); /* --------------------------------------------------------------- 8. ALTURAS DE CONTROLE (botões e campos) --------------------------------------------------------------- */ --h-xs: 28px; --h-sm: 32px; --h-md: 44px; /* padrão */ --h-lg: 52px; --h-xl: 64px; /* --------------------------------------------------------------- 9. MOVIMENTO --------------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; } /* ===================================================================== PARTE B — TOKENS DERIVADOS (novos, criados para o GPAprocede) ===================================================================== */ /* --------------------------------------------------------------------- B.1 — CAMADA SEMÂNTICA DE SUPERFÍCIE E TEXTO O design system só define o modo claro. Para atender o PRD §27.3 (modo claro e escuro) sem duplicar cores fixas no código, toda a aplicação deve usar SOMENTE os tokens abaixo — nunca --paper, --card ou --ink diretamente. --------------------------------------------------------------------- */ :root, :root[data-theme="light"] { color-scheme: light; --bg-canvas: var(--paper); --bg-surface: var(--card); --bg-surface-alt: #FBFAF5; /* linhas alternadas de tabela */ --bg-sunken: #EFEDE3; /* poços, campos desabilitados */ --bg-hover: rgba(11,11,15,0.04); --bg-selected: var(--blue-50); --fg-primary: var(--ink); --fg-secondary: var(--slate); --fg-muted: var(--fog); --fg-on-accent: var(--ink); /* texto sobre amarelo */ --fg-on-brand: #FFFFFF; /* texto sobre azul 500 */ --border-subtle: rgba(11,11,15,0.06); --border-default: rgba(11,11,15,0.12); --border-strong: rgba(11,11,15,0.24); --interactive: var(--blue-500); /* 5.33:1 sobre papel */ --interactive-hover: var(--blue-700); --interactive-text: var(--blue-800); /* azul como TEXTO longo */ --shadow-1: var(--e-1); --shadow-2: var(--e-2); --shadow-3: var(--e-3); --shadow-4: var(--e-4); } /* Modo escuro. Rampa quente derivada do --ink (#0B0B0F), não cinza puro, para manter a temperatura do design system. O azul 500 é escuro demais para texto sobre fundo escuro (reprova AA), então --interactive-text passa a usar o azul 300. Como PREENCHIMENTO com texto branco o azul 500 continua válido (5.92:1) nos dois modos. */ :root[data-theme="dark"] { color-scheme: dark; --bg-canvas: #14130F; --bg-surface: #1C1A16; --bg-surface-alt: #221F1A; --bg-sunken: #100F0C; --bg-hover: rgba(245,243,234,0.06); --bg-selected: rgba(42,75,255,0.18); --fg-primary: #F5F3EA; --fg-secondary: rgba(245,243,234,0.72); --fg-muted: rgba(245,243,234,0.48); --fg-on-accent: var(--ink); /* amarelo continua com texto escuro */ --fg-on-brand: #FFFFFF; --border-subtle: rgba(245,243,234,0.08); --border-default: rgba(245,243,234,0.14); --border-strong: rgba(245,243,234,0.28); --interactive: var(--blue-400); --interactive-hover: var(--blue-300); --interactive-text: var(--blue-300); /* 8.65:1 sobre --bg-surface */ /* Sombras quase não funcionam no escuro: reforçamos com opacidade alta */ --shadow-1: 0 1px 2px rgba(0,0,0,0.40); --shadow-2: 0 4px 12px rgba(0,0,0,0.45); --shadow-3: 0 12px 32px rgba(0,0,0,0.50); --shadow-4: 0 24px 60px rgba(0,0,0,0.60); /* Semânticas clareadas para passar AA sobre fundo escuro. Contrastes medidos contra --bg-surface (#1C1A16): success 7.9:1 · warn 9.7:1 · danger 6.1:1 · violet 6.1:1 */ --success-text: #4CC38A; --warn-text: #FFB224; --danger-text: #FF6369; --violet-text: #BF7AF0; } /* Quem não escolheu tema manualmente segue o sistema operacional. O atributo data-theme, quando presente, sempre vence (PRD §27.3). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg-canvas: #14130F; --bg-surface: #1C1A16; --bg-surface-alt: #221F1A; --bg-sunken: #100F0C; --bg-hover: rgba(245,243,234,0.06); --bg-selected: rgba(42,75,255,0.18); --fg-primary: #F5F3EA; --fg-secondary: rgba(245,243,234,0.72); --fg-muted: rgba(245,243,234,0.48); --border-subtle: rgba(245,243,234,0.08); --border-default: rgba(245,243,234,0.14); --border-strong: rgba(245,243,234,0.28); --interactive: var(--blue-400); --interactive-hover: var(--blue-300); --interactive-text: var(--blue-300); --shadow-1: 0 1px 2px rgba(0,0,0,0.40); --shadow-2: 0 4px 12px rgba(0,0,0,0.45); --shadow-3: 0 12px 32px rgba(0,0,0,0.50); --shadow-4: 0 24px 60px rgba(0,0,0,0.60); --success-text: #4CC38A; --warn-text: #FFB224; --danger-text: #FF6369; --violet-text: #BF7AF0; } } /* --------------------------------------------------------------------- B.2 — STATUS FINANCEIROS (PRD §8.4) Mapeamento único usado por TODOS os módulos, para que o mesmo estado nunca apareça com cor diferente em telas diferentes. IMPORTANTE: cor nunca é o único sinal. Todo badge precisa de texto + ícone, conforme PRD §8.4 e §26.3. Nota de decisão: o tom violeta do design system era rotulado "AI". O GPAprocede não tem funcionalidade de IA no escopo (PRD §33), então ele foi reaproveitado para "pendente de aprovação". Documentado aqui. --------------------------------------------------------------------- */ :root { /* vencido — estado crítico */ --st-vencido-bg: rgba(229,72,77,0.10); --st-vencido-fg: var(--danger-text); --st-vencido-border: rgba(229,72,77,0.35); /* vence hoje — alerta */ --st-hoje-bg: rgba(249,115,22,0.10); --st-hoje-fg: var(--warn-text); --st-hoje-border: rgba(249,115,22,0.35); /* próximo do vencimento — atenção */ --st-proximo-bg: var(--yellow-100); --st-proximo-fg: var(--yellow-800); --st-proximo-border: var(--yellow-300); /* pago ou recebido E conciliado — sucesso */ --st-conciliado-bg: rgba(23,166,114,0.10); --st-conciliado-fg: var(--success-text); --st-conciliado-border: rgba(23,166,114,0.35); /* pago ou recebido, ainda NÃO conciliado — informativo */ --st-liquidado-bg: var(--blue-50); --st-liquidado-fg: var(--interactive-text); --st-liquidado-border: var(--blue-200); /* pendente de aprovação */ --st-pendente-bg: rgba(124,58,237,0.10); --st-pendente-fg: var(--violet-text); --st-pendente-border: rgba(124,58,237,0.35); /* cancelado ou estornado — neutro */ --st-neutro-bg: var(--bg-sunken); --st-neutro-fg: var(--fg-secondary); --st-neutro-border: var(--border-default); /* renegociado — destaque específico, com acesso ao histórico */ --st-renegociado-bg: var(--yellow-50); --st-renegociado-fg: var(--yellow-900); --st-renegociado-border: var(--yellow-500); } :root[data-theme="dark"] { --st-proximo-bg: rgba(255,201,60,0.14); --st-proximo-fg: var(--yellow-300); --st-proximo-border: rgba(255,201,60,0.35); --st-liquidado-bg: rgba(42,75,255,0.16); --st-liquidado-border: rgba(164,180,255,0.30); --st-renegociado-bg: rgba(255,201,60,0.10); --st-renegociado-fg: var(--yellow-300); --st-renegociado-border: var(--yellow-500); } /* --------------------------------------------------------------------- B.3 — BASE E VALORES MONETÁRIOS --------------------------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg-canvas); color: var(--fg-primary); font-family: var(--font-body); font-size: var(--size-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--interactive); text-decoration: none; } a:hover { color: var(--interactive-hover); } ::selection { background: var(--yellow-500); color: var(--ink); } /* Foco visível obrigatório (PRD §26.3). Nunca remover sem substituir. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--interactive); outline-offset: 2px; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } /* Dinheiro, IDs, datas e contadores: mono com dígitos de largura fixa, para que as colunas de valor alinhem na vertical. */ .num, .dinheiro, td.num, th.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; text-align: right; white-space: nowrap; } /* Valor negativo / saída de caixa */ .dinheiro--saida { color: var(--danger-text); } .dinheiro--entrada { color: var(--success-text); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }