/* ========================================================================== Academia Desinflame — TEMA ESCURO (paleta completa), estilo Resend. -------------------------------------------------------------------------- O QUE É ESTE ARQUIVO O app define 172 tokens `--via-*` num `:root` dentro do bundle (que NÃO tocamos). O bundle consome esses tokens ~10.4k vezes em estilo inline, então redefinir as PRIMITIVAS aqui propaga o escuro por praticamente tudo. ESTRATÉGIA (3 camadas) 1. INVERSÃO DAS PRIMITIVAS — `--via-white` vira quase-preto, `--via-navy` vira quase-branco, a escala `--via-gray-*` inverte e os 21 alphas `--via-navy-XX` viram `rgba(255,255,255,X)`. Os ~90 tokens SEMÂNTICOS que são alias seguem sozinhos. 2. CORREÇÕES EXPLÍCITAS — os poucos semânticos que a inversão automática deixa errados (sombras, `--via-text-inverse`, status). 3. CLASSES-ASSINATURA — onde o bundle tem cor CRAVADA (branco/navy hardcoded) ou onde a inversão automática produziria o resultado certo "matematicamente" mas errado visualmente (ex.: item de menu ativo, que no Resend é uma superfície #1A1A1A e NÃO um pill branco). SELETOR `:root[data-theme="dark"]`. O boot-shim carimba `data-theme` no ANTES do bundle (default = prefers-color-scheme, escolha do usuário por cima). O `@media (prefers-color-scheme: dark)` daqui é só anti-flash. CONTRATO COM O boot-shim.js (conferido contra deploy/dark/dark-toggle.js) - `` ........... liga o tema. O shim carimba de forma SÍNCRONA no , antes de qualquer pintura. - `` ........ o shim adiciona no clique do switch e remove em 220ms. AQUI ele significa: "durante a troca, SÓ COR anima; transform/opacity/filter congelam". É assim que se mata a `onda` de re-animação do app inteiro E se ganha o fade suave — os dois ao mesmo tempo. Não trocar por `transition:none` sem trocar também a intenção. - `` .......... opcional/defensivo. O shim atual NÃO usa (ele carimba no , o que já evita o flash). Se algum dia o carimbo virar assíncrono, basta o shim adicionar/remover a classe. REGRA DE `!important` Só onde o bundle usa ESTILO INLINE (sidebar, overlays) ou `!important` próprio. Cada ocorrência está comentada com o motivo. ========================================================================== */ /* ========================================================================== 0. ANTI-FLASH / BOOT ========================================================================== */ /* Se o shim atrasar, pelo menos o fundo já nasce preto quando o SO está no escuro — evita o "flash branco". Não duplica a paleta de propósito: o shim carimba `data-theme` de forma síncrona no . */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; background-color: #000; } :root:not([data-theme]) body { background-color: #000; color: #EDEDED; } } /* Durante o boot, nada anima (senão o app "acende" o tema na cara do usuário). */ html.x8-theme-booting, html.x8-theme-booting *, html.x8-theme-booting *::before, html.x8-theme-booting *::after { transition: none !important; /* vence transições inline do bundle */ animation-duration: 0s !important; animation-delay: 0s !important; } /* ========================================================================== 1. PRIMITIVAS DE MARCA (7 tokens) -------------------------------------------------------------------------- A troca-chave: `--via-navy` (a "tinta" da marca) vira quase-branco e `--via-white` (o "papel") vira quase-preto. Com isso o BOTÃO PRIMÁRIO — `background: linear-gradient(var(--via-navy), var(--via-navy-deep)); color: var(--via-white)` — vira sozinho BRANCO COM TEXTO PRETO, que é exatamente o botão do Resend. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; /* scrollbars, date pickers, selects nativos */ --via-navy: #FAFAFA; /* tinta principal (era #0A1F3B) */ --via-navy-deep: #EDEDED; /* fim do gradiente do botão primário */ --via-navy-darker: #E0E0E0; --via-blue: #A7B0BF; /* 2ª tinta / linhas de foco (levemente fria) */ --via-blue-soft: #868F9E; --via-black: #FFFFFF; /* par invertido de --via-white (uso ~0 no bundle) */ --via-white: #0A0A0A; /* papel (era #FFFFFF) */ /* ======================================================================== 2. ALPHAS DE TINTA (18 tokens) — `--via-navy-XX` -> branco translúcido ------------------------------------------------------------------------ ATENÇÃO: NÃO é 1:1. Branco sobre preto "pesa" mais do que navy sobre branco, então a curva é COMPRIMIDA nos degraus altos (que viram bordas fortes e anéis de foco) e mantida quase 1:1 nos degraus baixos (que viram hover/fill sutil — .05 sobre #0A0A0A dá ~#161616, exatamente a superfície de hover do Resend). ======================================================================== */ --via-navy-80: rgba(255, 255, 255, .62); --via-navy-60: rgba(255, 255, 255, .44); --via-navy-40: rgba(255, 255, 255, .28); --via-navy-30: rgba(255, 255, 255, .22); --via-navy-25: rgba(255, 255, 255, .19); --via-navy-22: rgba(255, 255, 255, .17); --via-navy-20: rgba(255, 255, 255, .155); --via-navy-18: rgba(255, 255, 255, .14); --via-navy-16: rgba(255, 255, 255, .125); --via-navy-14: rgba(255, 255, 255, .11); --via-navy-12: rgba(255, 255, 255, .095); --via-navy-10: rgba(255, 255, 255, .08); --via-navy-08: rgba(255, 255, 255, .065); --via-navy-06: rgba(255, 255, 255, .05); --via-navy-05: rgba(255, 255, 255, .045); --via-navy-04: rgba(255, 255, 255, .035); --via-navy-03: rgba(255, 255, 255, .028); --via-navy-02: rgba(255, 255, 255, .02); /* ======================================================================== 3. ESCALA NEUTRA (10 tokens) — invertida e DESSATURADA ------------------------------------------------------------------------ A escala clara é azulada (#101828 etc.). O Resend é neutro puro, então a versão escura perde o tom azul. Ordem invertida: 50 = mais escuro. Isso faz `--via-bg-2/-3`, `--via-border-hairline`, `--via-text-body` e `--via-text` seguirem sozinhos. ======================================================================== */ --via-gray-50: #101012; --via-gray-100: #161618; --via-gray-200: #1F1F22; --via-gray-300: #2A2A2E; --via-gray-400: #84848C; /* pós-revisão P1#5: era #6E6E76 (3.29:1) -> passa AA e alimenta --via-stage-2 */ --via-gray-500: #8F8F98; --via-gray-600: #A1A1AA; --via-gray-700: #C9C9CF; /* -> --via-text-body / --via-text */ --via-gray-800: #E4E4E7; --via-gray-900: #F4F4F5; /* ======================================================================== 4. SUPERFÍCIES (7 tokens) ------------------------------------------------------------------------ Resend: chrome preto puro, painéis ~#0A0A0A, cards ~#111113. `--via-bg`/`--via-surface` são alias de `--via-white` no claro; aqui recebem valor PRÓPRIO porque queremos 3 níveis distintos, não um só. ======================================================================== */ --via-bg: #000000; /* fundo de página / chrome */ --via-bg-2: #0A0A0A; /* painel / faixa de conteúdo */ --via-bg-3: #111113; /* painel elevado */ --via-bg-soft: rgba(255, 255, 255, .03); --via-surface: #111113; /* card / superfície padrão */ --via-surface-elev: #17171A; /* popover / superfície sobre card */ /* Superfície "clara sobre a tinta": no escuro é o botão secundário / pill default do Resend (#1A1A1A com borda hairline). */ --via-surface-onnavy: linear-gradient(180deg, #1C1C1F 0%, #141416 100%); /* ======================================================================== 5. TEXTO (9 tokens) ------------------------------------------------------------------------ Primário #EDEDED, secundário #A1A1AA / #8F8F98 (spec Resend). `--via-text-inverse` é o caso ESPECIAL — ver seção 13. ======================================================================== */ --via-text-primary: #EDEDED; --via-text-body: var(--via-gray-700); /* #C9C9CF (segue a escala) */ --via-text: var(--via-gray-700); --via-text-muted: #A1A1AA; --via-text-soft: #8F8F98; --via-text-faint: #8A8A93; /* pós-revisão P1#5: era #71717A (reprovava AA em TODAS as superfícies, 393 usos) -> 6.14/5.51/4.86:1 */ --via-ink-2: #A1A1AA; --via-ink-3: #8A8A93; /* CORREÇÃO MANUAL: no claro isto é branco (texto sobre navy). Invertido "sozinho" ele já viraria quase-preto via --via-white — mas deixamos explícito porque é a cor do TEXTO DO BOTÃO PRIMÁRIO BRANCO, o ponto mais visível do tema. Exceções (superfícies que continuam escuras) na seção 13. */ --via-text-inverse: #0A0A0A; /* ======================================================================== 6. BORDAS (4 tokens; os 3 compostos seguem sozinhos) ------------------------------------------------------------------------ Spec Resend: branco com alpha muito baixo, .08 a .14. Elevação por BORDA, não por sombra. `--via-border-hairline` é solid no claro (#E4E7EC) e é usado 632x no JS; aqui vira alpha para compor sobre qualquer superfície. ======================================================================== */ --via-border-hairline: rgba(255, 255, 255, .09); --via-border: rgba(255, 255, 255, .12); --via-border-soft: rgba(255, 255, 255, .07); --via-border-strong-color: var(--via-navy-40); /* .28 */ /* ======================================================================== 7. STATUS E MARCA SECUNDÁRIA (6 tokens) ------------------------------------------------------------------------ Os valores claros são escuros DEMAIS para fundo preto — inversão automática não resolve porque são hex cravados, não alias. ======================================================================== */ --via-success: #3FCF8E; /* era #1F8A5B — ilegível em preto */ --via-danger: #FF6369; /* era #B83A3A */ /* `--via-warning` era literalmente o navy (#0A1F3B): o design é MONOCROMÁTICO de propósito. Mantemos a intenção — warning = tinta, não amarelo. */ --via-warning: var(--via-navy); /* Coral: no claro `--via-coral-dark` é TEXTO (destructive, mensagens de erro). #8C2C2C em preto é ilegível -> vira o tom CLARO da rampa, e `--via-coral` (que é FUNDO) vira o vermelho médio. Ou seja: a rampa inverte de papel. */ --via-coral: #E5484D; --via-coral-deep: #E05C60; /* pós-revisão P2#12: era #C93C40 (4.20/3.78:1) -> passa */ --via-coral-dark: #FF8A8A; /* ======================================================================== 8. ACENTOS (5 tokens) — são alias, mas explicitados para não depender da ordem de resolução no futuro. ======================================================================== */ --via-accent: var(--via-navy); --via-accent-deep: var(--via-navy-deep); --via-accent-warm: var(--via-navy-deep); --via-accent-soft: var(--via-gray-300); --via-accent-light: var(--via-gray-300); /* ======================================================================== 9. GRÁFICOS (5 tokens; `--via-chart-ink`/`-ink-2` são alias e seguem) ------------------------------------------------------------------------ A rampa clara vai de navy (#0A1F3B) a azul-claro (#C4CFDD) — em fundo preto as 2 últimas séries sumiriam. Invertemos a direção: série 1 é a mais clara e a rampa desce até um cinza que AINDA lê sobre #000. ======================================================================== */ --via-chart-1: #FAFAFA; --via-chart-2: #C9CDD4; --via-chart-3: #9BA1AB; --via-chart-4: #808791; /* pós-revisão P2#12: era #737A85 (4.36:1 sobre card) */ --via-chart-5: #666D77; /* pós-revisão P2#12: era #565C66 (2.80:1 — reprovava até em não-texto) */ /* ======================================================================== 10. VIDRO E ARESTAS (6 tokens) ------------------------------------------------------------------------ O app é todo glassmorphism: `--via-glass-card` é o fundo da SIDEBAR, dos cards, dos inputs, dos menus e dos modais. No escuro vira vidro ESCURO translúcido. `--via-edge-hi` era um branco .95 (brilho de aresta) — em fundo preto isso vira uma "linha de neon"; cai para .10. ======================================================================== */ --via-glass-card: linear-gradient(180deg, rgba(24, 24, 27, .94) 0%, rgba(20, 20, 22, .88) 10%, rgba(16, 16, 18, .80) 100%); --via-glass-card-2: linear-gradient(180deg, rgba(22, 22, 25, .90), rgba(14, 14, 16, .74)); --via-glass-bar: rgba(10, 10, 10, .72); --via-edge-hi: rgba(255, 255, 255, .10); --via-edge-lo: rgba(255, 255, 255, .04); --via-glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent); /* ======================================================================== 11. MALHAS DE FUNDO (2 tokens) ------------------------------------------------------------------------ `--via-mesh-navy` já era escura (é o hero "sobre navy"); aqui ela é puxada para o preto Resend, sem glow colorido. `--via-mesh-light` era um degradê cinza-azulado CLARO — tem que virar escuro ou o hero clareia a tela toda. ======================================================================== */ --via-mesh-light: radial-gradient(ellipse 60% 70% at 12% 0%, rgba(255,255,255,.05) 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 95% 8%, rgba(255,255,255,.035) 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(255,255,255,.04) 0%, transparent 55%), linear-gradient(135deg, #131315 0%, #0A0A0B 100%); --via-mesh-navy: radial-gradient(ellipse 60% 70% at 12% 0%, rgba(255,255,255,.07) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 95% 8%, rgba(255,255,255,.05) 0%, transparent 60%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(0,0,0,.60) 0%, transparent 55%), linear-gradient(135deg, #17171A 0%, #0A0A0C 100%); /* ======================================================================== 12. SOMBRAS, GLOWS E BLUR (14 tokens) ------------------------------------------------------------------------ REGRA DO ESCURO: sombra clara não existe. Toda sombra vira PRETO mais opaco + um anel hairline branco (`0 0 0 1px rgba(255,255,255,.0X)`), que é como o Resend cria elevação: BORDA, não blur. ======================================================================== */ --via-shadow-xs: 0 1px 2px rgba(0, 0, 0, .55); --via-shadow-sm: 0 0 0 1px rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .6); --via-shadow-md: 0 0 0 1px rgba(255, 255, 255, .05), 0 4px 12px rgba(0, 0, 0, .55); --via-shadow-lg: 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .62); --via-shadow-xl: 0 0 0 1px rgba(255, 255, 255, .07), 0 28px 72px rgba(0, 0, 0, .72); --via-shadow-glass-light: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .5); --via-shadow-glass-dark: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 40px rgba(0, 0, 0, .6); --via-shadow-focus: 0 0 0 3px rgba(255, 255, 255, .45); /* pós-revisão P1#6: .22 dava 1.91:1 (< 3:1 WCAG 1.4.11) */ --via-glow-navy: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .55); --via-glow-navy-strong: 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 48px rgba(0, 0, 0, .72); /* saturate() alto foi calibrado para vidro CLARO; no escuro ele deixa o conteúdo por baixo com aparência doentia. Reduzido. */ --via-blur-sm: blur(8px) saturate(110%); --via-blur-md: blur(16px) saturate(115%); --via-blur-lg: blur(28px) saturate(120%); --via-blur-xl: blur(48px) saturate(120%); /* ======================================================================== 13. TOKENS DE OUTROS DESIGN SYSTEMS QUE CONVIVEM NO BUNDLE ------------------------------------------------------------------------ (a) shadcn/tailwind (`--background`, `--card`, `--primary`...): no bundle eles JÁ SÃO ESCUROS (herança do app antigo), então não há conflito com o tema claro. Ajustamos só o que destoa do Resend: o `--primary` teal (173 100% 46%) vira BRANCO, e os neutros perdem o tom azul. Formato obrigatório: HSL sem `hsl()` (o bundle envelopa). (b) `--bg-page`/`--fg-*`: html/body usam `var(--bg-page)`. Já era #05080B; viramos preto puro. ======================================================================== */ --background: 0 0% 0%; --foreground: 0 0% 93%; --card: 0 0% 7%; --card-foreground: 0 0% 93%; --popover: 0 0% 9%; --popover-foreground: 0 0% 93%; --primary: 0 0% 98%; --primary-foreground: 0 0% 4%; --secondary: 0 0% 11%; --secondary-foreground: 0 0% 93%; --muted: 0 0% 11%; --muted-foreground: 0 0% 63%; --accent: 0 0% 14%; --accent-foreground: 0 0% 93%; --border: 0 0% 16%; --header-border: 0 0% 16%; /* `--border-subtle` NÃO entra aqui: a última definição global do bundle já é rgba (não-HSL). Ela está mais abaixo, junto do 2º design system. */ --input: 0 0% 11%; --ring: 0 0% 83%; --surface-base: 0 0% 0%; --surface-subtle: 0 0% 4%; --surface-elevated: 0 0% 7%; --surface-overlay: 0 0% 9%; --surface-modal: 0 0% 11%; --chat-header-bg: 0 0% 4%; --text-primary: 0 0% 93%; --text-secondary: 0 0% 76%; --text-tertiary: 0 0% 55%; --text-muted: 0 0% 63%; --text-disabled: 0 0% 42%; --bg-page: #000000; --bg-deep: #000000; --bg-card: #111113; --bg-card-2: #16161A; --bg-card-3: #1B1B1F; --bg-elevated: #17171A; --fg-1: rgba(255, 255, 255, .94); --fg-2: rgba(255, 255, 255, .70); --fg-3: rgba(255, 255, 255, .50); --border-hairline: rgba(255, 255, 255, .09); --border-soft: rgba(255, 255, 255, .07); --border-subtle: rgba(255, 255, 255, .06); --border-strong: rgba(255, 255, 255, .20); } /* ========================================================================== 14. CORREÇÃO DE ESCOPO DE `--via-text-inverse` -------------------------------------------------------------------------- PROBLEMA: no claro, `--via-text-inverse` significa "texto sobre a tinta navy" e é SEMPRE branco. No escuro a tinta virou branca, então ele tem que virar preto — MAS o bundle também usa esse token dentro de superfícies que CONTINUAM escuras no tema escuro: - heróis com `background: var(--via-mesh-navy)` (Perfil, Equipe, ToolDetail, MentoriasNextCard) — os filhos usam rgba(255,255,255,.x) cravado, só o

usa o token; - tooltips (que reestilizamos como superfície escura); - `.via-card--dark` / `.via-glass-dark` / `[data-on-dark]`; - o pill do item de menu ATIVO (superfície #1A1A1A, seção 15). SOLUÇÃO: token global = preto; aqui ele volta a ser claro por ESCOPO. `[style*="--via-mesh-navy"]` funciona porque o React serializa a referência `var(--via-mesh-navy)` literalmente no atributo style. ========================================================================== */ :root[data-theme="dark"] [style*="--via-mesh-navy"], :root[data-theme="dark"] .via-card--dark, :root[data-theme="dark"] .via-card-dark, :root[data-theme="dark"] .via-glass-dark, :root[data-theme="dark"] .via-empty-state--navy, :root[data-theme="dark"] [data-on-dark], :root[data-theme="dark"] .via-tooltip, :root[data-theme="dark"] .via-sb { --via-text-inverse: #EDEDED; } /* ========================================================================== 15. SIDEBAR (.via-sb) E MENU ========================================================================== */ /* O