/* OVEYON Mail — PORTAL DO CLIENTE. Folha PRÓPRIA, self-hosted, sem recurso externo
(nenhuma fonte/CDN — CSP-ready). Superfície distinta do painel do operador
(admin.css): esta é a porta de entrada do cliente, com visual de produto.
── RODADA 2 DA DÍVIDA DE CSS (05/08/2026) ─────────────────────────────────
1. VOCABULÁRIO ÚNICO. As duas folhas passam a definir os MESMOS nomes de
token. Antes, regras copiadas de lá para cá referenciavam nomes que aqui
não existiam (--surface, --ink, --line…) e caíam num fallback CRAVADO:
`var(--surface, #fff)`. Isso não é uma rede de segurança — é um bug
silencioso: o fallback é fixo, então o modal de mensagem do cliente
renderizava BRANCO no tema escuro. Agora os nomes resolvem e o componente
acompanha o tema.
2. VALORES DE SAÚDE unificados pela MEDIDA de contraste, não por qual folha é
dona. O caso que motivou: --ok #1e7e46 sobre --ok-bg dava 4.49:1 e REPROVAVA
AA em TODO sinal de sucesso do cliente (flash, toast, badge, checklist).
Com o valor do painel são 5.12:1.
3. TEMA MANUAL. O portal ganhou os seletores [data-theme] que só o painel
tinha: o cliente deixa de ficar preso à preferência do sistema.
O que NÃO foi unificado, de propósito: --accent (a ação de produto, não o
navy do operador) e --radius (12px de produto vs 8px de painel denso).
São divergências DECLARADAS, com motivo — não dívida.
── RODADA 6 — A PALETA DO REDESENHO (22/08/2026) ──────────────────────────
O portal adota a paleta do mockup: trocam VALORES, nunca NOMES. A folha já
falava só por token, então a mudança inteira cabe em quatro blocos.
O número que sustenta a decisão: as duas folhas definem 72 tokens em comum e
65 resolvem no MESMO valor. As SETE que sobram são IDENTIDADE (--accent,
--accent-hover, --focus) e DENSIDADE (--btn-pad-y/-x, --btn-fs, --radius) —
e são as sete que continuam divergindo, de propósito, cada uma marcada
«DIVERGENTE» na sua linha.
Os outros 65 são SIGNIFICADO — tinta, superfície, os quatro estados de saúde,
a borda de campo — e mudaram IGUAIS no admin.css, no mesmo commit. Um --ok
que é um verde na tela do cliente e outro na do operador é a divergência
SILENCIOSA: ninguém decidiu, ninguém revisa.
AGORA COM VETO: test/portalContraste.test.js lê os tokens das DUAS folhas,
mede os pares contra a superfície declarada de cada um (nunca sobre branco) e
reprova divergência nova. Divergência declarada passa; divergência inventada,
não. Documento não veta — teste veta. */
/* ── A FONTE DO REDESENHO (22/08/2026) — AUTO-HOSPEDADA ─────────────────────
O mockup sempre pediu Figtree (corpo) e JetBrains Mono (dado), na primeira
linha do :
O port nunca as trouxe. Não foi decisão: nenhum documento do redesenho cita
família, e a folha ficou em system-ui/ui-monospace por OMISSÃO. Isso não é
detalhe de acabamento — é a montante de toda medida de fidelidade: cada
largura de coluna e cada quebra de linha ajustada na fonte do sistema muda
de novo quando a fonte certa entra. Por isso ela entra PRIMEIRO.
PESOS: os do do mockup e mais nenhum — medido no HTML, `font-weight`
aparece em 500 (17×), 600 (367×) e 700 (161×), mais o 400 do corpo. Os dois
arquivos são VARIÁVEIS (fvar wght: Figtree 300–900, JetBrains Mono 400–800),
então os quatro pesos saem de UM arquivo por subset — não há economia em
cortar peso, e o `font-weight: 400 700` declara a faixa que o produto usa.
SUBSETS: latin + latin-ext, e a razão do segundo NÃO é o português —
medido: os acentos de pt-BR («ç» U+00E7, «ã» U+00E3, «é» U+00E9) moram todos
em U+0000-00FF, ou seja, no subset `latin`, e varrendo as 15 telas
renderizadas não há um único caractere na faixa do `latin-ext`. Hoje o
navegador baixa só os dois arquivos `latin`: 51,6 KB.
O `latin-ext` entra como SEGURO, e o seguro tem sinistro nomeado: assunto de
e-mail, nome de remetente e domínio de cliente são texto de terceiro. Um
«ș» romeno, um «ł» polonês ou um «ā» num nome faria AQUELA letra cair na
fonte de sistema no meio da palavra — o defeito tipográfico mais visível que
existe, e o que menos aparece em teste. 21,9 KB que só descem quando a letra
aparece (é para isso que serve o `unicode-range`).
Os outros quatro subsets que o Google serve (cyrillic, cyrillic-ext, greek,
vietnamese) não vêm. Total em disco: 4 arquivos, 73 KB.
Fora dos dois subsets ficam, de propósito, as setas e os símbolos que o
produto usa (→ ✓ ⊘ ↻ ✕ ↗): 172 ocorrências nas 15 telas, e nenhuma das duas
famílias os desenha — eles resolvem na fonte de sistema, como sempre
resolveram.
POR QUE AUTO-HOSPEDADA e não o do mockup: o produto não depende de
terceiro em runtime (é a primeira linha desta folha desde sempre), e a
privacidade do cliente não passa por fonts.gstatic.com a cada carga.
URL RELATIVA e não /public/fonts/…: a folha é servida em /public/portal.css
em produção (resolve para /public/fonts/…) E é copiada para a raiz do
snapshot de design por scripts/designSnapshot.js (resolve para fonts/… ao
lado). Uma URL absoluta funcionaria só no primeiro caso, e o snapshot — o
instrumento com que se MEDE esta fidelidade — mediria com a fonte errada.
CACHE: o ?v= do portalAssetVersion carimba portal.css e portal.js,
não estes arquivos, e está certo assim. Fonte é asset IMUTÁVEL: se um dia
uma face precisar mudar, ela entra com NOME NOVO e a folha passa a apontar
para ele — o que busta o cache com garantia, e não por efeito colateral do
mtime de outro arquivo.
LICENÇA: as duas são SIL OFL 1.1. Os textos vieram junto, em
public/fonts/OFL-Figtree.txt e public/fonts/OFL-JetBrainsMono.txt. */
@font-face {
font-family: "Figtree";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(fonts/figtree-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Figtree";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(fonts/figtree-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400 500;
font-display: swap;
src: url(fonts/jetbrainsmono-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400 500;
font-display: swap;
src: url(fonts/jetbrainsmono-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
color-scheme: light dark;
/* Marca OVEYON Mail (mesma família do painel, tom mais quente/produto). */
--brand: #16405f;
--brand-2: #1f6699;
/* ── DIVERGÊNCIA DECLARADA 1 de 2: IDENTIDADE ─────────────────────────────
Estas TRÊS linhas (--accent, --accent-hover, --focus) e as quatro de
DENSIDADE lá embaixo (--btn-pad-y/-x, --btn-fs, --radius) são as ÚNICAS
sete que divergem do admin.css. Medido, não estimado: as duas folhas
definem 72 nomes em comum e 65 resolvem no MESMO valor.
A regra que separa as duas categorias, e o motivo de a lista ser curta:
• SIGNIFICADO — tinta, superfície, ok/warn/bad/info, borda de campo —
é IGUAL nas duas folhas. Um --ok que é um verde na tela do cliente e
outro na do operador é divergência SILENCIOSA: ninguém decidiu, ninguém
revisa, e o dia em que uma das duas sair do AA a outra continua verde.
• IDENTIDADE e DENSIDADE são divergências que alguém DECIDIU. O portal é
a porta de entrada do cliente (azul de produto, folgado); o painel é
sala de controle (navy do operador, denso).
RODADA 6 (22/08/2026) — o valor mudou, a divergência ficou. O azul do
portal passa a ser o do redesenho: #2563eb, medido 5,17:1 com --accent-ink
branco (era #2f6df0). O painel segue em #1f6699. Continuam duas identidades
— agora a do cliente é a que o mockup desenhou. */
--accent: #2563eb; /* ação primária — DIVERGENTE (painel: #1f6699) */
--accent-ink: #ffffff;
--accent-hover: #1d4fd7; /* DIVERGENTE (painel: #16405f) */
/* Anel de foco em cor CHEIA (antes era color-mix a 55%, que media 2.93:1
sobre --bg e ficava abaixo do 3:1 exigido de indicador de foco).
Herda a divergência de --accent por construção: 4,74:1 sobre --bg. */
--focus: var(--accent); /* DIVERGENTE por herança de --accent */
/* ── SUPERFÍCIE — RODADA 6: valores do redesenho, nomes intactos ───────────
A folha inteira já fala por token, então trocar a paleta é trocar SÓ estas
linhas. As duas bordas movem em DIREÇÕES OPOSTAS de propósito: --border
afrouxa (1,29 → 1,21:1 sobre --panel) e --border-strong aperta (1,53 →
1,65:1). Abrir o vão entre elas é o ponto — se toda linha grita, nenhuma
informa. Nenhuma das duas está sob 1.4.11: divisor de cartão é enfeite, e a
norma escreve a exceção. O CONTROLE tem token próprio (--field-border, logo
abaixo) exatamente para não depender disto. */
--bg: #f4f5f8;
/* O fundo do mockup é chapado; aqui ele continua lavado por dois radiais.
Medido para não virar buraco: --muted dá 4,56:1 sobre --bg-grad-a e 4,73:1
sobre --bg-grad-b — os dois cantos ficam ACIMA do 4,5 do fundo liso. */
--bg-grad-a: #e7eef7;
--bg-grad-b: #f4f1ec;
--panel: #ffffff;
--panel-2: #fbfcfd;
--border: #e7e9ee;
--border-strong: #c3cad4;
/* ── A BORDA DO CAMPO ──────────────────────────────────────────────────────
Token novo, gêmeo do de admin.css, e pelo mesmo motivo medido: a borda de
input/select era `--border-strong`, que sobre --panel dá **1,53:1**. WCAG
1.4.11 pede 3:1 para elemento não-textual, e aqui incide com força total
porque a borda é a ÚNICA fronteira do campo — o preenchimento do campo é
--panel e o cartão em volta também.
O portal estava um degrau MELHOR que o painel (1,53 contra 1,29) porque já
usava a linha «forte» em vez da comum. Um degrau numa escala que precisava
de dois: mais perto do certo é indistinguível de errado quando o mínimo é
um número.
#79879a mede 3,66 · 3,49 · 3,38:1 sobre --panel, --panel-2 e --bg. Mesmo
valor nas duas folhas DE PROPÓSITO: o campo é o componente que o cliente e
o operador usam para a mesma coisa, e divergir aqui seria a «divergência
silenciosa» que o dono apontou na linha de base. */
/* RODADA 6 — o mockup desenha a borda de campo em #dde1e7, que sobre --panel
mede 1,4:1. É o MESMO defeito que a rodada 5 pagou aqui, e ele não volta:
este token não acompanha o redesenho. 3,66 · 3,56 · 3,35:1 sobre --panel,
--panel-2 e --bg — folga nas três, com a paleta nova. */
--field-border: #79879a;
--text: #0f172a;
/* RODADA 6 — o mockup escreve a tinta secundária em CINCO valores (#52607a,
#5f6c80, #667283, #4e617f, #5b6979) para um papel só. Vence #5f6c80, e por
medida: #667283 sobre --panel-2 dá 4,48:1 e REPROVA — é a substituição que
o próprio HANDOFF-deltas §5 registra. #5f6c80 dá 5,33 · 4,88 · 5,18:1 sobre
--panel, --bg e --panel-2, e ainda 4,7:1 no pior tint (--neutral-bg). */
--muted: #5f6c80;
/* Tinta TERCIÁRIA: só objeto gráfico (ícone). Mede 3.11:1 sobre --panel —
cruza o 3:1 de objeto gráfico e NÃO chega aos 4.5:1 de corpo. Texto pequeno
que usava este token migrou para --muted na rodada 2.
RODADA 6 — NÃO adota o mockup. O gêmeo de lá (#8492a6) é o valor que o
HANDOFF-deltas §5 reprovou como texto (3,10:1), e o nosso é o mesmo tom
medido: trocar não compraria nada e perderia a medição. Teto honesto: os
3,11:1 valem sobre --panel; sobre --bg são 2,85:1. Ícone sobre cartão, não
sobre a página. */
--muted-2: #8494a5;
/* ── SAÚDE — RODADA 6: os quatro estados adotam a paleta do redesenho ───────
Valor NOVO, nome e papel intactos, e cada par medido contra o tint em que
é usado (nunca sobre branco — foi assim que o próprio handoff errou uma vez
e registrou o erro). ok 4,87 · warn 4,93 · bad 4,85 · info 6,03:1.
Estes doze valores são de SIGNIFICADO: mudam IGUAIS no admin.css, no mesmo
commit. Ver a divergência declarada lá em cima para a regra. */
--ok: #0b7a47; --ok-bg: #e7f7ef; --ok-bd: #bfe7d2;
--warn: #8a6304; --warn-bg: #fdf3de; --warn-bd: #f0e2b4;
--bad: #b4442f; --bad-bg: #fdedea; --bad-bd: #f0cfc8;
/* INFO É DA FAMÍLIA DA MARCA, não um azul solto. Até 28/08 era #1d4fd7 sobre
#eef4ff — o «azul do nada» que o dono viu em /app/regras, fora de uma
paleta que ele lê como terrosa. O papel (informar sem alarmar) fica; o
tom passa a ser o navy da marca sobre cinza-azulado quase neutro. */
--info: #1f4b70; --info-bg: #eef2f6; --info-bd: #cfdae6;
/* --neutral-line NÃO acompanha: é a borda do selo cinza, e o mockup não tem
um valor para esse papel — só para --border e --border-strong. #d8dee6
continua entre os dois (1,21 · 1,35 · 1,65:1), que é a ordem que ele
precisa manter. Inventar aqui seria canonizar acidente. */
--neutral: #5f6c80; --neutral-bg: #eef1f6; --neutral-line: #d8dee6;
/* ── ÂMBAR SÓLIDO — a única lacuna de cor REAL do redesenho ────────────────
Das três «lacunas» que o HANDOFF-deltas §4 alegou, duas não existem: --sh-lg
(elevação de peça flutuante) está definido logo abaixo, e --info/-bg/-bd
estão completos nos quatro blocos. Sobrou uma.
«Retida» não é aviso passivo: é um estado ATIVO que pede decisão humana, e
por isso o mockup a preenche a ~55% de saturação em vez de tingir a 8–10%
como os outros. Preenchimento sólido exige TINTA PRÓPRIA, e é aqui que
reusar o token vizinho quebraria em silêncio:
--on-solid (branco) sobre #f7e2a8 …… 1,28:1 (reprova por 3,5×)
--warn (#8a6304) sobre #f7e2a8 …… 4,24:1 (reprova)
--on-warn (#6b5410) sobre #f7e2a8 …… 5,65:1 (passa)
--on-warn é da família de --on-solid — tinta sobre PREENCHIMENTO. Nunca use
um pelo outro. E o estado entra pelo SSOT ([data-health="held"], lá
embaixo), não por componente: selo, chip, faixa, stat e tool-box ganham
«retida» sem uma linha a mais. */
--warn-solid: #f7e2a8;
--on-warn: #6b5410;
--sw-knob: #fff; /* knob do switch: objeto branco nos DOIS temas (peça física) */
/* Aliases `-line` do SSOT de saúde (replicados do admin.css). A borda de cada
estado reusa a cor de borda já definida acima — zero cor crua nova. */
--ok-line: var(--ok-bd); --warn-line: var(--warn-bd); --bad-line: var(--bad-bd); --info-line: var(--info-bd);
--faint: var(--muted-2);
/* ── APELIDOS DO PAINEL ────────────────────────────────────────────────────
Os nomes que o admin.css usa, apontando para os tokens desta folha. Existem
para matar os fallbacks cravados (`var(--line, #e6e9ef)`) que ignoravam o
tema escuro. Regra copiada de uma folha para a outra agora RESOLVE. */
--surface: var(--panel);
--surface-2: var(--bg);
--surface-3: var(--panel-2);
--ink: var(--text);
--line: var(--border);
--line-2: var(--border-strong);
/* RODADA 6 — o corpo de texto do redesenho. 8,97:1 sobre --panel e nunca
abaixo de 7,89:1 sobre qualquer um dos quatro tints de saúde. */
--tint-ink: #3c4a60; /* texto secundário sobre tint */
/* Tinta sobre preenchimento sólido/gradiente (marca). Mesmo nome e mesmo
papel do admin.css — NÃO é --accent-ink (que é escuro no tema escuro). */
--on-solid: #ffffff;
/* ── ENGAJAMENTO — o token que FALTAVA nesta folha ─────────────────────────
`statusPresentation.js:62` emite a classe `badge-engaged` para «Lido» e
«Clicado», e o handler do portal a entrega para a view. Mas a regra e o
token só existiam no admin.css: no PORTAL a pílula saía **sem cor nenhuma**
(o `.badge` base só tem forma), enquanto todo status vizinho tinha.
Achado em 22/08 pelo mapa de classes do redesenho; independente dele.
Mesmo valor do admin.css de propósito — é a convenção das classes
compartilhadas, e divergir aqui seria a divergência silenciosa. */
--engaged-bg: #0d7d78;
/* ── BOTÃO — a FORMA vira token; o PAPEL continua sendo de cada superfície ──
Ver o comentário longo em admin.css. O que é IGUAL nos dois arquivos:
--btn-*-sm, --btn-radius e --btn-min-h. É isso que faz `.btn-sm` ser a
mesma coisa na tela do cliente e na do operador. */
/* ── DIVERGÊNCIA DECLARADA 2 de 2: DENSIDADE ──────────────────────────────
Quatro linhas (--btn-pad-y, --btn-pad-x, --btn-fs e --radius, abaixo). O
portal é folgado porque a tela do cliente empilha três ações de mesmo peso;
o painel é denso porque o operador clica dezenas por dia. Isso é decisão de
produto, não dívida — e é por isso que estas quatro carregam a marca no
comentário: quem for «unificar» tem de ler o motivo antes. */
--btn-pad-y: 12px; --btn-pad-x: 16px; /* DIVERGENTE (painel: 8px/14px) */
--btn-pad-y-sm: 6px; --btn-pad-x-sm: 12px; /* IGUAL no admin.css */
--btn-radius: 6px; /* IGUAL no admin.css */
--btn-fs: var(--fs-lg); /* 15px — DIVERGENTE (painel: 14px) */
--btn-fs-sm: var(--fs-sm); /* 13px — IGUAL no admin.css */
--btn-gap: 10px;
--btn-min-h: 44px; /* alvo de toque do primário */
--radius: 12px; /* cartão/painel — DIVERGENTE (painel: 8px) */
--radius-sm: 8px; /* bloco interno, controle */
/* --radius-lg: 14px foi PEDIDO pelo redesenho e RECUSADO. Não é gosto: o
scanner de test/helpers/cssRampa.js aceita literalmente
/^var\(--radius(-sm)?\)$/ — um token NOVO reprova junto com o literal. Os
70 border-radius:14px do mockup cedem para var(--radius). */
/* --shadow/--shadow-sm VARIAM com o tema (ver os blocos de tema): a elevação
do portal é azulada no claro e preta no escuro. Ficam onde estão. */
--shadow: 0 1px 2px rgba(16,32,52,.06), 0 8px 28px rgba(16,32,52,.10);
--shadow-sm: 0 1px 2px rgba(16,32,52,.06), 0 2px 8px rgba(16,32,52,.06);
/* ── RODADA 3 — o vocabulário que as DUAS folhas passam a falar ────────────
`--sh-lg` (peça FLUTUANTE) e `--scrim` (o véu atrás dela) existem aqui com
os MESMOS valores do admin.css. Não é duplicação por descuido: o modal é o
mesmo componente nas duas superfícies e o valor já era o mesmo, escrito à
mão dos dois lados. Nomeado, uma regra copiada de lá resolve aqui.
INVARIANTES de tema (só no :root) — o véu de um modal não clareia no tema
claro, e a sombra de uma peça flutuante sobre o véu também não.
Os outros degraus da rampa do painel (--sh-sm/--sh-md/--sh-pop) NÃO vêm
junto de propósito: aqui a elevação de cartão é --shadow/--shadow-sm, que
varia com o tema. Duas rampas de sombra no mesmo arquivo seriam duas
respostas para a mesma pergunta — e nenhuma delas teria consumidor. */
--sh-lg: 0 20px 60px rgba(0,0,0,.25);
--scrim: rgba(0,0,0,.5);
/* RODADA 3 — `"SF Mono"` entra na lista. Ele já estava escrito à mão em CINCO
atalhos `font:` das duas folhas, que assim mantinham uma SEGUNDA pilha
mono quase igual a esta. Acrescentar o apelido aqui torna --mono um
superconjunto e deixa aqueles cinco lugares resolverem pelo token sem
perder nenhuma face. Inerte para quem já usava --mono: no macOS
`ui-monospace` resolve primeiro e os apelidos nunca são consultados. */
/* RODADA 7 (22/08/2026) — a família do mockup entra NA FRENTE da pilha. O
token não muda de NOME nem perde uma face: as pilhas antigas viram, na
íntegra, o fallback de quem ainda não baixou o woff2 (font-display:swap)
e do navegador que não suporta woff2. Ver o bloco @font-face acima. */
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--sans: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* ── ESCALA TIPOGRÁFICA — IDÊNTICA à do admin.css ──────────────────────────
14 degraus, conjunto fechado. Ver o comentário longo no admin.css. */
--fs-3xs: 10px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px;
--fs-md: 14px; --fs-lg: 15px; --fs-xl: 16px; --fs-2xl: 18px;
--fs-3xl: 20px; --fs-4xl: 22px; --fs-5xl: 24px; --fs-6xl: 26px;
--fs-7xl: 32px; --fs-8xl: 40px;
/* ── ESCALA DE ESPAÇO ──────────────────────────────────────────────────────
0 · 1 (fio) · 2 4 6 8 10 12 14 16 18 20 22 24 26 28 · 32 40 48 64 */
}
/* ── MODO ESCURO ────────────────────────────────────────────────────────────
TRÊS blocos, exatamente como o admin.css, e nesta ordem:
@media → default pela preferência do SISTEMA
:root[data-theme=dark] → o toggle força escuro
:root[data-theme=light] → o toggle força claro, REAFIRMANDO os valores base
O terceiro é o que faz o botão vencer nos DOIS sentidos. Sem ele, um cliente
com o sistema no escuro que pedisse claro não veria nada mudar: a media query
continuaria valendo, porque tirar o atributo não desliga a preferência do SO.
Só os valores mudam; os apelidos (--surface, --ink, --line…) herdam via var(). */
@media (prefers-color-scheme: dark) {
:root {
--brand: #cfe0f0;
--brand-2: #7fb2e6;
--accent: #5b8df5;
--accent-ink: #0b1420;
--accent-hover: #7aa3f7;
--bg: #0d141d;
--bg-grad-a: #101a26;
--bg-grad-b: #16130f;
--panel: #151f2b;
--panel-2: #1b2735;
--border: #263548;
--border-strong: #34465c;
--field-border: #6b7f95; /* 4,03:1 sobre --panel · 3,67:1 sobre --panel-2 */
--text: #e7eef6;
--muted: #9fb0c2;
--muted-2: #74869a;
--ok: #4cc07d; --ok-bg: #12271b; --ok-bd: #234c33;
--warn: #e6b855; --warn-bg: #2a2210; --warn-bd: #4d3f18;
--bad: #f08a92; --bad-bg: #2a1315; --bad-bd: #522328;
--info: #8fb6ee; --info-bg: #131f31; --info-bd: #26364f;
--neutral: #9fb0c2; --neutral-bg: #1b2735; --neutral-line: #33465c;
--ok-line: var(--ok-bd); --warn-line: var(--warn-bd); --bad-line: var(--bad-bd); --info-line: var(--info-bd);
/* ÂMBAR SÓLIDO no escuro: o par INVERTE. No claro é tinta escura sobre
preenchimento claro; aqui é o fundo da página sobre o âmbar de texto —
10,00:1. Reusar #6b5410 aqui daria tinta escura sobre tinta escura. */
--warn-solid: var(--warn); --on-warn: var(--bg);
--tint-ink: #c3d3e6;
--shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
--shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.35);
}
}
/* Toggle força escuro (vence a preferência do SO por especificidade). */
:root[data-theme="dark"] {
--brand: #cfe0f0;
--brand-2: #7fb2e6;
--accent: #5b8df5;
--accent-ink: #0b1420;
--accent-hover: #7aa3f7;
--bg: #0d141d;
--bg-grad-a: #101a26;
--bg-grad-b: #16130f;
--panel: #151f2b;
--panel-2: #1b2735;
--border: #263548;
--border-strong: #34465c;
--field-border: #6b7f95;
--text: #e7eef6;
--muted: #9fb0c2;
--muted-2: #74869a;
--ok: #4cc07d; --ok-bg: #12271b; --ok-bd: #234c33;
--warn: #e6b855; --warn-bg: #2a2210; --warn-bd: #4d3f18;
--bad: #f08a92; --bad-bg: #2a1315; --bad-bd: #522328;
--info: #8fb6ee; --info-bg: #131f31; --info-bd: #26364f;
--neutral: #9fb0c2; --neutral-bg: #1b2735; --neutral-line: #33465c;
--ok-line: var(--ok-bd); --warn-line: var(--warn-bd); --bad-line: var(--bad-bd); --info-line: var(--info-bd);
--warn-solid: var(--warn); --on-warn: var(--bg); /* par INVERTIDO — ver a media acima */
--tint-ink: #c3d3e6;
--shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
--shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.35);
}
/* Toggle força claro (re-afirma os valores base, vencendo a media escura). */
:root[data-theme="light"] {
--brand: #16405f;
--brand-2: #1f6699;
--accent: #2563eb;
--accent-ink: #ffffff;
--accent-hover: #1d4fd7;
--bg: #f4f5f8;
--bg-grad-a: #e7eef7;
--bg-grad-b: #f4f1ec;
--panel: #ffffff;
--panel-2: #fbfcfd;
--border: #e7e9ee;
--border-strong: #c3cad4;
--field-border: #79879a;
--text: #0f172a;
--muted: #5f6c80;
--muted-2: #8494a5;
--ok: #0b7a47; --ok-bg: #e7f7ef; --ok-bd: #bfe7d2;
--warn: #8a6304; --warn-bg: #fdf3de; --warn-bd: #f0e2b4;
--bad: #b4442f; --bad-bg: #fdedea; --bad-bd: #f0cfc8;
--info: #1f4b70; --info-bg: #eef2f6; --info-bd: #cfdae6;
--neutral: #5f6c80; --neutral-bg: #eef1f6; --neutral-line: #d8dee6;
--ok-line: var(--ok-bd); --warn-line: var(--warn-bd); --bad-line: var(--bad-bd); --info-line: var(--info-bd);
--warn-solid: #f7e2a8; --on-warn: #6b5410;
--tint-ink: #3c4a60;
--shadow: 0 1px 2px rgba(16,32,52,.06), 0 8px 28px rgba(16,32,52,.10);
--shadow-sm: 0 1px 2px rgba(16,32,52,.06), 0 2px 8px rgba(16,32,52,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
background-image: radial-gradient(1200px 600px at 100% -10%, var(--bg-grad-b), transparent 60%),
radial-gradient(1000px 500px at -10% 0%, var(--bg-grad-a), transparent 55%);
background-attachment: fixed;
color: var(--text);
font: var(--fs-lg)/1.55 var(--sans);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
/* Link segue a AÇÃO, não a marca. O mockup usa #2563EB em link — que é o
próprio --accent — e manter o navy da marca deixaria o link de uma cor e o
botão de outra na mesma frase. Mede 5,17:1 sobre --panel (o navy media 6,14;
os dois passam, e o desenho escolheu). */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; }
/* Foco visível e consistente (acessibilidade).
RODADA 2 — o anel era `color-mix(--accent 55%, transparent)`: medido, dava
2.93:1 contra --bg e ficava ABAIXO do 3:1 que a WCAG pede de indicador de
foco. Em cor cheia (--focus) são 4.09:1 sobre --bg e 4.60:1 sobre --panel. */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
border-radius: 6px;
}
/* ============================ AUTH (login/signup) ======================== */
.auth {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
}
.auth-card {
width: 100%;
max-width: 400px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 32px 28px 26px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
}
.brand .mark {
width: 34px; height: 34px;
flex: 0 0 34px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--brand-2), var(--accent));
display: grid; place-items: center;
color: var(--on-solid); font-weight: 800; font-size: var(--fs-2xl);
box-shadow: var(--shadow-sm);
}
.brand .name { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: .2px; color: var(--text); }
/* RODADA 2 — era var(--muted-2) (3.11:1, REPROVA AA em texto). --muted mede
5.46:1 sobre --panel. É o subtítulo da marca na primeira tela do cliente. */
.brand .name small { display: block; font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.auth-card h1 { font-size: var(--fs-4xl); margin: 0 0 4px; }
.auth-lead { color: var(--muted); margin: 0 0 22px; font-size: var(--fs-md); }
/* Botões */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--btn-gap);
width: 100%;
padding: var(--btn-pad-y) var(--btn-pad-x);
border-radius: var(--btn-radius);
border: 1px solid var(--border-strong);
background: var(--panel);
color: var(--text);
font: 600 var(--btn-fs)/1 var(--sans);
cursor: pointer;
transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--panel-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
/* OCUPADO (aria-busy) mantém `pointer-events: none`, e isso é uma TRAVA, não
estilo: o botão está no ar esperando resposta e o segundo clique mandaria a
segunda requisição. DESABILITADO perdeu a trava de propósito — `disabled` já
impede a ativação nativamente, e `pointer-events: none` só tirava do usuário
o cursor de recusa, que é o único aviso que chega ANTES do clique. Era
proteção duplicada num caso e mordaça no outro. */
.btn[aria-busy="true"] { opacity: .6; cursor: progress; pointer-events: none; }
.btn .ico { width: 18px; height: 18px; flex: 0 0 18px; display: inline-block; }
/* Botão de copiar por ÍCONE (pedido do dono, 24/08: «Copiar» → dois retângulos
sobrepostos, #ic-copy do sprite). O feedback de cópia é por CLASSE (.copied,
aplicada por wireCopy em portal.js) — trocar o texto apagaria o