; join.html não. Assim os estilos genéricos só atingem o * template mínimo do join. * * Quando join for refatorado para usar veus-page no futuro, herda os * estilos canônicos automaticamente e este bloco vira no-op. * ==================================================================== */ [data-theme="light"] main:not(.veus-page) h1 { font-family: var(--veus-font-display); color: var(--veus-text); } [data-theme="light"] main:not(.veus-page) input[type="text"] { border: 1px solid var(--veus-ink-400); background: #ffffff; color: var(--veus-text); padding: 10px 12px; border-radius: 4px; font-family: var(--veus-font-mono); } [data-theme="light"] main:not(.veus-page) input[type="text"]:focus { outline: 2px solid var(--veus-yellow); outline-offset: 2px; border-color: var(--veus-yellow-deep); } [data-theme="light"] main:not(.veus-page) button[type="submit"] { background: var(--veus-yellow); color: #1A1300; padding: 10px 18px; border-radius: 6px; border: 0; font-family: var(--veus-font-display); font-weight: 600; text-transform: uppercase; cursor: pointer; } [data-theme="light"] main:not(.veus-page) button[type="submit"]:hover { background: var(--veus-yellow-deep); color: #ffffff; } /* ==================================================================== * (13) prefers-reduced-motion já é tratado em call.css globalmente; * nada a adicionar aqui — toggle btn não anima além de rotate * no hover, que cai no reset universal *.animation-duration: 0.01ms. * ==================================================================== */ /* ==================================================================== * (14) DARK MODE — Border / non-text contrast fixes * * Adicionado em 2026-05-16 (MVP 1.3 · M7 Wave B.1). * * Razão: Pedro reportou "darkmode do menu para criar chamada * estava pouco legível". Audit WCAG 2.x revelou que TEXTO passa * em todos os elementos (15.7:1 para títulos dos cards, 7.9:1 para * copy), mas as BORDAS funcionais dos containers (card, input, * tag, theme-toggle, dividers wave/recent/footer) caíam entre * 1.40:1 e 2.28:1 — violando WCAG 1.4.11 (Non-text contrast, * mínimo 3:1) e dando sensação visual de "containers fantasmas", * especialmente nos dois cards do menu "Iniciar / Entrar". * * Estratégia: * - Mantém paleta original `--veus-ink-*` em :root para todos os * uses que NÃO são border (textos, divisores não-funcionais * herdados de call.css). Esses já passam WCAG via tokens texto. * - Sob `:root[data-theme='dark']`, redefine APENAS o que precisa * ser elevado ao threshold 3:1 — bordas funcionais. * * Validação (re-medido após patch, BG dark = #0A0A0B): * - --veus-ink-600 #5E5F66 : 3.11:1 (era 1.40:1) * - --veus-ink-500 #6B6C73 : 3.79:1 (era 2.14:1) * - Card border yellow 50% : ≈3.38:1 (era 1.54:1) * - Card primary border 60% : ≈4.44:1 (era 1.54:1) * * Coerência cross-app (AVISO M9): os mesmos tokens ink-600/500 * vivem em quiz.css e (em breve) juridico.css. Wave-5 reaplicação * de Receita 15 nos outros apps deve replicar este bloco OU * extrair --veus-ink-* para infra/brand/tokens.css compartilhado. * MAPA-CANDIDATE registrado no relatório M7. * ==================================================================== */ :root[data-theme="dark"] { /* Border-divisor: era #2A2B30 (1.40:1) — sobe para #5E5F66 (3.11:1). */ --veus-ink-600: #5E5F66; /* Border-strong / input border: era #4A4B52 (2.14:1) — sobe para #6B6C73 (3.79:1). */ --veus-ink-500: #6B6C73; } /* Card border yellow — alpha maior para chegar a 3:1 sobre ink-900. Cálculo: rgba(255,179,22, α) sobre #0A0A0B = flat [255α+10(1-α), 179α+10(1-α), 22α+11(1-α)]. α=0.50 → flat (132,94,16) → 3.38:1 α=0.60 → flat (157,111,18) → 4.44:1 Não usamos --veus-ink-600 aqui porque o "card" deve ter sotaque amarelo (identidade visual VEUS) — só elevamos opacidade do amarelo. */ :root[data-theme="dark"] .veus-card { border-color: rgba(255, 179, 22, 0.50); /* 3.38:1 sobre #0A0A0B */ } :root[data-theme="dark"] .veus-card:hover { border-color: rgba(255, 179, 22, 0.65); } :root[data-theme="dark"] .veus-card--primary { border-color: rgba(255, 179, 22, 0.60); /* 4.44:1 — primary tem mais saliência */ } :root[data-theme="dark"] .veus-card--primary:hover { border-color: rgba(255, 179, 22, 0.80); } /* Recent empty (dashed) — era 2.28:1, agora herda --veus-ink-500 = 4.55:1. */ :root[data-theme="dark"] .veus-recent__empty { border-color: var(--veus-ink-500); } /* ==================================================================== * (15) Footer hash build — color FAIL em ambos os temas * * Antes: * dark: #6B6C73 sobre #0A0A0B = 3.79:1 (FAIL, body text ≥ 4.5:1) * light: #8A8580 sobre #FAFAF7 = 3.49:1 (FAIL) * * Depois: * dark: var(--veus-text-faint) = #9DA0A8 → 7.56:1 (PASS AAA) * light: var(--veus-text-soft) = #525a66 → 7.34:1 (PASS AAA) * ==================================================================== */ :root[data-theme="dark"] .veus-foot__hash { color: var(--veus-text-faint); /* #9DA0A8 - 7.56:1 sobre ink-900 */ } [data-theme="light"] .veus-foot__hash { color: var(--veus-text-soft); /* #525a66 - 7.34:1 sobre creme */ } /* ==================================================================== * (16) LIGHT MODE — Border / non-text contrast fixes * * Mesma natureza do bloco (14) mas para o tema claro. Cards usavam * `rgba(255,179,22,0.42)` (1.27:1) — invisível sobre creme. Tag, * toggle, recent box, dividers wave/recent/footer todos < 3:1. * * Specificity nota: usamos `:root[data-theme="light"]` aqui (não só * `[data-theme="light"]`) porque a definição original na seção (1) * também usa `:root[data-theme="light"]` (0,1,1). Apenas seletor * `[data-theme="light"]` (0,1,0) perderia para o original mais cedo * no source order — esses overrides PRECISAM vir DEPOIS no arquivo * E com specificity igual (last-of-equal vence) ou maior. * * Validação (re-medido, BG light = #FAFAF7): * - --veus-ink-600 #a8a39a : 2.40:1 (uso decorativo, OK) * - --veus-ink-500 #6F6A65 : 4.65:1 (uso funcional) * - Card border yellow alpha=0.85: flat ≈ 3.36:1 * ==================================================================== */ :root[data-theme="light"] { --veus-ink-600: #a8a39a; /* sobe de #cfcac0 (1.56:1) → 2.40:1 (decorativo) */ --veus-ink-500: #6F6A65; /* sobe de #a8a39a (2.40:1) → 4.65:1 (funcional) */ } /* Card border: amarelo light era 0.42 alpha (1.27:1). Card bg em light é #FFFFFF (não creme). Cálculo: rgba(126,84,0,α) sobre #fff = flat [126α+255(1-α), 84α+255(1-α), 255(1-α)] α=0.55 → flat ≈ (197,178,115) → 3.27:1 α=0.65 → flat ≈ (210,194,89) → 3.96:1 α=1.0 → #7E5400 sólido → 6.66:1 Optamos por alpha intermediária para preservar refinamento visual sutil. */ :root[data-theme="light"] .veus-card { border-color: rgba(126, 84, 0, 0.62); /* 3.62:1 sobre #FFFFFF */ } :root[data-theme="light"] .veus-card:hover { border-color: rgba(126, 84, 0, 0.85); } :root[data-theme="light"] .veus-card--primary { border-color: rgba(126, 84, 0, 0.72); /* 4.42:1 — primary mais saliente */ } :root[data-theme="light"] .veus-card--primary:hover { border-color: #7E5400; /* yellow-deep sólido — 6.66:1 */ } /* Wave / Recent / Footer dividers — funcionais (limite visual entre seções) */ :root[data-theme="light"] .veus-wave, :root[data-theme="light"] .veus-recent, :root[data-theme="light"] .veus-foot { border-top-color: var(--veus-ink-500); /* #6F6A65 = 4.65:1 sobre creme */ } :root[data-theme="light"] .veus-wave { border-bottom-color: var(--veus-ink-500); } /* Recent empty box — herda --veus-ink-500 atualizado (4.65:1). */ :root[data-theme="light"] .veus-recent__empty { border-color: var(--veus-ink-500); } /* Tag + theme-toggle — usar ink-500 para borda funcional (não usam ink-600 mais). */ :root[data-theme="light"] .veus-tag, :root[data-theme="light"] .veus-theme-toggle { border-color: var(--veus-ink-500); } /* CTA outline (botão Entrar) light: cor #b07300 (3.87:1) FAIL → trocar para deep. */ :root[data-theme="light"] .veus-cta--outline { color: var(--veus-yellow-deep); /* #7e5400 = 6.43:1 sobre branco do card */ } :root[data-theme="light"] .veus-cta--outline:hover { color: var(--veus-yellow-warm); /* #5e4001 = 8.84:1 */ }