/* ============================================================
X8 LABS — 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%);
}
/* fundo da página antes do React montar (evita flash preto puro).
⚠ estes três blocos tinham o petróleo CRAVADO (hsl 200 20%/25%) — eram eles
que seguravam o azul mesmo depois de neutralizar os tokens lá em cima.
Agora consomem o eixo. */
:root[data-theme="dark"] { background-color: var(--via-bg); }
:root[data-theme="dark"] body { background-color: var(--via-bg); }
/* o shell: sidebar mais funda que o conteúdo, como no alvo */
:root[data-theme="dark"] aside,
:root[data-theme="dark"] [class*="sidebar"] { background-color: hsl(var(--x8-h) var(--x8-s) 6%); }
/* ============================================================
§ SHELL — o fundo do sistema (fora dos tokens)
O componente React pinta o wrap do shell e o body por STYLE
INLINE, com um gradiente radial NAVY por cima do token. Style
inline vence folha de estilo, então neutralizar o eixo de cor
acima NÃO bastava — o fundo seguia azul-escuro. Aqui o dark
volta a consumir o token (cinza grafite), sem gradiente navy.
============================================================ */
:root[data-theme="dark"] div:has(> .via-shell-content) {
background: var(--via-bg) !important;
}
:root[data-theme="dark"] body {
background: var(--via-bg) !important;
}