/* ============================================================ Academia Desinflame — RETINT DO DARK (superfícies GRAFITE + acento teal) ------------------------------------------------------------ ⚠ HISTÓRICO: nasceu "tema petróleo" (superfícies hue 195–200, sat 20–25%, lum 4–6%). Em 2026-08-01 as SUPERFÍCIES foram neutralizadas e clareadas a pedido — o fundo lia azul-escuro demais. Hoje: grafite (hue 220, sat 6%, lum 8–17%). O ACENTO continua teal, então a identidade da marca não mudou. O nome do arquivo ficou por compatibilidade com o . CALIBRAR: `--x8-h` (hue) e `--x8-s` (saturação) no topo do bloco. `--x8-s: 0%` = cinza puro · `20%` = petróleo original. As luminâncias dos fundos ficam logo abaixo, em ordem. O dark original (dark-tokens.css) é NEUTRO (preto + cinzas, estilo Resend). Este arquivo re-tinta essa escala. Tokens medidos por computed-style no alvo de referência (mesma técnica da fase F0 do método de extração de UX): background 200 20% 6% -> rgb(12,16,18) ✓ conferido sidebar-bg 200 25% 4% card 195 20% 11% popover 195 20% 13% border 195 15% 16% -> rgb(35,44,47) ✓ conferido foreground 195 10% 92% -> rgb(233,236,237) ✓ conferido muted-foreground 195 8% 58% primary 200 47% 38% (teal) primary-glow 200 42% 48% Só o VOCABULÁRIO de cor é reaproveitado (técnica reproduzível). Marca, tipografia, conteúdo e código continuam 100% X8. REVERSÍVEL: some com o deste arquivo no index.html e o dark neutro volta inteiro. Nada aqui é destrutivo. ============================================================ */ :root[data-theme="dark"] { /* ---- EIXO DAS SUPERFÍCIES (fonte única — calibrar AQUI) ---- 2026-08-01: as superfícies saíram do petróleo (h195-200, sat 20-25%, lum 4-6%) para GRAFITE NEUTRO — cinza de verdade e um degrau mais claro, que era o pedido. A saturação baixa (não zero) evita o cinza "morto"; o ACENTO segue teal, então a identidade não se perde. */ --x8-h: 220; /* hue das superfícies (quase neutro) */ --x8-s: 6%; /* saturação: 0% = cinza puro · 20% = petróleo antigo */ --x8-h-accent: 200; /* hue do acento (teal, intocado) */ /* ---- FUNDOS / SUPERFÍCIES ---- */ --via-bg: hsl(var(--x8-h) var(--x8-s) 8%); /* chrome / sidebar */ --via-bg-2: hsl(var(--x8-h) var(--x8-s) 10%); /* faixa de conteúdo */ --via-bg-3: hsl(var(--x8-h) var(--x8-s) 14%); /* painel elevado */ --via-bg-soft: rgba(255, 255, 255, .04); --via-surface: hsl(var(--x8-h) var(--x8-s) 14%); /* card */ --via-surface-elev: hsl(var(--x8-h) var(--x8-s) 17%); /* popover */ --via-surface-onnavy: linear-gradient(180deg, hsl(var(--x8-h) var(--x8-s) 17%) 0%, hsl(var(--x8-h) var(--x8-s) 11%) 100%); --via-white: hsl(var(--x8-h) var(--x8-s) 10%); /* "papel" no dark */ /* ⚠ o shell externo e o body são pintados por STYLE INLINE do React (um gradiente radial NAVY `rgba(10,31,59,.04)` + var(--via-bg)) — style inline vence folha, então só os tokens não bastavam: o fundo continuava azulado. As regras com !important lá embaixo (§ SHELL) resolvem. */ /* ---- ESCALA DE CINZA (mesmo eixo, luminâncias +4 nos degraus baixos) ---- */ --via-gray-50: hsl(var(--x8-h) var(--x8-s) 10%); --via-gray-100: hsl(var(--x8-h) var(--x8-s) 13%); --via-gray-200: hsl(var(--x8-h) var(--x8-s) 16%); --via-gray-300: hsl(var(--x8-h) var(--x8-s) 21%); --via-gray-400: hsl(var(--x8-h) 5% 53%); /* mantém o piso AA do dark revisado */ --via-gray-500: hsl(var(--x8-h) 5% 60%); --via-gray-600: hsl(var(--x8-h) 4% 68%); --via-gray-700: hsl(var(--x8-h) 4% 80%); --via-gray-800: hsl(var(--x8-h) 4% 89%); --via-gray-900: hsl(var(--x8-h) 4% 95%); /* ---- TEXTO ---- */ --via-text-primary: hsl(var(--x8-h) 5% 93%); --via-text-body: hsl(var(--x8-h) 4% 82%); --via-text: hsl(var(--x8-h) 4% 82%); --via-text-muted: hsl(var(--x8-h) 4% 70%); --via-text-soft: hsl(var(--x8-h) 4% 62%); --via-text-faint: hsl(var(--x8-h) 4% 60%); --via-ink-2: hsl(var(--x8-h) 4% 70%); --via-ink-3: hsl(var(--x8-h) 4% 60%); --via-text-inverse: hsl(var(--x8-h) var(--x8-s) 10%); /* ---- BORDAS (sobem junto com as superfícies, senão somem no fundo claro) ---- */ --via-border-hairline: hsl(var(--x8-h) var(--x8-s) 20% / .85); --via-border: hsl(var(--x8-h) var(--x8-s) 24%); --via-border-soft: hsl(var(--x8-h) var(--x8-s) 18%); /* ---- ACENTO TEAL ---- A tinta principal (--via-navy) continua clara: é o texto. O teal entra onde o alvo usa acento: foco, links, gráficos, realces e o gradiente do botão de ação. */ --x8-teal: hsl(200 47% 38%); --x8-teal-glow: hsl(200 42% 48%); --x8-teal-soft: hsl(200 42% 44%); --x8-teal-grad: linear-gradient(135deg, #368FA1 0%, #316D81 100%); --x8-teal-15: rgba(82, 201, 224, .15); --x8-teal-08: rgba(71, 175, 209, .08); --via-blue: hsl(200 45% 60%); /* 2ª tinta / links */ --via-blue-soft: hsl(200 38% 48%); --via-accent-soft: hsl(var(--x8-h) var(--x8-s) 20%); --via-accent-light: hsl(var(--x8-h) var(--x8-s) 20%); --via-ring: var(--x8-teal-glow); /* foco: halo teal (era branco/neutro) */ --via-shadow-focus: 0 0 0 3px rgba(82, 201, 224, .22); /* ---- SOMBRAS (base petróleo escura, não preto puro) ---- */ --via-shadow-sm: 0 1px 2px 0 hsl(195 30% 4% / .5); --via-shadow-md: 0 4px 6px -1px hsl(195 30% 4% / .5), 0 2px 4px -2px hsl(195 30% 4% / .4); --via-shadow-lg: 0 10px 15px -3px hsl(195 30% 4% / .5), 0 4px 6px -4px hsl(195 30% 4% / .4); --via-shadow-xl: 0 20px 25px -5px hsl(195 30% 4% / .6), 0 8px 10px -6px hsl(195 30% 4% / .5); /* ---- GRÁFICOS ---- */ --via-chart-1: hsl(200 47% 55%); --via-chart-2: hsl(195 38% 62%); --via-chart-3: hsl(185 35% 55%); --via-chart-4: hsl(210 30% 65%); } /* ============================================================ § UMA CAMADA SÓ (2026-08-02) — o fim do empilhamento ------------------------------------------------------------ Auditoria no dark encontrou SEIS superfícies repintando a tela inteira, uma por cima da outra: html(grafite) → body(grafite) → div.min-h-screen(PRETO) → wrap do shell(grafite, inline) → main(PRETO) → host da orb Cada camada custa pintura e, no carregamento, a ordem em que elas resolvem é o que fazia a cor "trocar" na frente do usuário. Regra da casa a partir daqui: **no dark quem pinta o fundo é o HTML; todo o resto é transparente** e simplesmente deixa ele aparecer. Cards, menus e bolhas seguem com a sua superfície — eles são conteúdo, não fundo. ============================================================ */ :root[data-theme="dark"] { background-color: hsl(var(--x8-h) var(--x8-s) 8%); } :root[data-theme="dark"] body, :root[data-theme="dark"] #root, :root[data-theme="dark"] #root > div, :root[data-theme="dark"] div:has(> .via-shell-content), :root[data-theme="dark"] .via-shell-content, :root[data-theme="dark"] .min-h-screen, :root[data-theme="dark"] main, :root[data-theme="dark"] .x8-orb-bg, :root[data-theme="dark"] aside, :root[data-theme="dark"] [class*="sidebar"] { background: transparent !important; } /* ============================================================ § VIDRO TOKENIZADO — a fonte única do "liquid glass" ------------------------------------------------------------ CAUSA-RAIZ do dark quebrado: os componentes de vidro (menu do usuário, histórico, modais, popovers, cards) pintam por STYLE INLINE com o vidro CLARO e as tintas NAVY cravados — e style inline vence folha. No dark sobrava painel claro com texto claro (ilegível) e azul por baixo do grafite. Correção SEM override: o server (VIDRO_VARS em backend/server.mjs) troca, em serve-time, cada cor literal DENTRO DE GRADIENTE por uma variável; aqui elas ganham valor por tema. · light = exatamente o literal original (zero mudança); · dark = mesmo eixo grafite do tema (--x8-h/--x8-s) e as tintas viram LUZ (branco baixo), não navy. 73 tokens · 172 ocorrências mapeadas (varredura automática dos gradientes em app/assets/*.js). ============================================================ */ :root { --x8v-l015-255: rgba(255,255,255,0.015); --x8v-l92-255: rgba(255,255,255,0.92); --x8v-l78-255: rgba(255,255,255,0.78); --x8v-l88-255: rgba(255,255,255,0.88); --x8v-l80-246: rgba(246,249,255,0.80); --x8v-l16-255: rgba(255,255,255,0.16); --x8v-l94-255: rgba(255,255,255,0.94); --x8v-l74-247: rgba(247,248,250,0.74); --x8v-l96-255: rgba(255,255,255,0.96); --x8v-l90-250: rgba(250,251,253,0.90); --x8v-l82-243: rgba(243,246,251,0.82); --x8v-l84-247: rgba(247,248,250,0.84); --x8v-l22-255: rgba(255,255,255,0.22); --x8v-l05-255: rgba(255,255,255,0.05); --x8v-l84-255: rgba(255,255,255,0.84); --x8v-l72-250: rgba(250,251,252,0.72); --x8v-l64-247: rgba(247,248,250,0.64); --x8v-l72-255: rgba(255,255,255,0.72); --x8v-l42-247: rgba(247,249,252,0.42); --x8v-l55-255: rgba(255,255,255,0.55); --x8v-l85-255: rgba(255,255,255,0.85); --x8v-l58-247: rgba(247,249,252,0.58); --x8v-l88-249: rgba(249,250,251,0.88); --x8v-l78-248: rgba(248,249,251,0.78); --x8v-l66-247: rgba(247,248,250,0.66); --x8v-l75-255: rgba(255,255,255,0.75); --x8v-l45-247: rgba(247,249,252,0.45); --x8v-l40-255: rgba(255,255,255,0.40); --x8v-l20-247: rgba(247,249,252,0.20); --x8v-l70-255: rgba(255,255,255,0.70); --x8v-l97-255: rgba(255,255,255,0.97); --x8v-l93-247: rgba(247,248,250,0.93); --x8v-l65-255: rgba(255,255,255,0.65); --x8v-l62-247: rgba(247,248,250,0.62); --x8v-l68-255: rgba(255,255,255,0.68); --x8v-l40-247: rgba(247,248,250,0.40); --x8v-l14-255: rgba(255,255,255,0.14); --x8v-l07-255: rgba(255,255,255,0.07); --x8v-l10-255: rgba(255,255,255,0.10); --x8v-l99-255: rgba(255,255,255,0.99); --x8v-l97-247: rgba(247,248,250,0.97); --x8v-l88-251: rgba(251,252,253,0.88); --x8v-l88-247: rgba(247,248,250,0.88); --x8v-l7-255: rgba(255,255,255,0.7); --x8v-l6-255: rgba(255,255,255,0.6); --x8v-l4-255: rgba(255,255,255,0.4); --x8v-t035-10: rgba(10,31,59,0.035); --x8v-t022-10: rgba(10,31,59,0.022); --x8v-t075-10: rgba(10,31,59,0.075); --x8v-t028-10: rgba(10,31,59,0.028); --x8v-t055-10: rgba(10,31,59,0.055); --x8v-t025-10: rgba(10,31,59,0.025); --x8v-t018-10: rgba(10,31,59,0.018); --x8v-t045-10: rgba(10,31,59,0.045); --x8v-t35-10: rgba(10,31,59,0.35); --x8v-t14-10: rgba(10,31,59,0.14); --x8v-t05-10: rgba(10,31,59,0.05); --x8v-t07-10: rgba(10,31,59,0.07); --x8v-t30-10: rgba(10,31,59,0.30); --x8v-t03-10: rgba(10,31,59,0.03); --x8v-t06-10: rgba(10,31,59,0.06); --x8v-t13-10: rgba(10,31,59,0.13); --x8v-t08-10: rgba(10,31,59,0.08); --x8v-t10-10: rgba(10,31,59,0.10); --x8v-t20-10: rgba(10,31,59,0.20); --x8v-t12-10: rgba(10,31,59,0.12); --x8v-t02-10: rgba(10,31,59,0.02); --x8v-t04-10: rgba(10,31,59,0.04); --x8v-t18-10: rgba(10,31,59,0.18); --x8v-t65-10: rgba(10,31,59,0.65); --x8v-t45-10: rgba(10,31,59,0.45); --x8v-t25-10: rgba(10,31,59,0.25); --x8v-t0-10: rgba(10,31,59,0); } :root[data-theme="dark"] { --x8v-l015-255: hsl(var(--x8-h) var(--x8-s) 13% / 0.86); --x8v-l92-255: hsl(var(--x8-h) var(--x8-s) 15% / 0.92); --x8v-l78-255: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l88-255: hsl(var(--x8-h) var(--x8-s) 15% / 0.88); --x8v-l80-246: hsl(var(--x8-h) var(--x8-s) 15% / 0.86); --x8v-l16-255: hsl(var(--x8-h) var(--x8-s) 13% / 0.86); --x8v-l94-255: hsl(var(--x8-h) var(--x8-s) 15% / 0.94); --x8v-l74-247: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l96-255: hsl(var(--x8-h) var(--x8-s) 15% / 0.96); --x8v-l90-250: hsl(var(--x8-h) var(--x8-s) 15% / 0.90); --x8v-l82-243: hsl(var(--x8-h) var(--x8-s) 15% / 0.86); --x8v-l84-247: hsl(var(--x8-h) var(--x8-s) 15% / 0.86); --x8v-l22-255: hsl(var(--x8-h) var(--x8-s) 13% / 0.86); --x8v-l05-255: hsl(var(--x8-h) var(--x8-s) 13% / 0.86); --x8v-l84-255: hsl(var(--x8-h) var(--x8-s) 15% / 0.86); --x8v-l72-250: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l64-247: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l72-255: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l42-247: hsl(var(--x8-h) var(--x8-s) 13% / 0.86); --x8v-l55-255: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l85-255: hsl(var(--x8-h) var(--x8-s) 15% / 0.86); --x8v-l58-247: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l88-249: hsl(var(--x8-h) var(--x8-s) 15% / 0.88); --x8v-l78-248: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l66-247: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l75-255: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l45-247: hsl(var(--x8-h) var(--x8-s) 13% / 0.86); --x8v-l40-255: hsl(var(--x8-h) var(--x8-s) 13% / 0.86); --x8v-l20-247: hsl(var(--x8-h) var(--x8-s) 13% / 0.86); --x8v-l70-255: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l97-255: hsl(var(--x8-h) var(--x8-s) 15% / 0.97); --x8v-l93-247: hsl(var(--x8-h) var(--x8-s) 15% / 0.93); --x8v-l65-255: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l62-247: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l68-255: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l40-247: hsl(var(--x8-h) var(--x8-s) 13% / 0.86); --x8v-l14-255: hsl(var(--x8-h) var(--x8-s) 13% / 0.86); --x8v-l07-255: hsl(var(--x8-h) var(--x8-s) 13% / 0.86); --x8v-l10-255: hsl(var(--x8-h) var(--x8-s) 13% / 0.86); --x8v-l99-255: hsl(var(--x8-h) var(--x8-s) 15% / 0.97); --x8v-l97-247: hsl(var(--x8-h) var(--x8-s) 15% / 0.97); --x8v-l88-251: hsl(var(--x8-h) var(--x8-s) 15% / 0.88); --x8v-l88-247: hsl(var(--x8-h) var(--x8-s) 15% / 0.88); --x8v-l7-255: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l6-255: hsl(var(--x8-h) var(--x8-s) 14% / 0.86); --x8v-l4-255: hsl(var(--x8-h) var(--x8-s) 13% / 0.86); --x8v-t035-10: rgba(255,255,255,0.014); --x8v-t022-10: rgba(255,255,255,0.009); --x8v-t075-10: rgba(255,255,255,0.030); --x8v-t028-10: rgba(255,255,255,0.011); --x8v-t055-10: rgba(255,255,255,0.022); --x8v-t025-10: rgba(255,255,255,0.010); --x8v-t018-10: rgba(255,255,255,0.007); --x8v-t045-10: rgba(255,255,255,0.018); --x8v-t35-10: rgba(255,255,255,0.060); --x8v-t14-10: rgba(255,255,255,0.056); --x8v-t05-10: rgba(255,255,255,0.020); --x8v-t07-10: rgba(255,255,255,0.028); --x8v-t30-10: rgba(255,255,255,0.060); --x8v-t03-10: rgba(255,255,255,0.012); --x8v-t06-10: rgba(255,255,255,0.024); --x8v-t13-10: rgba(255,255,255,0.052); --x8v-t08-10: rgba(255,255,255,0.032); --x8v-t10-10: rgba(255,255,255,0.040); --x8v-t20-10: rgba(255,255,255,0.060); --x8v-t12-10: rgba(255,255,255,0.048); --x8v-t02-10: rgba(255,255,255,0.008); --x8v-t04-10: rgba(255,255,255,0.016); --x8v-t18-10: rgba(255,255,255,0.060); --x8v-t65-10: rgba(255,255,255,0.060); --x8v-t45-10: rgba(255,255,255,0.060); --x8v-t25-10: rgba(255,255,255,0.060); --x8v-t0-10: rgba(255,255,255,0.000); } /* ============================================================ § O TRIPLETO NAVY — a causa que faltava (2026-08-02) ------------------------------------------------------------ Varredura no bundle: **103 cores navy**, milhares de ocorrências (`rgba(10,31,59,.06)` sozinha aparece 291×) em SOMBRAS, BORDAS, SCRIMS e OVERLAYS — fora de gradiente, por isso escaparam da primeira tokenização. Cada uma depositava uma película azul sobre o grafite: é o "fundo azulado" e parte do peso. O server troca só o TRIPLETO (mantendo o alpha de cada uma): rgba(10,31,59,α) → rgba(var(--x8n),α) light: o navy original · dark: PRETO neutro (sombra continua sombra, o azul some e o cinza do HTML aparece limpo). ============================================================ */ :root { --x8n: 10,31,59; --x8n2: 2,22,42; --x8n3: 6,18,36; --x8nt: 10,31,59; } /* dark: tinta/sombra viram PRETO neutro; TEXTO navy vira texto claro */ :root[data-theme="dark"] { --x8n: 0,0,0; --x8n2: 0,0,0; --x8n3: 0,0,0; --x8nt: 232,232,238; } /* ============================================================ § LIGHT: os tokens shadcn do bundle são DARK-FIRST ------------------------------------------------------------ O produto nasceu com tema escuro: o `:root` do bundle define `--background: 216 28% 7%`, `--card: 217 32% 10%`, `--popover: 217 32% 13%`… (azulados) SEM escopo de tema. Enquanto existia um dark de rota isso passava batido; com o sistema 100% light, o wrapper `.min-h-screen.bg-background` pintava rgb(13,17,23) e o shell inteiro ficava escuro. Aqui o LIGHT recebe seus próprios valores — claros, do design system. (O escuro do consultor NÃO depende disto: é uma ilha de CSS local no card, em x8-orb-consultor.css.) ============================================================ */ :root:not([data-theme="dark"]) { --background: 0 0% 100%; --foreground: 214 71% 14%; /* navy #0A1F3B */ --card: 0 0% 100%; --card-foreground: 214 71% 14%; --popover: 0 0% 100%; --popover-foreground: 214 71% 14%; --secondary: 210 20% 97%; --muted: 210 20% 97%; --muted-foreground: 216 12% 34%; --accent: 210 20% 95%; --border: 214 15% 89%; --input: 214 15% 89%; --surface-base: 0 0% 100%; --surface-subtle: 210 20% 98%; --surface-elevated: 0 0% 100%; --surface-overlay: 0 0% 100%; --surface-modal: 0 0% 100%; --chat-header-bg: 0 0% 100%; --header-border: 214 15% 89%; --border-subtle: 214 15% 92%; } /* uma camada só também no light: o wrapper deixa o aparecer */ :root:not([data-theme="dark"]) .min-h-screen.bg-background { background: transparent !important; }