/* FinPulse — Design Tokens DevPulse AI * ------------------------------------ * Paleta e tipografia conforme o Manual da Marca DevPulse AI. * * PORTADO do HarbourPulse em 30/07/2026 (Sprint 3), que implementa a mesma * marca no mesmo stack. Vieram os tokens de FUNDAÇÃO; ficaram de fora os que * eram do domínio portuário — série de dados do calendário/Gantt * (--data-seq-*, --edge-seq-*, --on-data-seq) e as barras de atracação * (--bar-*, --on-bar-inverse, --on-status-*, --edge-status-*). Token morto é * dívida: quem lê não sabe se pode apagar. * * A grafia da marca é `DevPulse AI`, em caixa alta, fixada em 30/07/2026 — a * revisão do manual superou o §02 e o §07.7 do v1.0. Ver a anotação em * harbourpulse/src/.claude/docs/MANUAL-DA-MARCA.md. As CORES não foram * reconferidas contra essa revisão; se ela mexeu em cor, este arquivo precisa * de uma segunda passada. * * Convenção de nomes: * --dpai-* → cor de marca (muda se a marca mudar) * --text-*, --bg-*, --border-*, --status-* → papel semântico (estável * mesmo que a marca mude, só o valor por trás muda) * * TEMA CLARO/ESCURO — o manual (§01, atributo "Viva") exige que a marca * responda ao tema do usuário. O switch é o atributo `data-bs-theme` no * , que é a convenção NATIVA do Bootstrap 5.3: um único atributo * troca tanto os componentes do Bootstrap quanto os tokens daqui, sem * risco de os dois sistemas divergirem. * * Tints e glows são DERIVADOS via color-mix() a partir dos tokens de marca * e de superfície — nada de cor fixa duplicada. Trocar --dpai-primary * repropaga por todo o sistema automaticamente. * * COMPONENTES RGB — por que a cor é declarada como "91, 79, 232" e não #5B4FE8 * --------------------------------------------------------------------------- * O Bootstrap precisa de dois formatos da mesma cor: o valor (--bs-primary, * para preenchimento) e os componentes soltos (--bs-primary-rgb, que ele * injeta em rgba() para foco, opacidade e as variantes -subtle). CSS não sabe * extrair componentes de um hex. * * Até 26/07/2026 os dois eram declarados à mão, e os 21 espelhos -rgb eram * cópias literais. Quem trocasse --dpai-primary mudava o botão e deixava o anel * de foco e os fundos translúcidos na cor antiga — o oposto do que o comentário * acima prometia. A ORIGEM agora é o triplet: `--dpai-primary-rgb: 91, 79, 232` * e `--dpai-primary: rgb(var(--dpai-primary-rgb))`. Um edite, tudo segue. * * Ao acrescentar cor com espelho no Bootstrap, declare o -rgb e derive o valor. * `test_nenhum_espelho_bootstrap_tem_cor_literal` barra a regressão. */ :root { /* ============ Marca — papel funcional ============ */ --dpai-primary-rgb: 91, 79, 232; /* Pulse Indigo #5B4FE8 */ --dpai-accent-rgb: 20, 184, 166; /* Pulse Teal #14B8A6 */ --dpai-link-rgb: 36, 84, 199; /* Pulse Blue #2454C7 */ /* Acento para TEXTO pequeno. O Pulse Teal do manual (#14B8A6) é uma cor * de PREENCHIMENTO: sobre fundo claro, como texto, dá 2.38:1 — reprovado. * (O #1488A6 da proposta de landing atacava esse mesmo problema, mas * ainda ficava em 3.94:1.) Escurecido para 5.13:1 (AA), mantendo a matiz. * No tema escuro o próprio acento já dá 8.90:1, então não muda. */ --dpai-accent-text: color-mix(in srgb, var(--dpai-accent) 65%, black); /* ============ Marca — complementares (apoio, nunca cor principal) ============ */ --dpai-warm-gray: #6A5F5B; --dpai-teal-alt: #1B9B97; --dpai-blue-alt: #20C4F4; --dpai-petrol: #2D5F6B; /* ============ Texto ============ */ --text-primary-rgb: 31, 36, 48; /* Graphite Ink #1F2430 — texto, eixos de gráfico */ --text-secondary: #6B7280; /* Slate Gray — texto secundário, grid, legendas */ --text-on-brand: #FFFFFF; /* Texto sobre preenchimento de cor saturada */ /* Texto sobre SUPERFÍCIE PROFUNDA (sidebar e fundo do login, ambos em Pulse * Navy). FIXOS nos dois temas, de propósito: essa superfície é escura * sempre, então quem manda é o fundo, não o tema. * * Existem porque a primeira versão da sidebar reusou --text-secondary e * --text-on-brand, e o cálculo de contraste reprovou os dois: * --text-secondary (#6B7280) sobre Navy → 3.43:1, reprovado no claro; * --text-on-brand no tema ESCURO é #14161F → 1.00:1 sobre o Navy, ou * seja texto invisível. Nenhum dos dois apareceria numa inspeção rápida * do tema claro. */ --text-on-deep: #FFFFFF; /* 16.57:1 sobre #1B1E2B (AAA) */ --text-on-deep-muted: #9CA3AF; /* 6.53:1 sobre #1B1E2B (AA) */ /* Primária para GRAFISMO sobre superfície profunda — hoje o contorno do * bloco do lockup na versão negativa (§02). * * O Pulse Indigo puro sobre Navy dá 2.94:1, abaixo do mínimo de 3:1 do * WCAG 1.4.11 para elemento não textual. É o mesmo número que o manual §03 * registra, e a razão pela qual o tema escuro já clareia o indigo; aqui o * valor é FIXO nos dois temas porque a superfície é escura sempre. * Mesma matiz, só luminosidade — 5.17:1. */ --dpai-primary-on-deep: #8B82F0; /* ============ Status — semântica fixa, nunca recolorir ============ */ --status-positive-rgb: 154, 202, 60; /* #9ACA3C */ --status-warning-rgb: 253, 185, 51; /* #FDB933 */ --status-negative-rgb: 217, 64, 64; /* #D94040 */ --status-info-rgb: 32, 196, 244; /* #20C4F4 */ --status-no-data: #97999B; /* sem espelho no Bootstrap — hex direto basta */ /* Texto sobre tint de status (escurecido no claro p/ contraste AA) */ --on-tint-positive: #4F6E15; --on-tint-warning: #7A5A0F; --on-tint-negative: #6B1F1F; --on-tint-info: #1D5A78; /* ============ Neutros (estrutura e fundos) ============ */ --bg-page-rgb: 250, 250, 248; /* #FAFAF8 */ --bg-alt-rgb: 245, 245, 245; /* #F5F5F5 */ --bg-card: #FFFFFF; --border-card: #EFECE8; --border-warm: #E8E5E1; --ink-deep-rgb: 27, 30, 43; /* Pulse Navy #1B1E2B — navbar, sidebar, fundos escuros */ /* ============ Superfícies derivadas ============ */ --bg-hover: color-mix(in srgb, var(--text-primary) 6%, var(--bg-card)); --bg-subtle: color-mix(in srgb, var(--text-primary) 4%, var(--bg-page)); /* Cabeçalho de tabela. No claro é uma faixa escura com texto claro; no * escuro NÃO pode simplesmente inverter (viraria uma faixa quase branca, * ofuscante) — lá vira uma superfície elevada. */ --bg-header: var(--text-primary); --on-header: var(--bg-card); /* ============ Tints de marca (derivados) ============ */ --tint-brand-soft: color-mix(in srgb, var(--dpai-primary) 8%, transparent); --tint-brand-faint: color-mix(in srgb, var(--dpai-primary) 4%, transparent); --glow-brand: 0 0 6px color-mix(in srgb, var(--dpai-primary) 45%, transparent); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--dpai-link) 25%, transparent); --focus-outline: 3px solid color-mix(in srgb, var(--dpai-link) 40%, transparent); /* ============ Tints de status (derivados da cor semântica) ============ */ --tint-positive: color-mix(in srgb, var(--status-positive) 22%, var(--bg-card)); --tint-warning: color-mix(in srgb, var(--status-warning) 22%, var(--bg-card)); --tint-negative: color-mix(in srgb, var(--status-negative) 16%, var(--bg-card)); --tint-info: color-mix(in srgb, var(--status-info) 16%, var(--bg-card)); --tint-border-positive: color-mix(in srgb, var(--status-positive) 50%, var(--bg-card)); --tint-border-warning: color-mix(in srgb, var(--status-warning) 50%, var(--bg-card)); --tint-border-negative: color-mix(in srgb, var(--status-negative) 40%, var(--bg-card)); --tint-border-info: color-mix(in srgb, var(--status-info) 40%, var(--bg-card)); /* ============ Overlays neutros (bordas/hover sobre superfície colorida) ============ */ --overlay-border: rgba(0, 0, 0, 0.08); --overlay-border-strong: rgba(0, 0, 0, 0.18); --overlay-hover: rgba(255, 255, 255, 0.6); --overlay-divider: rgba(255, 255, 255, 0.15); /* ============ Tipografia ============ */ --font-stack: "Open Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* Manual §04 — utilitária monoespaçada: código, valores de cor, nomes de * variável, specs técnicas. Reforça a origem "para desenvolvedores" da * marca. Nunca usar em texto corrido. */ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --font-size-base: 15px; --font-size-sm: 13px; /* ⚠️ Abaixo do piso do manual: a escala da §04 termina em 13px. Existem * porque rótulo de tabela, badge e legenda usam 11px e 12px na prática. * Ficam tokenizados para que a correção, quando houver decisão de design, * seja num lugar só. */ --font-size-xs: 12px; --font-size-xxs: 11px; --font-size-lg: 17px; --font-size-xl: 22px; --font-size-xxl: 32px; /* ============ Espaçamento e raio ============ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; /* Largura de contêiner de formulário e de callout. No HarbourPulse eram * literais repetidos em 8 templates, e um ajuste de leitura exigia 8 * edições; aqui já nascem como token. */ --width-form-sm: 560px; --width-form: 640px; --width-form-lg: 720px; /* Largura mínima confortável para card de simulação/formulário estreito. * Introduzido no Sprint 6: o `max-width:480px` do simulador de preço era o * único literal de largura sem token equivalente (os outros casavam com * --width-form-sm e --width-form). */ --width-card-sm: 480px; /* Largura do painel lateral do assistente de IA. O `min()` mantém o painel * inteiro em tela estreita, onde 420px passaria da viewport. */ --width-panel: min(420px, 95vw); /* Espessura da faixa de acento de status (barra do KPI, borda do callout, * barra da .alert). No HarbourPulse estava escrita 3px em 12 lugares — CSS * e 8 templates — antes de virar token. */ --accent-bar: 3px; /* Altura do container de gráfico. O canvas do Chart.js roda com * `maintainAspectRatio:false`, então preenche o pai — e pai sem altura * colapsa para 0, fazendo o gráfico não aparecer. Era `height:300px` à mão * em 4 telas. Um token só mantém os dashboards com a mesma cadência * vertical; mudar aqui reajusta todos de uma vez. */ --height-chart: 300px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; /* ============ Sombra (sutil) ============ */ --shadow-card: 0 1px 2px rgba(28, 28, 40, 0.04), 0 2px 6px rgba(28, 28, 40, 0.04); --shadow-elev: 0 4px 12px rgba(28, 28, 40, 0.08); /* Elemento flutuante sobre o conteúdo (botão do assistente). Precisa de * sombra mais firme que --shadow-elev: o FAB não repousa numa superfície, ele * paira sobre qualquer uma. Acrescentado no Sprint 7, ao tirar do