/* ═══════════════════════════════════════════════════════════════════════════
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: var(--pink); /* --accent nunca foi visto em tela. Morre aqui. */
--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; }
}
.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)
.field input:focus { outline: none } public.css:551 (0,2,1)
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); }
/* .badge-new (ds.css:545) pinta #fff sobre um gradiente que termina em
var(--accent). A secao 9 apelida --accent para --pink, que no escuro e
#f472b6 -- #fff sobre ele da 2.5:1. O gradiente e decorativo e nao precisa
seguir o tema: fixado no par que passa AA nos dois. */
.badge-new { background: linear-gradient(135deg, #6382ff, #be185d); color: #fff; }