/* ═══════════════════════════════════════════════════════════════════════════
Briefenta AI — TOKENS · revisão 2026-08-23
INSTALADO COMO OVERRIDE: este arquivo é carregado DEPOIS de ds.css,
style.css e public.css, então ele vence sem que uma única linha dos 1356
do ds.css precise ser editada. Para reverter, remova o .
Quando a migração terminar, mova este conteúdo para dentro do ds.css e
apague os aliases da seção 9.
Regras do sistema, em uma linha cada:
· Toda cor de preenchimento tem uma tinta obrigatória (--on-*). Nunca #fff.
· Toda cor tem valor nos dois temas. Um token de um tema só é um bug.
· Texto usa 3 níveis; os 3 passam AA em qualquer superfície do sistema.
· Espaçamento e tamanho de fonte só saem da escala. Sem valor literal.
═══════════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────────
1. FONTE — família única (Plus Jakarta Sans, variável 400–700)
Cabinet Grotesk sai: 3 arquivos (~60 KB) a menos, uma família a menos para
manter, e o papel de "display" passa a ser peso 700 + tracking negativo.
A monoespaçada é a da máquina — nenhum arquivo novo, nenhum CDN.
─────────────────────────────────────────────────────────────────────────── */
:root {
--font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: var(--font-body);
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
/* ── 2. ESCALA TIPOGRÁFICA — 10 degraus, raiz 16px ──────────────────────
Os 34 tamanhos de hoje caem aqui. Nada de meio-pixel. */
--fs-050: 0.75rem; /* 12 — micro-rótulo, eyebrow, badge */
--fs-100: 0.8125rem; /* 13 — legenda, texto de ajuda, nota de rodapé */
--fs-200: 0.875rem; /* 14 — UI secundária, célula de tabela, botão sm */
--fs-300: 0.9375rem; /* 15 — CORPO PADRÃO (app e público convergem) */
--fs-400: 1.0625rem; /* 17 — lead curto, primeiro parágrafo */
--fs-500: 1.25rem; /* 20 — h4 / título de cartão */
--fs-600: 1.5rem; /* 24 — h3 / valor de KPI */
--fs-700: 1.875rem; /* 30 — h2 de seção */
--fs-800: 2.375rem; /* 38 — h1 de tela interna */
--fs-900: 3rem; /* 48 — h1 do hero (desktop) */
/* campos: 16px SEMPRE. Abaixo disso o iOS dá zoom ao focar. */
--fs-input: 1rem;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--lh-tight: 1.15; /* h1, h2, números grandes */
--lh-snug: 1.3; /* h3–h5, botões */
--lh-normal: 1.55; /* corpo */
--lh-relaxed: 1.7; /* texto legal, manual */
--tr-display: -0.022em; /* h1/h2 — o que o Cabinet dava por desenho */
--tr-tight: -0.01em; /* h3–h5 */
--tr-normal: 0;
--tr-wide: 0.08em; /* eyebrow em caixa alta */
/* ── 3. ESCALA DE ESPAÇAMENTO — base 4px ────────────────────────────────
É o token que faltava para a Fase 5 existir. O mapa das utilidades do
Bootstrap está em 01-tokens/DE-PARA.md. */
--sp-0: 0;
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-7: 32px;
--sp-8: 40px;
--sp-9: 48px;
--sp-10: 64px;
--sp-11: 80px;
--sp-12: 96px;
/* ── 4. FORMA ───────────────────────────────────────────────────────────
6 raios cobrem os 83 usos de hoje (3 tokens + 11 valores avulsos). */
--r-xs: 6px; /* badge, chip pequeno */
--r-sm: 8px; /* botão, campo */
--r-md: 10px; /* alerta, cartão interno */
--r-lg: 14px; /* cartão */
--r-xl: 18px; /* cartão de destaque, modal */
--r-pill: 999px;
--bw: 1px; /* espessura única. O 1,5px do público vira 1px. */
--bw-thick: 2px; /* só para estado (foco, seleção) */
/* ── 5. ALVO DE TOQUE E DENSIDADE ───────────────────────────────────────
Duas densidades. Em ponteiro grosso, a compacta vira confortável. */
--tap-min: 44px;
--ctl-h-sm: 32px; /* desktop, dentro de tabela */
--ctl-h-md: 40px; /* padrão */
--ctl-h-lg: 48px; /* CTA da landing */
/* ── 6. LAYOUT ────────────────────────────────────────────────────────── */
--sidebar-w: 230px;
--topbar-h: 56px;
--footer-h: 40px;
--wrap-max: 1140px;
--wrap-narrow: 760px;
}
@media (pointer: coarse) {
:root { --ctl-h-sm: var(--tap-min); --ctl-h-md: var(--tap-min); }
}
/* ═══════════════════════════════════════════════════════════════════════════
7. COR — TEMA CLARO
Cada linha traz a razão de contraste calculada contra a superfície onde o
token é usado de verdade. Nenhum par abaixo de 4.5:1 para texto e 3:1 para
borda/indicador.
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* superfícies */
--bg: #f5f6fa;
--surface: #ffffff;
--surface-2: #f7f8fc; /* thead, rodapé de tabela, faixa alternada */
--surface-3: #eef0f7; /* barra de progresso, trilho, skeleton */
/* bordas — a "md" agora atinge 3:1 e pode carregar significado */
--border: #e6e9f2; /* separador decorativo */
--border-md: #8b93b2; /* 3.04:1 sobre branco — borda de campo */
--border-strong: #5f6684; /* 5.64:1 — campo em foco/erro */
/* texto — três níveis, todos AA */
--text-1: #10142a; /* 18.17:1 surface · 16.83:1 bg */
--text-2: #454c6e; /* 8.36:1 surface · 7.74:1 bg */
--text-3: #5f6684; /* 5.64:1 surface · 5.23:1 bg */
/* marca */
--brand: #4361ee; /* preenchimento */
--brand-ink: #2f49c9; /* 7.20:1 — a marca COMO TEXTO/ÍCONE */
--brand-soft: #eef1fd; /* fundo de badge/ícone */
--on-brand: #ffffff; /* 5.02:1 sobre --brand */
/* semânticas — fill / ink (texto) / soft (fundo) / on (tinta sobre fill) */
--green: #067a5b; --green-ink: #06614a; --green-soft: #e6faf5; --on-green: #ffffff; /* 5.33:1 */
--amber: #f4a60a; --amber-ink: #7a5200; --amber-soft: #fef7e7; --on-amber: #3d2600; /* 6.98:1 */
--red: #c81e1e; --red-ink: #b42318; --red-soft: #fef2f2; --on-red: #ffffff; /* 5.74:1 */
--purple: #6d28d9; --purple-ink: #5b21b6; --purple-soft: #f3effe; --on-purple: #ffffff; /* 7.10:1 */
--pink: #be185d; --pink-ink: #a3145a; --pink-soft: #fdf2f8; --on-pink: #ffffff; /* 6.04:1 */
/* azul do LinkedIn — DESTINO, não identidade. Ver regra em DIAGNOSTICO §5 */
--linkedin: #0a66c2; --linkedin-hover: #004182; --on-linkedin: #ffffff;
/* ── superfície inversa (o antigo --sb-*) ───────────────────────────────
Renomeada porque 6 dos 7 usos estavam fora da sidebar: hero, faixa navy,
rodapé público e painel de autenticação. Agora o nome diz o papel. */
--inverse: #141e3c;
--inverse-2: #1a2650;
--inverse-text: #ffffff; /* 16.40:1 */
--inverse-text-2: rgba(255, 255, 255, 0.72); /* 9.01:1 */
--inverse-text-3: rgba(255, 255, 255, 0.62); /* 7.06:1 — era .28 (2.50) */
--inverse-label: rgba(255, 255, 255, 0.62); /* rótulo de grupo da sidebar */
--inverse-border: rgba(255, 255, 255, 0.12);
--inverse-hover: rgba(255, 255, 255, 0.08);
--inverse-active-bg: rgba(255, 255, 255, 0.14);
--inverse-brand: #a9c1ff; /* 9.18:1 — marca sobre navy */
/* ── anel de foco (P16) — um só, em todo o produto ────────────────────── */
--ring: #2f49c9; /* 7.20:1 sobre branco, 6.67:1 sobre --bg */
--ring-inverse: #ffffff; /* sobre navy */
--ring-width: 2px;
--ring-offset: 2px;
--ring-halo: rgba(47, 73, 201, 0.22);
/* sombras */
--sh-1: 0 1px 2px rgba(16, 20, 42, 0.06);
--sh-2: 0 4px 20px rgba(67, 97, 238, 0.09);
--sh-3: 0 12px 42px rgba(16, 20, 42, 0.14);
color-scheme: light;
}
/* ═══════════════════════════════════════════════════════════════════════════
8. COR — TEMA ESCURO
Muda o valor, nunca o papel. Note as tintas --on-*: no escuro os
preenchimentos clareiam, então a tinta escurece. É isso que conserta os 19
lugares que escreviam color:#fff à mão.
═══════════════════════════════════════════════════════════════════════════ */
[data-theme='dark'] {
--bg: #0e1526;
--surface: #141e3c;
--surface-2: #1a2650;
--surface-3: #223066;
--border: rgba(255, 255, 255, 0.10);
--border-md: rgba(255, 255, 255, 0.30);
--border-strong: rgba(255, 255, 255, 0.52);
--text-1: #f3f5fc; /* 15.05:1 surface · 16.71:1 bg */
--text-2: #b6bedd; /* 8.90:1 surface · 9.88:1 bg */
--text-3: #98a1c2; /* 6.41:1 surface · 7.12:1 bg */
--brand: #7b9fff;
--brand-ink: #a9c1ff; /* 9.18:1 sobre --surface */
--brand-soft: rgba(123, 159, 255, 0.16);
--on-brand: #0b1120; /* 7.39:1 — era #fff a 2.55:1 */
--green: #2ad4a4; --green-ink: #5ce0bb; --green-soft: rgba(42, 212, 164, 0.16); --on-green: #04241b; /* 8.68:1 */
--amber: #f9bb3c; --amber-ink: #f7c76a; --amber-soft: rgba(249, 187, 60, 0.16); --on-amber: #3d2600; /* 8.27:1 */
--red: #f87171; --red-ink: #fca5a5; --red-soft: rgba(248, 113, 113, 0.16); --on-red: #3b0a0a; /* 6.15:1 */
--purple: #a680f5; --purple-ink: #c4a7fb; --purple-soft: rgba(166, 128, 245, 0.16);--on-purple: #1b0b3a; /* 6.08:1 */
--pink: #f472b6; --pink-ink: #f9a8d4; --pink-soft: rgba(244, 114, 182, 0.16); --on-pink: #3d0a25; /* 6.25:1 */
--linkedin: #3f92e0; --linkedin-hover: #6aacea; --on-linkedin: #08203a;
--inverse: #0b1120; /* funde com o fundo — efeito desejado */
--inverse-2: #141e3c;
--inverse-text-3: rgba(255, 255, 255, 0.62); /* 7.62:1 */
--inverse-brand: #a9c1ff; /* 10.54:1 */
--ring: #a9c1ff; /* 9.18:1 sobre --surface, 10.19:1 sobre --bg */
--ring-halo: rgba(169, 193, 255, 0.24);
--sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
--sh-2: 0 4px 20px rgba(0, 0, 0, 0.35);
--sh-3: 0 12px 42px rgba(0, 0, 0, 0.5);
color-scheme: dark;
}
/* ═══════════════════════════════════════════════════════════════════════════
9. ALIASES DE TRANSIÇÃO
Mantêm as 1356 linhas atuais do ds.css e as 602 do public.css funcionando
sem edição, com as cores novas. Some quando a Etapa 5 do guia terminar.
═══════════════════════════════════════════════════════════════════════════ */
:root, [data-theme='dark'] {
--brand-lt: var(--brand-soft);
--brand-md: var(--brand-ink);
/* --accent saiu de vez: 0 consumidores desde a Etapa 8, e o ds.css deixou
de declara-lo. Nao ha o que apelidar. */
--green-lt: var(--green-soft);
--amber-lt: var(--amber-soft);
--red-lt: var(--red-soft);
--purple-lt: var(--purple-soft);
--pink-lt: var(--pink-soft);
--sb-bg: var(--inverse);
--sb-bg2: var(--inverse-2);
--sb-border: var(--inverse-border);
--sb-text: var(--inverse-text-3);
--sb-text-hi: var(--inverse-text);
--sb-label: var(--inverse-label);
--sb-hover: var(--inverse-hover);
--sb-active-bg: var(--inverse-active-bg);
--sb-active: var(--inverse-text);
--r-card: var(--r-lg);
--r-btn: var(--r-sm);
--shadow-card: var(--sh-2);
--shadow-pop: var(--sh-3);
}
/* removidos: --sidebar-collapsed e --sb-badge-bg (0 usos, ver GUIA §CSS morto) */
/* ═══════════════════════════════════════════════════════════════════════════
10. PONTE BOOTSTRAP — o que muda junto com os tokens
Sem isso, os 328 usos de m*-N/p*-N/g-N continuam fora da escala.
═══════════════════════════════════════════════════════════════════════════ */
:root, [data-bs-theme='light'], [data-bs-theme='dark'] {
--bs-body-font-size: var(--fs-300); /* era 13px */
--bs-body-line-height: var(--lh-normal);
--bs-border-width: var(--bw);
--bs-border-radius: var(--r-sm);
--bs-border-radius-sm: var(--r-xs);
--bs-border-radius-lg: var(--r-lg);
--bs-border-radius-xl: var(--r-xl);
--bs-secondary-color: var(--text-3); /* text-body-secondary: 67 usos */
}
/* o botão do Bootstrap passa a ter tamanho e tinta declarados (P3, P8) */
.btn { --bs-btn-font-size: var(--fs-200); --bs-btn-padding-y: 9px; --bs-btn-padding-x: var(--sp-4); }
/* CORRECAO (auditoria 23/08/2026) — o min-height saiu dos tres seletores.
O .btn do Bootstrap e inline-block, e min-height num inline-block nao
centraliza: a linha e desenhada a partir do topo e a altura extra sobra
embaixo. Em @media (pointer: coarse) o pacote forcava 44px, entao todo
celular ficaria com o rotulo colado no topo do botao. A altura vem do
padding, que funciona em inline-block e chega no mesmo alvo de toque.
E o .btn-sm PRECISA redeclarar o padding. A regra .btn acima empata em
especificidade (0,1,0) com a `.btn-sm` do bootstrap.min.css e vence por
ordem de carga -- sem estas duas declaracoes os 51 botoes pequenos do app
herdariam 9px/16px e virariam do tamanho de um botao normal, quebrando as
linhas de acao de subject_form.html (21 usos), subject_view.html (8) e
pipeline.html (6). */
.btn-sm { --bs-btn-font-size: var(--fs-100); --bs-btn-padding-y: 4px; --bs-btn-padding-x: var(--sp-2); }
.btn-lg { --bs-btn-font-size: var(--fs-300); --bs-btn-padding-y: 13px; --bs-btn-padding-x: var(--sp-6); }
/* alvo de toque de ~44px em ponteiro grosso, por padding e nao por min-height */
@media (pointer: coarse) {
.btn { --bs-btn-padding-y: 11px; }
.btn-sm { --bs-btn-padding-y: 11px; }
/* CORRECAO (24/08/2026) — os botoes dentro de um .btn-group-sm NAO tem a
classe .btn-sm: eles casam por `.btn-group-sm > .btn` do Bootstrap, que e
(0,2,0) e vence as duas linhas acima, ambas (0,1,0). Sem esta linha o alvo
de 44px nao alcanca UMA unica barra de acao de tabela do produto -- que e
justamente onde ficam Ver/Editar/Gerar/Remover. Mesma armadilha de
especificidade documentada na secao 11. */
.btn-group-sm > .btn { --bs-btn-padding-y: 11px; }
}
.btn-primary { --bs-btn-color: var(--on-brand); --bs-btn-hover-color: var(--on-brand); --bs-btn-active-color: var(--on-brand); }
.btn-success { --bs-btn-color: var(--on-green); --bs-btn-hover-color: var(--on-green); }
.btn-warning { --bs-btn-color: var(--on-amber); --bs-btn-hover-color: var(--on-amber); }
.btn-danger { --bs-btn-color: var(--on-red); --bs-btn-hover-color: var(--on-red); }
.btn-info { --bs-btn-color: var(--on-purple);--bs-btn-hover-color: var(--on-purple); }
/* as 6 utilidades de espaçamento mais usadas passam a sair da escala */
.mb-1,.mt-1,.me-1,.ms-1 { --u: var(--sp-1); }
.mb-2,.mt-2,.py-2 { --u: var(--sp-2); }
.mb-3,.g-3,.gap-3 { --u: var(--sp-4); }
.mb-4,.mt-4 { --u: var(--sp-6); }
.mb-1 { margin-bottom: var(--sp-1) !important; }
.mb-2 { margin-bottom: var(--sp-2) !important; }
.mb-3 { margin-bottom: var(--sp-4) !important; }
.mb-4 { margin-bottom: var(--sp-6) !important; }
.mb-5 { margin-bottom: var(--sp-9) !important; }
.mt-1 { margin-top: var(--sp-1) !important; }
.mt-2 { margin-top: var(--sp-2) !important; }
.mt-3 { margin-top: var(--sp-4) !important; }
.mt-4 { margin-top: var(--sp-6) !important; }
.me-1 { margin-right: var(--sp-1) !important; }
.me-2 { margin-right: var(--sp-2) !important; }
.py-2 { padding-top: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; }
.py-3 { padding-top: var(--sp-4) !important; padding-bottom: var(--sp-4) !important; }
.g-3 { --bs-gutter-x: var(--sp-4); --bs-gutter-y: var(--sp-4); }
.gap-2 { gap: var(--sp-2) !important; }
.gap-3 { gap: var(--sp-4) !important; }
/* ═══════════════════════════════════════════════════════════════════════════
11. FOCO GLOBAL — substitui o :focus-visible atual e o outline:none do
public.css:551. Uma regra, todo o produto, os dois temas.
═══════════════════════════════════════════════════════════════════════════ */
/* Base de baixa especificidade: pega , , [tabindex] e todo
elemento que ninguem neutralizou.
CORRECAO — o `border-radius: var(--r-xs)` saiu daqui. border-radius nao e
propriedade do outline: ela deforma o proprio elemento. Como esta regra
carrega por ultimo, ela venceria qualquer raio declarado antes, e o
.topbar-avatar (border-radius: 50%, ds.css:706) virava um quadrado de canto
6px enquanto estivesse com o foco. O outline moderno ja acompanha o raio do
elemento sozinho. O box-shadow tambem saiu da base e foi para o bloco
especifico abaixo, para nao empilhar dois aneis. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset);
}
/* CORRECAO — o bloco que faz o anel existir de verdade.
`:where()` contribui ZERO para a especificidade, entao a regra acima vale
so (0,1,0) e PERDE para quem apaga o foco hoje:
.btn:focus-visible { outline: 0 } bootstrap 5.3.3 (0,2,0)
.form-control:focus { outline: 0 } bootstrap 5.3.3 (0,2,0)
(havia um terceiro, `.field input:focus { outline: none }` do public.css,
que a Etapa 2 apagou junto com a geometria antiga do campo. O !important
continua necessario pelos dois do Bootstrap, que vem de CDN.)
Especificidade e avaliada ANTES da ordem de carga, entao carregar depois
nao resolve -- era a premissa do pacote e ela nao se sustenta aqui. Sem
este bloco, "o anel de foco em todo o produto" nao alcanca um unico botao
Bootstrap, nenhum .form-control e nenhum campo de /login, /signup,
/esqueci-senha e /redefinir-senha.
O !important esta so no `outline`, que e a unica propriedade que precisa
ser garantida contra o `outline:0`. */
.btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible,
.nav-link:focus-visible, .page-link:focus-visible, .accordion-button:focus-visible,
.dropdown-item:focus-visible, .btn-close:focus-visible,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
outline: var(--ring-width) solid var(--ring) !important;
outline-offset: var(--ring-offset);
box-shadow: 0 0 0 4px var(--ring-halo);
}
/* CORRECAO — superficie navy.
A classe `.on-inverse` que o pacote exige nao existe em nenhum dos 29
templates do produto (grep: 0 ocorrencias); ela so aparece nas telas de
referencia do proprio pacote. Sem os seletores reais abaixo, o anel escuro
(--ring: #2f49c9) cairia sobre a sidebar navy a 2.28:1 -- uma REGRESSAO
frente aos 7.04:1 de hoje. `.on-inverse` fica na lista para o dia em que
as telas das Etapas 3 e 4 passarem a usa-la. */
.sidebar :focus-visible,
.auth-aside :focus-visible,
.pub-footer :focus-visible,
.pub-section.navy :focus-visible,
.on-inverse :focus-visible {
outline-color: var(--ring-inverse) !important;
box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
12. TINTA SOBRE PREENCHIMENTO — acrescentado na auditoria de 23/08/2026
A Etapa 0 prometia consertar "os 32 pares de contraste que reprovam WCAG AA
hoje" trocando o valor dos tokens --on-*. Medido: os --on-* so tem
consumidor nos 5 seletores .btn-* que a secao 10 redeclara. Todo o resto
escreve `color: #fff` LITERAL (35 ocorrencias no ds.css, 18 no public.css),
e literal nao consulta token nenhum -- entao esses pares ficariam
exatamente como estao.
O caso decisivo: `.verify-banner-btn` (ds.css:883) e `#fff` sobre
`var(--amber)`, e --amber e bit a bit identico antes e depois do pacote
(#f4a60a claro / #f9bb3c escuro). Ele mede 2.04:1 no claro e 1.72:1 no
escuro. E o botao que o 00-DIAGNOSTICO chama de "o caso pior do produto, o
unico caminho de saida de uma conta bloqueada" -- e o LEIA-ME manda abrir
justamente esse banner como prova de que a correcao entrou.
As regras abaixo ligam os --on-* a esses pontos. Continuam dentro do
tokens.css: nenhuma linha de ds.css ou public.css e editada.
═══════════════════════════════════════════════════════════════════════════ */
/* Toasts do app.js (124 chamadas de showToast nos templates). O ds.css:279-284
usa `color: #fff !important`, entao aqui tambem precisa de !important --
empata em especificidade (0,1,0) e vence por ordem de carga. */
.text-bg-primary { color: var(--on-brand) !important; }
.text-bg-success { color: var(--on-green) !important; }
.text-bg-danger { color: var(--on-red) !important; }
.text-bg-warning { color: var(--on-amber) !important; }
.text-bg-info { color: var(--on-purple) !important; }
/* --text-3 e o preenchimento aqui; --surface e a cor que contrasta com ele
nos dois temas (branco no claro, navy no escuro). */
.text-bg-secondary { color: var(--surface) !important; }
/* Botoes outline no hover: ds.css:222-239 fixa --bs-btn-hover-color: #fff.
No escuro isso da 1.72:1 no ambar e 2.55:1 na marca. Sao 49 usos. */
.btn-outline-primary { --bs-btn-hover-color: var(--on-brand); --bs-btn-active-color: var(--on-brand); }
.btn-outline-success { --bs-btn-hover-color: var(--on-green); --bs-btn-active-color: var(--on-green); }
.btn-outline-warning { --bs-btn-hover-color: var(--on-amber); --bs-btn-active-color: var(--on-amber); }
.btn-outline-danger { --bs-btn-hover-color: var(--on-red); --bs-btn-active-color: var(--on-red); }
.btn-outline-info { --bs-btn-hover-color: var(--on-purple); --bs-btn-active-color: var(--on-purple); }
/* O caso pior do produto: 2.04:1 -> 6.98:1 no claro, 1.72:1 -> 8.27:1 no escuro. */
.verify-banner-btn { color: var(--on-amber); }
/* Demais pontos que pintam #fff sobre preenchimento tokenizado. */
.credit-chip:hover { color: var(--on-brand); }
.credit-chip.is-low:hover { color: var(--on-amber); }
.credit-chip.is-empty:hover { color: var(--on-red); }
.btn-ghost:hover { color: var(--on-brand); }
.help-dot:hover,
.help-dot:focus-visible { color: var(--on-brand); }
.ob-num { color: var(--on-brand); }
.manual-steps > li::before { color: var(--on-brand); }
/* A regra de .badge-new que existia aqui saiu junto com o proprio .badge-new
na Etapa 8: o seletor tinha 0 usos, entao a correcao de contraste dele nao
tinha alvo. */
/* ═══════════════════════════════════════════════════════════════════════════
13. CELULAR — acrescentado em 24/08/2026
O usuario abriu /app no iPhone e a tela nao servia. Os quatro itens abaixo
sao do SHELL e valem para o produto inteiro; o reflow da tabela de assuntos
em si esta em style.css, junto do resto da tela.
═══════════════════════════════════════════════════════════════════════════ */
/* ds.css:421, 427 e 590 travam o shell em `height: 100vh`. No iOS 100vh e a
viewport GRANDE — a de barra do Safari recolhida —, sempre maior que o
visivel. A base da gaveta e a .user-area, unico caminho para "Minha conta",
"Planos" e "Sair da conta", e ela cai atras da barra; o overflow:hidden do
.app-shell impede rolar ate la. A primeira linha e o fallback para quem nao
entende dvh. A referencia do pacote usa 100dvh pelo mesmo motivo. */
.app-shell, .sidebar, .main-wrap { height: 100vh; }
.app-shell, .sidebar, .main-wrap { height: 100dvh; }
@media (pointer: coarse) {
/* (a regra de 16px nos campos que ficava aqui virou permanente na secao 14:
agora vale em toda largura, nao so em ponteiro grosso.) */
/* O hamburguer e o UNICO controle que abre a navegacao no celular, e media
34x34 (ds.css:641). .icon-btn e classe propria do ds.css e ficou fora do
bloco coarse. Ela ja e flex centralizado, entao crescer mantem o icone no
meio. No desktop os 34px ficam e as barras densas nao mudam de altura. */
.icon-btn { width: var(--tap-min); height: var(--tap-min); }
}
/* Os badges dos templates usam .bg-*, e nao .text-bg-*: a secao 12 nao os
alcancava. O Bootstrap 5.3.3 declara `--bs-badge-color: #fff` DENTRO da
propria regra .badge, entao a tinta nao e herdada, e fixa; e nenhum
--bs-*-rgb e remapeado por ds.css, por este arquivo ou pelo bloco
[data-bs-theme=dark] do Bootstrap. O pior caso e o badge "Agendado":
#fff sobre o ciano cru #0dcaf0 = 1.96:1, igual nos dois temas.
O !important vai so no background, porque o .bg-* do Bootstrap ja traz
`background-color: ... !important`; o `color` nao precisa, porque
`.badge.bg-*` e (0,2,0) e vence o #fff de `.badge`, que e (0,1,0). */
.badge.bg-primary { background-color: var(--brand) !important; color: var(--on-brand); }
.badge.bg-success { background-color: var(--green) !important; color: var(--on-green); }
.badge.bg-danger { background-color: var(--red) !important; color: var(--on-red); }
.badge.bg-warning { background-color: var(--amber) !important; color: var(--on-amber); }
.badge.bg-info { background-color: var(--purple) !important; color: var(--on-purple); }
.badge.bg-secondary { background-color: var(--text-3) !important; color: var(--surface); }
/* ═══════════════════════════════════════════════════════════════════════════
14. CAMPO — um sistema, cinco estados Etapa 2 do guia, 24/08/2026
O produto tinha DOIS campos com geometrias diferentes: o `.form-control` do
Bootstrap nas telas internas (13px, raio 8px) e o `.field input` do
public.css nas telas publicas e de autenticacao (13,5px, padding 10/13,
borda 1,5px, raio 10px). Aqui os dois passam a ser o mesmo, e as duas
definicoes antigas sairam do ds.css e do public.css -- nao ha override
competindo, ha uma definicao so.
A fonte e --fs-input (16px) SEMPRE, inclusive no desktop. Nao e capricho: o
Safari do iOS da zoom automatico em qualquer campo abaixo de 16px, a
viewport pula ~1,2x e a pagina desloca de lado. Era o primeiro toque de quem
abria o produto no celular. Isto substitui a regra so-para-coarse que estava
na secao 13.
═══════════════════════════════════════════════════════════════════════════ */
.form-control, .form-select,
.field input, .field select, .field textarea {
width: 100%;
font-family: inherit;
font-size: var(--fs-input);
color: var(--text-1);
min-height: var(--ctl-h-md);
padding: var(--sp-2) var(--sp-3);
/* background-COLOR, nunca o atalho `background`: o .form-select desenha a
seta com background-image, e o atalho a apagaria. */
background-color: var(--surface);
border: var(--bw) solid var(--border-md);
border-radius: var(--r-sm);
transition: border-color 0.15s;
}
/* 1. repouso — acima. 2. hover */
.form-control:hover, .field input:hover, .field textarea:hover {
border-color: var(--border-strong);
}
/* 3. foco — o anel vem da secao 11, uma regra para o produto inteiro. Aqui so
a borda, que e o que muda dentro do campo. */
.form-control:focus, .form-select:focus,
.field input:focus, .field select:focus, .field textarea:focus {
border-color: var(--brand-ink);
}
/* 4. erro */
.form-control.is-invalid, .form-select.is-invalid,
[aria-invalid='true'] {
border-color: var(--red);
border-width: var(--bw-thick);
}
/* 5. desabilitado */
.form-control:disabled, .form-select:disabled,
.field input:disabled, .field textarea:disabled {
background-color: var(--surface-3);
color: var(--text-3);
cursor: not-allowed;
}
.form-control::placeholder,
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
/* a seta do .form-select precisa de espaco a direita, que o padding acima tirou */
.form-select { padding-right: var(--sp-8); }
.field textarea, textarea.form-control { min-height: 160px; line-height: var(--lh-normal); resize: vertical; }
/* O botao de olho da senha e absoluto DENTRO do campo, e o public.css ja
reservava 42px para ele -- mas este arquivo carrega depois e o padding
acima apagaria a reserva, deixando o texto por baixo do botao. */
.field-pwd input { padding-right: 42px; }
/* rotulo: 12px ao lado de um campo de 16px ficava desproporcional */
.form-label, .field label {
font-size: var(--fs-100);
font-weight: var(--fw-semibold);
color: var(--text-2);
}
/* ═══════════════════════════════════════════════════════════════════════════
15. FAMÍLIAS DE COMPONENTE — Etapa 5 do guia 24/08/2026
Uma receita por componente, no lugar de N reescritas. O vocabulário do
produto NÃO muda: as classes que os 29 templates já usam (.card, .badge,
.btn) são remapeadas para a receita do sistema. Trocar para os nomes da
referência (.superficie, .rotulo, .btn-primario) obrigaria a reescrever os
29 templates para ganhar exatamente o mesmo pixel.
═══════════════════════════════════════════════════════════════════════════ */
/* ── 15.1 SUPERFÍCIE ────────────────────────────────────────────────────────
Doze regras repetiam "fundo --surface + borda 1,5px --border + raio". As
três declarações saíram de cada uma delas (ds.css e public.css) e vivem
aqui. `.superficie` fica disponível para tela nova; o produto de hoje chega
pela mesma receita através do `.card`. */
.superficie,
.card,
.table-card, .user-menu, .onboarding-steps li, .manual-toc, .flow-step, .manual-faq,
.step, .feature, .billing-toggle, .plan-card, .pack, .faq-item,
.modal-content {
background-color: var(--surface);
border: var(--bw) solid var(--border);
border-radius: var(--r-lg);
}
/* três guardam raio próprio de propósito: a pílula da alternância, o cartão de
plano em destaque e o menu da conta. */
.billing-toggle { border-radius: var(--r-pill); }
.plan-card { border-radius: var(--r-xl); }
.user-menu { border-radius: var(--r-md); }
/* `.superficie-cab` e flex; o `.card-header` do produto NAO -- ha 10 deles sem
`d-flex`, e virar container flex faria cada trecho de texto e cada virar
um item separado, com o espaco entre eles colapsado. Quem precisa de linha ja
escreve `d-flex` no template. Daqui o cabecalho leva so a tipografia e o
espacamento do sistema. */
.superficie-cab {
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.superficie-cab, .card > .card-header {
padding: var(--sp-4) var(--sp-5);
background-color: var(--surface-2);
border-bottom: var(--bw) solid var(--border);
font-family: var(--font-display);
font-size: var(--fs-300); font-weight: var(--fw-semibold);
letter-spacing: var(--tr-tight);
color: var(--text-1);
}
.superficie-corpo, .card > .card-body { padding: var(--sp-5); }
.superficie-rodape {
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.superficie-rodape, .card > .card-footer {
padding: var(--sp-4) var(--sp-5);
background-color: var(--surface-2);
border-top: var(--bw) solid var(--border);
}
/* ── 15.2 RÓTULO ────────────────────────────────────────────────────────────
Os 62 badges do produto eram preenchimento SÓLIDO com tinta por cima — o que
obriga a acertar contraste em cada par e, no tema escuro, brigava com a
superfície. Passam para fundo --*-soft com tinta --*-ink: a mesma família de
token, calibrada nos dois temas, e o rótulo para de competir com o conteúdo.
O !important é obrigatório: o `.bg-*` do Bootstrap já traz um.
Os toasts (.text-bg-*, seção 12) continuam sólidos — ali o ponto é saltar. */
.badge {
display: inline-flex; align-items: center; gap: var(--sp-1);
font-size: var(--fs-050); font-weight: var(--fw-semibold); line-height: 1;
padding: 5px var(--sp-2);
border-radius: var(--r-xs);
white-space: nowrap;
}
.badge.bg-primary { background-color: var(--brand-soft) !important; color: var(--brand-ink); }
.badge.bg-success { background-color: var(--green-soft) !important; color: var(--green-ink); }
.badge.bg-danger { background-color: var(--red-soft) !important; color: var(--red-ink); }
.badge.bg-warning { background-color: var(--amber-soft) !important; color: var(--amber-ink); }
.badge.bg-info { background-color: var(--purple-soft) !important; color: var(--purple-ink); }
.badge.bg-secondary { background-color: var(--surface-3) !important; color: var(--text-2); }
/* `.text-dark` acompanha 14 dos badges âmbar e passaria por cima da tinta */
.badge.bg-warning.text-dark { color: var(--amber-ink) !important; }
.badge.bg-info.text-dark { color: var(--purple-ink) !important; }
/* ── 15.3 BOTÃO — os cinco estados ──────────────────────────────────────────
Tamanho e tinta já entraram na seção 10. O que faltava era a matriz de
estados: desabilitado e a variante destrutiva, que no produto é
`.btn-outline-danger` (7 usos) e não tinha tratamento próprio. */
.btn:disabled, .btn.disabled, .btn[aria-disabled='true'] {
opacity: 0.5; cursor: not-allowed;
}
/* Destrutiva: borda neutra em repouso para não gritar, vermelha só quando a
pessoa já está com o ponteiro em cima. */
.btn-outline-danger {
--bs-btn-color: var(--red-ink);
--bs-btn-border-color: var(--border-md);
--bs-btn-hover-bg: var(--red-soft);
--bs-btn-hover-color: var(--red-ink);
--bs-btn-hover-border-color: var(--red);
--bs-btn-active-bg: var(--red-soft);
--bs-btn-active-color: var(--red-ink);
}
/* Fantasma: a ação terciária, sem borda até o hover. */
.btn-ghost, .btn-link {
--bs-btn-color: var(--text-2);
--bs-btn-border-color: transparent;
--bs-btn-hover-color: var(--text-1);
--bs-btn-hover-bg: var(--surface-3);
--bs-btn-hover-border-color: transparent;
text-decoration: none;
}
/* O azul do LinkedIn é cor de DESTINO: só em ação cujo destino é o LinkedIn. */
.btn-linkedin {
--bs-btn-bg: var(--linkedin);
--bs-btn-border-color: var(--linkedin);
--bs-btn-color: var(--on-linkedin);
--bs-btn-hover-bg: var(--linkedin-hover);
--bs-btn-hover-border-color: var(--linkedin-hover);
--bs-btn-hover-color: var(--on-linkedin);
--bs-btn-active-bg: var(--linkedin-hover);
--bs-btn-active-color: var(--on-linkedin);
}
/* ── 15.4 DIÁLOGO DE CONFIRMAÇÃO ────────────────────────────────────────────
O