/* ============================================================================ ShvIA / ANNA — Design Tokens (fonte única da verdade) ---------------------------------------------------------------------------- Carregue ESTE arquivo ANTES de qualquer outro CSS, em qualquer tela. Os blocos :root duplicados que existiam em app.css e chat-workspace.css foram REMOVIDOS para que estes valores não sejam sobrescritos (eles carregam depois deste arquivo e venciam por ordem de cascata). ── Redesign ANNA (jun/2026) · "console de inferência local" ── • MARCA = AZURE (--azure). Antes a marca era verde-água (#54c6a5); agora o VERDE é só STATUS (online / saudável / sucesso). Âmbar = atenção; vermelho = erro/offline. Ver o de-para nos "BRIDGES" no fim do bloco. • Tipografia: Space Grotesk (identidade/headers) · IBM Plex Sans (leitura) · IBM Plex Mono (telemetria/código/dados, com tabular-nums). • Referência visual canônica: .continue/anna-chat-mockup.html Temas: 10 presets (8 escuros + Paper/Sépia claros) — ver bloco abaixo. O `color-scheme` é por preset; NÃO assuma dark em regra nova. ============================================================================ */ :root { /* Widgets NATIVOS (select aberto, checkbox, scrollbar) em dark: sem isto o WebKit (WKWebView/WebKitGTK) pinta o chrome nativo de BRANCO num app dark-only — ex.: selects do painel de perfil. */ color-scheme: dark; /* ── Superfícies (ramp dark frio e calmo, em camadas) ─────────────────── */ --bg: #0B0F17; --bg-2: #0E131D; --bg-3: #131A26; --bg-4: #19212F; --line: rgba(150, 170, 200, 0.10); --line-2: rgba(150, 170, 200, 0.18); /* ── Texto ───────────────────────────────────────────────────────────── */ --tx: #ECF1F8; --tx-dim: #97A3B5; --tx-faint: #5E6B82; /* ── Marca / identidade (AZURE) ──────────────────────────────────────── */ --azure: #34B3EC; --azure-deep: #0071BD; --azure-strong: #5FC8F5; --azure-soft: rgba(52, 179, 236, 0.12); --azure-line: rgba(52, 179, 236, 0.35); --on-accent: #04121D; /* texto SOBRE a marca (avatar/tab ativa/botões); temas claros de marca escura sobrescrevem p/ branco */ /* ── Status (cor COM função) ─────────────────────────────────────────── */ --green: #2BD576; --green-soft: rgba(43, 213, 118, 0.12); /* online / saudável / sucesso */ --amber: #F5C242; --amber-soft: rgba(245, 194, 66, 0.12); /* atenção / instrução / parar */ --red: #EF6E6E; --red-soft: rgba(239, 110, 110, 0.12); /* erro / offline / destrutivo */ --violet: #9B8CFF; /* ── Lados de um confronto (Debate A↔B, 27/08/2026) ─────────────────────── Cor de IDENTIDADE, não de status: diz QUEM falou, não se está bem. O lado A é este teal; o lado B reusa `--amber` — que é o mesmo #F5C242 que o mockup chama de "gold". Não criei um alias `--gold`: dois nomes para uma cor é exatamente o que este arquivo existe para impedir. Reservadas para a futura tela de transcrição (bolha de cada lado na sua cor). ⚠️ Cor NUNCA é o único sinal: a ficha traz a letra (A/B) e o cartão traz o rótulo ("Lado A"). É por isso que o tema `mono` pode desmanchar o par sem quebrar a tela. Medido nos 10 temas contra o `--bg-2` de cada um (o fundo em que o token é desenhado). Este valor passa em 8: default 10.49 · terracota 9.89 · cerrado 9.68 · oceano 10.01 · floresta 10.00 · nebulosa 10.36 · high-contrast 11.51 — todos acima do `--green` do próprio tema. Os dois que falham (paper 1.57, sepia 1.44 — teal claro sobre papel) têm override abaixo, e o `mono` tem override por ser cinza por contrato. */ --teal: #3BD9BE; --teal-soft: rgba(59, 217, 190, 0.13); /* ── Paleta de PROVEDORES do Painel (D9) ───────────────────────────────── Oito cores, atribuídas por ORDEM DE CONSUMO do dia — o servidor já devolve `consumo.por_provedor` ordenado por tokens, justamente para a cor de um provedor não trocar entre dois renders da mesma tela. Do nono em diante, tudo colapsa em `--prov-outros`, neutro. 🔴 Por que OITO e não "os cinco provedores" da spec: são 22 provedores de nuvem em `config/providers.php` mais até 20 servidores on-prem (`srvN`), e 10 presets de tema. Um token por provedor seriam 420 combinações a validar. Oito é o teto em que as cores ainda se distinguem entre si num ponto de 3px. CRITÉRIO DE CONTRASTE: 3:1 (WCAG 2.1 SC 1.4.11, componente NÃO-textual). Estes valores pintam o ponto da nuvem e o quadradinho da legenda — o nome do provedor ao lado é `--tx`, nunca a cor do provedor. Se algum dia alguém usar um `--prov-*` em TEXTO, o critério vira 4.5:1 e esta paleta não serve. Medido por `node scripts/prova-paleta-do-painel.mjs` contra os quatro fundos (`--bg`..`--bg-4`) dos DEZ presets: 0 falhas, pior caso 3.29:1 (`--prov-5` sobre o `--bg-4` do sépia). A prova roda no CI e é o que impede a próxima cor de entrar no olho. Overrides em paper/sepia (fundo claro), mono (cinza por contrato) e high-contrast — mesma estrutura do `--teal` acima. */ --prov-1: #35C4A8; /* teal */ --prov-2: #B98BF0; /* violeta*/ --prov-3: #F07A8A; /* rosa */ --prov-4: #5AA9FF; /* azul */ --prov-5: #F2D06B; /* amarelo*/ --prov-6: #6FD98A; /* verde */ --prov-7: #FF9E5A; /* laranja*/ --prov-8: #7FD6E8; /* ciano */ --prov-outros: var(--tx-faint); /* ── O acento do "agora" (D4) ──────────────────────────────────────────── Marca SÓ o que está acontecendo neste instante; tudo que já aconteceu é neutro. Aponta para `--amber`, então acompanha os dez presets de graça. ⚠️ O mockup usa o MESMO valor para "live" e para "aviso" (#F0A33A nos dois). Aqui eles se separam: o saldo zerado é pintado com `--red`, não com âmbar. Saldo em zero não é "atenção" — é "a próxima chamada a este provedor falha", e merece o vermelho. Sem essa separação, a régua do saldo zerado e o acento do "agora" ficariam indistinguíveis na mesma tela. */ --live: var(--amber); /* ── Papéis de mensagem (chat) ───────────────────────────────────────── */ --user: #1A2230; /* superfície da mensagem do usuário */ --assistant: #131A26; /* superfície sutil da resposta da ANNA (= --bg-3) */ /* ── Tipografia ──────────────────────────────────────────────────────── */ --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Space Grotesk', var(--font-sans); --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; /* aliases curtos (nomes usados no mockup) */ --sans: var(--font-sans); --disp: var(--font-display); --mono: var(--font-mono); /* ── Métricas de leitura ─────────────────────────────────────────────── */ --read: 760px; /* largura da coluna de leitura do chat */ --composer: 960px; /* card do input, mais largo que --read: os 4 selects (Infra/Modelo/Esforço/Saída) + refresh + saldo cabem numa linha (24/07 — em 760/840px quebrava em 2). */ --rd: 14px; /* raio padrão do mockup */ /* ── Raios ───────────────────────────────────────────────────────────── */ --radius-xl: 28px; /* shells / cartões grandes */ --radius-lg: 22px; /* cartões */ --radius-md: 16px; /* botões / inputs */ --radius-sm: 12px; /* chips / campos compactos */ --radius-pill: 999px;/* badges / toasts */ /* ── Movimento ──────────────────────────────────────────────────────── Regra do produto (PRODUCT.md): movimento é ESTADO, não decoração. Curvas de desaceleração natural — nada de bounce/elastic, que chamam atenção pra própria animação. Duração: feedback ≤150ms, mudança de estado ~200ms, camada nova (modal) ~240ms. Saída é ~75% da entrada. */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 130ms; /* press, cor, hover */ --dur: 200ms; /* troca de estado */ --dur-slow: 240ms; /* overlay / camada */ /* ── Elevação / sombras (escala dark multinível) ─────────────────────── */ --shadow-xs: 0 1px 2px rgba(3, 8, 14, 0.32); --shadow-sm: 0 2px 6px rgba(3, 8, 14, 0.34); --shadow-md: 0 8px 20px rgba(3, 8, 14, 0.38); --shadow-lg: 0 14px 40px rgba(3, 8, 14, 0.40); --shadow-xl: 0 24px 80px rgba(3, 8, 14, 0.42); --shadow: 0 24px 80px rgba(3, 8, 14, 0.42); /* ── BRIDGES (compat) — nomes antigos → nova paleta ────────────────────── Mantêm app.css / chat-workspace.css / admin.css funcionando SEM reescrita, já adotando a nova identidade. As fases Chat/Admin do redesign vão trocar usos específicos por estes tokens diretamente (ex.: badge "Ativo" → --green em vez de --accent). */ --bg-soft: rgba(14, 19, 29, 0.84); /* glass frio (era #0f141b) */ --surface-strong: rgba(25, 33, 47, 0.96); /* glass forte frio (→ bg-4) */ --text: var(--tx); --muted: var(--tx-dim); --accent: var(--azure); /* ★ marca: verde-água → AZURE */ --accent-strong: var(--azure-strong); --status-ok: var(--green); /* "ok/online" agora é VERDE (era dourado) */ --status-ok-ring: var(--green-soft); --status-warning: var(--amber); /* aviso agora é ÂMBAR (era vermelho) */ --status-warning-ring: var(--amber-soft); --status-offline: var(--red); --status-offline-ring: var(--red-soft); --sidebar-bg: rgba(11, 15, 23, 0.92); --sidebar-border: var(--line); --sidebar-card: rgba(19, 26, 38, 0.78); --sidebar-card-strong: rgba(25, 33, 47, 0.92); } /* ============================================================================ ENTRADAS (24/07) — popover dos selects e modais ---------------------------------------------------------------------------- @keyframes e NÃO transition disparada por JS: o estado DEFAULT do elemento é o visível, e a animação só reproduz o deslocamento inicial. Se a animação não rodar (aba oculta, renderizador headless, motor sem rAF), o conteúdo aparece igual — gated visibility é como um popover "some" de vez. Aprendido na marra: a 1ª versão usava opacity:0 inline + requestAnimationFrame e ficava invisível quando o rAF não vinha. Regra dura aqui: as entradas animam SÓ transform, nunca opacity. Num renderizador que congela animações em t=0 (aconteceu no harness headless), um `from { opacity: 0 }` deixa o elemento INVISÍVEL pra sempre; já um deslocamento congelado é imperceptível (4px fora do lugar). Movimento que pode custar a visibilidade do conteúdo não vale o efeito. ============================================================================ */ @keyframes shvia-pop-in { from { transform: translateY(5px); } } @keyframes shvia-box-in { from { transform: translateY(10px); } } .select-pop { animation: shvia-pop-in var(--dur) var(--ease-out-quart); } .shvia-modal-box { animation: shvia-box-in var(--dur-slow) var(--ease-out-quart); } /* ============================================================================ MOVIMENTO REDUZIDO — rede de segurança global (24/07) ---------------------------------------------------------------------------- Duas camadas, de propósito: 1. Zera os TOKENS de duração: como todo movimento novo usa var(--dur*), o sistema inteiro para sem precisar de !important nem seletor universal. 2. Varredura universal como rede: pega as transições legadas que ainda têm duração cravada no CSS (0.15s ease e afins) e qualquer @keyframes. Os blocos pontuais que já existiam (barras da GPU, spinner do Code, pulso do status) seguem valendo — este bloco os cobre também. ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================ THEME PRESETS — F3/O1 do roadmap hermes/odysseus ---------------------------------------------------------------------------- O bloco :root acima é o tema canônico (dark-glass, marca AZURE). Para usar outro preset, defina data-theme="" no (o shell injeta inline no antes do CSS para evitar FOUC). Tokens derivados (--accent, --bg-soft, --surface-strong, --sidebar-*) re-apontam aqui porque são "bridges" que mantêm app.css / chat-workspace.css / admin.css funcionando sem reescrita. Available presets: dark-glass → canonical (default when data-theme is absent) terracota → warm, distinctive (terracotta brand) cerrado → golden earth, MUSTARD brand (terracotta becomes --violet) oceano → deep petrol blue (cyan-teal brand) floresta → forest green, focus and calm (leaf-green brand) nebulosa → night violet (lavender brand) paper → light, high contrast for daytime reading sepia → warm light, aged paper (sienna brand) mono → pure greyscale, "terminal" feel high-contrast → WCAG AAA (bright text on near-black) radar → cyan console (04/09/2026): electric-cyan brand on a blue-black ground, glow ONLY where there is state (the active item, the live tile, the send button) and a faint grid on the panel's ground. Two tokens exist only here, --glow and --tex; consumers read them with a fallback (`var(--glow, none)`), so the other ten presets are untouched. Sync points when adding a preset (ALL of them; checked 24/07, and locked since 04/09 by tests/Unit/PresetsDeTemaSincronizadosTest.php): 1. this file (the :root[data-theme=...] block) 2. public/js/shvia-theme.js (PRESETS) 3. the inline no-FOUC of layouts/shell.blade.php and dashboard.blade.php 4. resources/views/partials/theme-nofouc.blade.php ← used by the ADMIN, login, compare and prices pages; forgetting this one makes the guard drop the choice back to dark-glass ON THOSE screens (the cerrado bug, 2.41.5) 5. the profile chips (dashboard.blade.php) + the swatch in chat-workspace.css 6. the 'in:' rule of Api/AccountController::update 7. the label in lang/{en,pt_BR}/settings.php (theme_) Cores em tema CLARO: --azure-strong é a versão mais ESCURA da marca (e não a mais clara) — é o token pra TEXTO sobre fundo claro. --on-accent é o texto SOBRE a marca (vira branco quando a marca é escura). --azure-line é a marca em ~35% pra bordas/filetes. ⚠️ Auditado em 24/07 (2.39.1→2.42.x): chat, composer, painel de conta, admin, login/cadastro, Modo Code, popovers e modais do JS seguem os tokens, com scanner WCAG (0 falhas <4.5:1). Ao criar superfície nova: NUNCA hex fixo nem rgba(255,255,255,.0x) — o vidro branco some nos temas claros. ============================================================================ */ /* ── terracota (5º preset, F3/O1+#1 do feedback 13/07) — quente "terracota" como identidade dominante; atende o pedido do usuário de consolidar a cor terracota (antes usada só como acento do Modo Code e do gravador de voz) com o sistema de temas visuais. Background em marrom-quente escuro, marca terracota, texto creme. ──────────────────────────────────────── */ :root[data-theme="terracota"] { color-scheme: dark; --bg: #1A1108; --bg-2: #221710; --bg-3: #2A1D14; --bg-4: #33241A; --line: rgba(220, 180, 140, 0.10); --line-2: rgba(220, 180, 140, 0.20); --tx: #F8EFE5; --tx-dim: #C7B4A0; --tx-faint: #8C7A66; /* Marca TERRACOTA — passa a ser o "azure" desta paleta */ --azure: #D88F66; --azure-deep: #B26D45; --azure-strong: #EAA580; --azure-soft: rgba(216, 143, 102, 0.14); --azure-line: rgba(216, 143, 102, 0.35); --green: #6FB78A; --green-soft: rgba(111, 183, 138, 0.12); --amber: #E0B055; --amber-soft: rgba(224, 176, 85, 0.14); --red: #E07566; --red-soft: rgba(224, 117, 102, 0.16); --violet: #C8A07C; --user: #2A1D14; --assistant: #221710; --bg-soft: rgba(26, 17, 8, 0.86); --surface-strong: rgba(42, 29, 20, 0.96); --sidebar-bg: rgba(26, 17, 8, 0.92); --sidebar-border: var(--line); --sidebar-card: rgba(42, 29, 20, 0.78); --sidebar-card-strong: rgba(51, 36, 26, 0.92); } /* ── cerrado (24/07, pedido do Samir) — meio-caminho entre o terracota e a mostarda: terra quente levemente mais DOURADA que o terracota (hue ~38° vs ~28°), marca MOSTARDA (ouro de ipê), e o terracota segue vivo como cor secundária (--violet) — chips/acentos alternativos fazem a ponte entre os dois. Status âmbar deslocado pro LARANJA pra não colidir com a marca. ── */ :root[data-theme="cerrado"] { color-scheme: dark; --bg: #1B1309; --bg-2: #231A0D; --bg-3: #2C2112; --bg-4: #372A18; --line: rgba(225, 190, 130, 0.11); --line-2: rgba(225, 190, 130, 0.21); --tx: #F8F0DF; --tx-dim: #CBB795; --tx-faint: #8F7D5C; /* Marca MOSTARDA — passa a ser o "azure" desta paleta */ --azure: #D9A83C; --azure-deep: #B08427; --azure-strong: #E9BF5F; --azure-soft: rgba(217, 168, 60, 0.14); --azure-line: rgba(217, 168, 60, 0.35); --on-accent: #251604; /* mostarda é clara → texto umber quase-preto */ --green: #8CBA6E; --green-soft: rgba(140, 186, 110, 0.12); --amber: #E29B4E; --amber-soft: rgba(226, 155, 78, 0.14); --red: #E07566; --red-soft: rgba(224, 117, 102, 0.16); --violet: #C87F5A; /* terracota como voz secundária (ponte c/ o tema irmão) */ --user: #2C2112; --assistant: #231A0D; --bg-soft: rgba(27, 19, 9, 0.86); --surface-strong: rgba(44, 33, 18, 0.96); --sidebar-bg: rgba(27, 19, 9, 0.92); --sidebar-border: var(--line); --sidebar-card: rgba(44, 33, 18, 0.78); --sidebar-card-strong: rgba(55, 42, 24, 0.92); } /* ── oceano — azul-petróleo profundo; parente saturado do dark-glass (que é frio/neutro). Fundo de mar, marca ciano-teal. ─────────────────────────── */ :root[data-theme="oceano"] { color-scheme: dark; --bg: #06131A; --bg-2: #0A1A22; --bg-3: #0F222C; --bg-4: #152B37; --line: rgba(140, 200, 220, 0.10); --line-2: rgba(140, 200, 220, 0.20); --tx: #E8F4F6; --tx-dim: #93B3BC; --tx-faint: #5C7B85; /* Marca CIANO-TEAL — passa a ser o "azure" desta paleta */ --azure: #2BC5D4; --azure-deep: #1897A6; --azure-strong: #56DBE8; --azure-soft: rgba(43, 197, 212, 0.14); --azure-line: rgba(43, 197, 212, 0.35); --green: #3FD68C; --green-soft: rgba(63, 214, 140, 0.12); --amber: #EFC35A; --amber-soft: rgba(239, 195, 90, 0.14); --red: #F07A72; --red-soft: rgba(240, 122, 114, 0.16); --violet: #8FA6FF; --user: #13252E; --assistant: #0F222C; --bg-soft: rgba(6, 19, 26, 0.86); --surface-strong: rgba(15, 34, 44, 0.96); --sidebar-bg: rgba(6, 19, 26, 0.92); --sidebar-border: var(--line); --sidebar-card: rgba(15, 34, 44, 0.78); --sidebar-card-strong: rgba(21, 43, 55, 0.92); } /* ── floresta — verde-mata escuro, sensação de foco e calma. Marca verde- folha; o status "ok" fica mais claro/amarelado que a marca pra não colidir com ela. ──────────────────────────────────────────────────────── */ :root[data-theme="floresta"] { color-scheme: dark; --bg: #0A140D; --bg-2: #0F1B12; --bg-3: #142418; --bg-4: #1A2E1F; --line: rgba(160, 210, 170, 0.10); --line-2: rgba(160, 210, 170, 0.20); --tx: #EAF5EC; --tx-dim: #A3BFA9; --tx-faint: #6B8672; /* Marca VERDE-FOLHA — passa a ser o "azure" desta paleta */ --azure: #58C283; --azure-deep: #3B9E63; --azure-strong: #7BD8A0; --azure-soft: rgba(88, 194, 131, 0.14); --azure-line: rgba(88, 194, 131, 0.35); --green: #9BD977; --green-soft: rgba(155, 217, 119, 0.12); --amber: #E3C05A; --amber-soft: rgba(227, 192, 90, 0.14); --red: #E57A6B; --red-soft: rgba(229, 122, 107, 0.16); --violet: #A8C9A0; --user: #17281C; --assistant: #142418; --bg-soft: rgba(10, 20, 13, 0.86); --surface-strong: rgba(20, 36, 24, 0.96); --sidebar-bg: rgba(10, 20, 13, 0.92); --sidebar-border: var(--line); --sidebar-card: rgba(20, 36, 24, 0.78); --sidebar-card-strong: rgba(26, 46, 31, 0.92); } /* ── nebulosa — violeta noturno; roxo profundo com marca lavanda. ─────────── */ :root[data-theme="nebulosa"] { color-scheme: dark; --bg: #120D1E; --bg-2: #171126; --bg-3: #1E1730; --bg-4: #261E3D; --line: rgba(190, 170, 230, 0.10); --line-2: rgba(190, 170, 230, 0.20); --tx: #F0EBFA; --tx-dim: #B3A8CC; --tx-faint: #7A6F96; /* Marca LAVANDA — passa a ser o "azure" desta paleta */ --azure: #A78BFA; --azure-deep: #7C5CE0; --azure-strong: #C4B0FF; --azure-soft: rgba(167, 139, 250, 0.14); --azure-line: rgba(167, 139, 250, 0.35); --green: #4FD08C; --green-soft: rgba(79, 208, 140, 0.12); --amber: #E8BC5C; --amber-soft: rgba(232, 188, 92, 0.14); --red: #F0788C; --red-soft: rgba(240, 120, 140, 0.16); --violet: #E08BD4; --user: #221A35; --assistant: #1E1730; --bg-soft: rgba(18, 13, 30, 0.86); --surface-strong: rgba(30, 23, 48, 0.96); --sidebar-bg: rgba(18, 13, 30, 0.92); --sidebar-border: var(--line); --sidebar-card: rgba(30, 23, 48, 0.78); --sidebar-card-strong: rgba(38, 30, 61, 0.92); } /* ── paper (claro) ───────────────────────────────────────────────────────── */ :root[data-theme="paper"] { color-scheme: light; --bg: #FAFAF7; --bg-2: #F2F1ED; --bg-3: #E8E6DF; --bg-4: #DDDAD0; --line: rgba(40, 50, 70, 0.10); --line-2: rgba(40, 50, 70, 0.20); --tx: #1A1F2A; --tx-dim: #4A5468; --tx-faint: #76808F; /* Marca mantém o AZURE (identidade), só ajusta o soft pra contraste claro */ --azure: #0071BD; --azure-deep: #004A7A; --azure-strong: #005A95; /* em tema claro "strong" = MAIS escuro (contraste) */ --azure-soft: rgba(0, 113, 189, 0.10); --azure-line: rgba(0, 113, 189, 0.35); --on-accent: #FFFFFF; /* marca escura → texto claro por cima */ --green: #0E6434; --green-soft: rgba(19, 122, 63, 0.12); /* verde-texto 4.5:1 sobre bg-3 */ --amber: #8A6B0F; --amber-soft: rgba(138, 107, 15, 0.14); /* Teal claro sobre papel é invisível (1.57 de contraste medido); este escuro dá 6.42 — o mesmo patamar que o --green do tema, 6.43. */ --teal: #0E6254; --teal-soft: rgba(14, 98, 84, 0.13); --red: #B43030; --red-soft: rgba(180, 48, 48, 0.12); --violet: #5B4CC9; --user: #FFFFFF; --assistant: #F4F2EC; /* Bridges */ --bg-soft: rgba(255, 255, 255, 0.86); --surface-strong: rgba(245, 243, 238, 0.96); --sidebar-bg: rgba(250, 250, 247, 0.94); --sidebar-border: var(--line); --sidebar-card: rgba(255, 255, 255, 0.78); --sidebar-card-strong: rgba(245, 243, 238, 0.92); /* Provedores em fundo CLARO: as mesmas oito matizes, escurecidas até passarem 3:1 sobre o papel. Mesma lógica do --azure-strong deste preset. */ --prov-1: #0E7C68; --prov-2: #6A3FB0; --prov-3: #B03050; --prov-4: #1160C4; --prov-5: #8A6A00; --prov-6: #2A7A45; --prov-7: #A85410; --prov-8: #10627A; } /* ── sepia (claro quente) — segundo tema claro; papel envelhecido com marca siena. Contrapartida diurna do terracota; segue o padrão do paper de escurecer a marca pra ter contraste em fundo claro. ───────────────────── */ :root[data-theme="sepia"] { color-scheme: light; --bg: #F7F0E3; --bg-2: #F0E7D6; --bg-3: #E7DCC6; --bg-4: #DCCFB4; --line: rgba(90, 70, 40, 0.12); --line-2: rgba(90, 70, 40, 0.22); --tx: #2A2118; --tx-dim: #5C4F3E; --tx-faint: #8A7B66; /* Marca SIENA — escura o bastante pra contraste em fundo claro */ --azure: #A0592A; --azure-deep: #66371A; --azure-strong: #78411F; /* em tema claro "strong" = MAIS escuro (contraste) */ --azure-soft: rgba(160, 89, 42, 0.12); --azure-line: rgba(160, 89, 42, 0.35); --on-accent: #FFFDF8; /* marca siena escura → texto claro por cima */ --green: #1F6B39; --green-soft: rgba(46, 125, 69, 0.12); /* verde-texto 4.5:1 sobre bg-3 */ --amber: #8A6B0F; --amber-soft: rgba(138, 107, 15, 0.14); /* Teal claro sobre papel é invisível (1.44 de contraste medido); este escuro dá 5.91 — o mesmo patamar que o --green do tema, 5.31. */ --teal: #0E6254; --teal-soft: rgba(14, 98, 84, 0.13); --red: #AE3B2E; --red-soft: rgba(174, 59, 46, 0.12); --violet: #7A5CC0; --user: #FFFDF8; --assistant: #F1E9D9; --bg-soft: rgba(252, 247, 237, 0.86); --surface-strong: rgba(240, 231, 214, 0.96); --sidebar-bg: rgba(247, 240, 227, 0.94); --sidebar-border: var(--line); --sidebar-card: rgba(255, 253, 248, 0.78); --sidebar-card-strong: rgba(240, 231, 214, 0.92); /* Provedores em fundo CLARO — ver o bloco do paper. */ --prov-1: #0E7C68; --prov-2: #6A3FB0; --prov-3: #B03050; --prov-4: #1160C4; --prov-5: #8A6A00; --prov-6: #2A7A45; --prov-7: #A85410; --prov-8: #10627A; } /* ── mono (escala de cinza) ──────────────────────────────────────────────── */ :root[data-theme="mono"] { color-scheme: dark; --bg: #000000; --bg-2: #0A0A0A; --bg-3: #141414; --bg-4: #1E1E1E; --line: rgba(220, 220, 220, 0.08); --line-2: rgba(220, 220, 220, 0.16); --tx: #EAEAEA; --tx-dim: #A0A0A0; --tx-faint: #707070; /* Marca vira branco/cinza-claro (sem cromo de cor — sensação terminal) */ --azure: #E8E8E8; --azure-deep: #B8B8B8; --azure-strong: #FFFFFF; --azure-soft: rgba(232, 232, 232, 0.10); --azure-line: rgba(232, 232, 232, 0.35); --green: #B0B0B0; --green-soft: rgba(176, 176, 176, 0.12); --amber: #C8C8C8; --amber-soft: rgba(200, 200, 200, 0.14); /* Cinza porque o tema é cinza — o teal do :root seria a única cor da tela. Aqui A e B não se distinguem POR COR, e não têm como: medido, não existe cinza com >=4.5 no fundo e >=3.0 contra o --amber ao mesmo tempo. Este tema já assume isso (--green #B0B0B0 e --amber #C8C8C8 estão a 1.1 um do outro); quem separa os lados aqui é a letra da ficha e o rótulo do cartão. */ --teal: #8E8E8E; --teal-soft: rgba(142, 142, 142, 0.16); --red: #888888; --red-soft: rgba(136, 136, 136, 0.16); --violet: #A8A8A8; --user: #0F0F0F; --assistant: #161616; --bg-soft: rgba(8, 8, 8, 0.86); --surface-strong: rgba(24, 24, 24, 0.96); --sidebar-bg: rgba(0, 0, 0, 0.94); --sidebar-border: var(--line); --sidebar-card: rgba(20, 20, 20, 0.78); --sidebar-card-strong: rgba(30, 30, 30, 0.92); /* Provedores em ESCALA DE CINZA, porque é o contrato deste preset. ⚠️ A consequência é declarada: aqui a nuvem NÃO se lê por matiz. Oito cinzas distinguíveis num ponto de 3px não existem — o que carrega a informação neste tema é a LEGENDA (nome + percentual, na mesma ordem da paleta), e a nuvem vira textura. Quem precisa ler a mistura por cor troca de preset. */ --prov-1: #FFFFFF; --prov-2: #E0E0E0; --prov-3: #C2C2C2; --prov-4: #A6A6A6; --prov-5: #8C8C8C; --prov-6: #757575; --prov-7: #F0F0F0; --prov-8: #D0D0D0; } /* ── high-contrast (WCAG AAA) ────────────────────────────────────────────── */ :root[data-theme="high-contrast"] { color-scheme: dark; --bg: #000000; --bg-2: #050505; --bg-3: #0C0C0C; --bg-4: #161616; --line: rgba(255, 255, 255, 0.24); --line-2: rgba(255, 255, 255, 0.40); --tx: #FFFFFF; --tx-dim: #D5DCE6; --tx-faint: #99A4B6; --azure: #6FD3FF; --azure-deep: #34B3EC; --azure-strong: #9FE3FF; --azure-soft: rgba(111, 211, 255, 0.18); --azure-line: rgba(111, 211, 255, 0.45); --green: #5BEA9E; --green-soft: rgba(91, 234, 158, 0.20); --amber: #FFD45A; --amber-soft: rgba(255, 212, 90, 0.20); --red: #FF8585; --red-soft: rgba(255, 133, 133, 0.22); --violet: #B6A6FF; --user: #141414; --assistant: #0E0E0E; --bg-soft: rgba(0, 0, 0, 0.90); --surface-strong: rgba(20, 20, 20, 0.98); --sidebar-bg: rgba(0, 0, 0, 0.96); --sidebar-border: var(--line); --sidebar-card: rgba(18, 18, 18, 0.86); --sidebar-card-strong: rgba(28, 28, 28, 0.96); /* Provedores mais claros: o fundo é #000 e este preset mira AAA no texto. */ --prov-1: #5BEAD0; --prov-2: #C9AEFF; --prov-3: #FF9FB0; --prov-4: #8CC8FF; --prov-5: #FFE07A; --prov-6: #8CF0A8; --prov-7: #FFB980; --prov-8: #A8E8F8; } /* ── radar (11th preset, 04/09/2026) — the console look the owner asked for after the JARVIS reference: electric cyan on a blue-black ground. It is a SKIN, not a layout: the panel's command-center layout runs in all eleven presets, and this one only changes values. Restraint is the rule of the house (PRODUCT.md: no animated toy): the glow lives on state alone — the active rail item, the live tile, the send button — and the grid on the ground is 3.5% cyan, felt more than seen. Contrast, measured against --bg-2 (the card ground) and --bg-4 (the darkest control): --tx 17:1, --tx-dim 7.5:1, --tx-faint 3.5:1 on --bg-4 (the same class as dark-glass's 3.0:1 — it paints timestamps and footers, never body text), --azure 12:1, --on-accent on --azure 12:1. The provider palette is the canonical one: the ground is darker than dark-glass's, so every --prov-* clears the 3:1 the palette proof asks for. ───────────── */ :root[data-theme="radar"] { color-scheme: dark; --bg: #050A10; --bg-2: #07111A; --bg-3: #0A1824; --bg-4: #0E2130; --line: rgba(0, 229, 255, 0.10); --line-2: rgba(0, 229, 255, 0.24); --tx: #E8FBFF; --tx-dim: #7FB8C9; --tx-faint: #4A7C8E; --azure: #00E5FF; --azure-deep: #00A9BD; --azure-strong: #7FF3FF; --azure-soft: rgba(0, 229, 255, 0.12); --azure-line: rgba(0, 229, 255, 0.40); --on-accent: #03151A; --green: #3DF5A0; --green-soft: rgba(61, 245, 160, 0.12); --amber: #FFC857; --amber-soft: rgba(255, 200, 87, 0.14); --red: #FF6B6B; --red-soft: rgba(255, 107, 107, 0.12); --violet: #9B8CFF; --user: #0C1E2B; --assistant: #0A1824; --bg-soft: rgba(7, 17, 26, 0.86); --surface-strong: rgba(14, 33, 48, 0.96); --sidebar-bg: rgba(5, 10, 16, 0.94); --sidebar-border: var(--line); --sidebar-card: rgba(10, 24, 36, 0.80); --sidebar-card-strong: rgba(14, 33, 48, 0.92); /* The two skin-only tokens. Read with a fallback everywhere. */ --glow: 0 0 0 1px rgba(0, 229, 255, 0.40), 0 0 22px rgba(0, 229, 255, 0.16); --tex: linear-gradient(rgba(0, 229, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.035) 1px, transparent 1px); }