/* ============================================================================ BASEFLY — CAMADA DE TOKENS Base: BRANDBOOK/basefly-tokens.css · Design System de Interface v1.0 (ago/2026) Este arquivo é a única fonte de cor, tipografia, espaçamento e forma da plataforma. Carrega ANTES de styles.css. Está dividido em três blocos: 1. Tokens BaseFly — cópia literal da especificação, não editar 2. Extensão obrigatória — tokens que a especificação não traz e sem os quais a própria verificação da seção 9 não passa (justificados um a um) 3. Camada de compatibilidade — os nomes antigos do CRM apontando para os tokens novos. É o que reveste as ~4.000 referências existentes sem tocar em uma linha de comportamento. ============================================================================ */ /* --------------------------------------------------------------------------- 1. TOKENS BASEFLY — especificação, cópia literal --------------------------------------------------------------------------- */ :root{ /* marca */ --brand-base:#070E24; --brand-primary:#2B55F5; --brand-sky:#6E92FA; --brand-signal:#FF9E1B; --brand-air:#DCE6FF; /* azul */ --blue-50:#EEF2FF; --blue-100:#DCE6FF; --blue-200:#A9C0FC; --blue-300:#6E92FA; --blue-500:#2B55F5; --blue-600:#1F44D8; --blue-700:#1A3AD4; --blue-900:#0A1F8F; /* neutros */ --n-0:#FFFFFF; --n-25:#F9FAFD; --n-50:#F5F7FC; --n-100:#EDF0F7; --n-200:#C6D6F8; --n-300:#A8B4CC; --n-500:#6B7690; --n-600:#4A5266; --n-900:#070E24; /* semânticas */ --success:#0F9D6E; --success-bg:#E6F6F0; --warning:#FF9E1B; --warning-bg:#FFF3E0; --danger:#D64545; --danger-bg:#FCEDED; --info:#2B55F5; --info-bg:#EEF2FF; /* tipografia */ --font-display:"Archivo",sans-serif; --font-text:"IBM Plex Sans",system-ui,sans-serif; --font-mono:"IBM Plex Mono",monospace; /* espaçamento */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px; /* forma */ --r-sm:6px; --r-md:8px; --r-full:9999px; --sh-card:0 1px 3px rgba(7,14,36,.06); --sh-menu:0 4px 12px rgba(7,14,36,.10); --sh-modal:0 12px 32px rgba(7,14,36,.16); } /* --------------------------------------------------------------------------- 2. EXTENSÃO OBRIGATÓRIA Cada token abaixo existe porque a seção 9 exige contraste de 4,5:1 e as cores semânticas da seção 5.5 não alcançam esse número quando usadas como TEXTO. Medido em WCAG 2.1: --success sobre --success-bg .... 3,10:1 reprovado #B36A00 sobre --warning-bg .... 3,85:1 reprovado --danger sobre --danger-bg .... 3,85:1 reprovado A correção é a mínima possível: mesma matiz, escurecida até cruzar 4,5:1 tanto no fundo suave quanto no branco. As cores de FUNDO da seção 5.5 e as cores de PREENCHIMENTO (ícone, barra, indicador) seguem intactas. --------------------------------------------------------------------------- */ :root{ --success-text:#0C7E58; /* 4,54:1 sobre --success-bg · 5,07:1 sobre --n-0 */ --warning-text:#A36000; /* 4,53:1 sobre --warning-bg · 4,96:1 sobre --n-0 */ --danger-text:#C33F3F; /* 4,50:1 sobre --danger-bg · 5,12:1 sobre --n-0 */ /* Seção 5.6: hover de item da barra lateral. A especificação dá o valor literal; declarado como token para que nenhuma regra o repita. */ --sidebar-hover-bg:rgba(255,255,255,.06); /* Tinta clara sobre superfície escura. Nasceu no tema escuro (dark.css): a barra lateral e o cabeçalho de tabela são escuros nos DOIS temas, então o texto ali não pode seguir --n-0 — que no escuro passa a ser a superfície do cartão. No tema claro este token vale exatamente o mesmo branco. */ --on-dark:#FFFFFF; /* Linha divisória sobre superfície escura. Mesmo motivo do --on-dark: a barra da apresentação e a moldura da proposta pública são escuras nos dois temas, então o separador não pode seguir --n-200, que inverte de papel. */ --on-dark-line:rgba(255,255,255,.16); /* Hover da ação de conversão. A especificação dá só o Laranja Sinal; a seção 9 exige estado de hover em cada componente, e clarear o laranja o aproxima do amarelo — então ele escurece. 6,9:1 com texto no Azul Base. */ --signal-hover:#E0850C; /* Seção 5.7: fundo de sobreposição de modal, idem. */ --overlay:rgba(7,14,36,.55); /* Seção 6: sequência de cores de série, na ordem especificada. */ --chart-1:var(--blue-500); --chart-2:var(--brand-sky); --chart-3:var(--brand-signal); --chart-4:var(--success); --chart-5:var(--blue-900); --chart-6:var(--n-500); } /* --------------------------------------------------------------------------- 3. CAMADA DE COMPATIBILIDADE Os nomes antigos continuam existindo, agora servindo BaseFly. Nenhum arquivo precisou trocar de variável, e nenhuma cor literal sobrevive aqui. Duas escolhas que valem registro: · Onde o nome antigo era usado como COR DE TEXTO (--k-green, --k-red e as verticais), o alvo é a variante -text acessível, não a cor cheia. Cor cheia em texto pequeno reprova no contraste. · --k-yellow é a exceção: o inventário mostrou que ele é usado como FUNDO (cards, bolinhas de coluna, ícones de estado), quase nunca como texto. Apontado para --warning-text ele virava um marrom #A36000 com o texto na mesma cor — invisível. Agora aponta para --warning (âmbar cheio) e o texto por cima é --brand-base. Para TEXTO âmbar use --warning-text. Segue não apontando para --brand-signal: o Laranja Sinal é da ação de conversão, um ponto por tela. --------------------------------------------------------------------------- */ :root{ /* superfícies e texto */ --bg: var(--n-50); --bg-dark: var(--n-100); --white: var(--n-0); --text: var(--n-900); --text-muted: var(--n-600); --text-light: var(--n-500); --border: var(--n-200); --border-light: var(--n-100); /* ação */ --primary: var(--blue-500); --primary-light: var(--blue-50); /* barra lateral — seção 5.6: fundo escuro, ativo em azul */ --sidebar-bg: var(--brand-base); --sidebar-hover: var(--sidebar-hover-bg); --sidebar-active: var(--blue-500); /* estados (nomes herdados do kanban) */ --k-yellow: var(--warning); /* FILL amarelo: o ambar cheio. Texto em cima: --brand-base */ --k-yellow-bg: var(--warning-bg); --k-purple: var(--blue-500); --k-purple-bg: var(--blue-50); --k-white: var(--n-0); --k-green: var(--success-text); --k-green-bg: var(--success-bg); --k-red: var(--danger-text); --k-red-bg: var(--danger-bg); --k-blue: var(--blue-700); --k-blue-bg: var(--blue-50); --k-violet: var(--blue-900); --k-violet-bg: var(--blue-50); /* verticais de produto — distinguíveis entre si e todas acessíveis como texto sobre superfície clara (mínimo medido: 4,96:1) */ --v-turnbim: var(--blue-500); --v-asbuilt: var(--warning-text); --v-coord: var(--blue-700); --v-learning: var(--blue-900); --v-gestartech: var(--n-600); --v-inovatech: var(--success-text); /* sombra */ --shadow: var(--sh-card); --shadow-md: var(--sh-menu); } /* --------------------------------------------------------------------------- 4. VARIÁVEIS QUE O CÓDIGO JÁ USAVA E NINGUÉM DECLAROU Levantadas no inventário: 11 nomes referenciados em styles.css/app.js sem nenhuma declaração correspondente — o navegador descartava a propriedade e o elemento ficava sem o estilo pretendido. Não é mudança de comportamento: é acender o que estava apagado, agora com token da marca. --------------------------------------------------------------------------- */ :root{ --border-strong: var(--n-300); --bg-light: var(--n-25); --bg-subtle: var(--n-25); --primary-bg: var(--blue-50); --k-orange: var(--warning-text); --shadow-sm: var(--sh-card); --shadow-lg: var(--sh-modal); /* fundo suave por vertical, para os chips que usam var(--v--bg) */ --v-turnbim-bg: var(--blue-50); --v-asbuilt-bg: var(--warning-bg); --v-coord-bg: var(--blue-50); --v-learning-bg: var(--blue-50); --v-gestartech-bg: var(--n-100); --v-inovatech-bg: var(--success-bg); }