/* Signal Anchor — camada de tema (inspiração visual: iCOMAT).
   Carregada DEPOIS de /app.css. Só redefine cores, fontes, bordas e raios: não cria
   classes novas e não precisa regerar o Tailwind. Para desfazer, remova o <link> do
   dashboard.html. Fontes servidas pelo próprio site (a CSP só aceita font-src 'self'). */

@font-face{font-family:'SA Sans';src:url('/fonts/inter-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'SA Mono';src:url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---- Tokens (tema claro = padrão; tema escuro = html.dark) ---- */
:root{--bg:#F8F8F8;--surface:#FFFFFF;--surface2:#EFEFEF;--fg:#282728;--mut:#5f5e5f;--line:rgba(0,0,0,.14);--accent:#0b7a3c;--ink:#F8F8F8;--veil:rgba(40,39,40,.5)}
html.dark{--bg:#0f2535;--surface:#16364d;--surface2:#1d435f;--fg:#F8F8F8;--mut:#a3bace;--line:#2a5273;--accent:#57ff8f;--ink:#0f2535;--veil:rgba(15,37,53,.8)}

/* ---- Base ---- */
body{font-family:'SA Sans',Inter,ui-sans-serif,system-ui,sans-serif!important;color:var(--fg)!important}
html body.bg-gray-50,html.dark body.bg-gray-50{background:var(--bg)!important}

/* ---- Superfícies ---- */
.bg-white,.dark .dark\:bg-slate-900,.dark .dark\:bg-slate-900\/50{background:var(--surface)!important}
.bg-gray-50,.dark .dark\:bg-slate-950,.dark .dark\:bg-slate-800,.bg-gray-200{background:var(--surface2)!important}
.dark .dark\:bg-gradient-to-b{background-image:none!important}
.fixed.inset-0.bg-slate-900\/80{background:var(--veil)!important}
/* barras de 1px no topo dos cartões: viram linha fina neutra */
.absolute.top-0.h-1.bg-gradient-to-r{background:var(--line)!important}

/* ---- Bordas, cantos, sem sombra ---- */
.border-gray-200,.border-gray-300,.dark .dark\:border-slate-800,.dark .dark\:border-slate-700,.dark .dark\:border-slate-600,.dark .dark\:border-slate-700\/50{border-color:var(--line)!important}
.rounded-lg,.rounded-xl,.rounded-2xl{border-radius:12px!important}
.shadow,.shadow-sm,.shadow-lg,.shadow-xl,.shadow-2xl{box-shadow:none!important}

/* ---- Texto ---- */
.text-gray-900,.text-gray-800,.text-gray-700,.dark .dark\:text-slate-100,.dark .dark\:text-slate-200,.dark .dark\:text-white{color:var(--fg)!important}
.text-gray-400,.text-gray-500,.text-gray-600,.dark .dark\:text-slate-300,.dark .dark\:text-slate-400,.dark .dark\:text-slate-500{color:var(--mut)!important}
.text-cyan-600,.dark .dark\:text-cyan-400,.text-emerald-500,.text-emerald-600,.dark .dark\:text-emerald-400{color:var(--accent)!important}

/* ---- Títulos: grandes e apertados ---- */
h1,h2,h3{letter-spacing:-.015em!important;line-height:1.02!important;font-weight:600!important}
h1.text-2xl{font-size:1.5rem!important;font-weight:800!important}
.bg-clip-text{background:none!important;-webkit-text-fill-color:var(--fg)!important;color:var(--fg)!important}
#t-hero-title{font-size:clamp(2.2rem,6vw,4.5rem)!important}

/* ---- Rótulos: monoespaçada, maiúsculas, pequenos ---- */
label,th,[id^="nav-"],.text-xs.font-bold,.text-xs.uppercase{font-family:'SA Mono',ui-monospace,monospace!important;text-transform:uppercase;letter-spacing:.02em;font-size:12px!important}

/* ---- Botão principal: pílula clara no escuro, escura no claro ---- */
.bg-cyan-600,.bg-cyan-500,.hover\:bg-cyan-500:hover{background:var(--fg)!important;color:var(--ink)!important;border-radius:9px!important}
button.bg-cyan-600,a.bg-cyan-600{font-family:'SA Mono',ui-monospace,monospace!important;text-transform:uppercase;letter-spacing:.02em;font-size:12px!important}

/* ---- Cor de destaque também no ícone do logotipo ---- */
#headerLogoGrad stop{stop-color:var(--accent)!important}

/* ---- Logotipo: nome inclinado que "corre" (linhas de velocidade + //) ---- */
h1.text-2xl:has(> span.text-emerald-500){display:inline-block;position:relative;font-style:italic;letter-spacing:-.03em!important;transform:skewX(-12deg);padding-left:30px;margin-right:30px;
  background:linear-gradient(var(--accent),var(--accent)) 0 7px/20px 3px no-repeat,linear-gradient(var(--accent),var(--accent)) 7px 15px/14px 3px no-repeat,linear-gradient(var(--accent),var(--accent)) 2px 23px/18px 3px no-repeat;
  animation:sa-entra .9s cubic-bezier(.2,.8,.2,1) both,sa-linhas 6s ease-in-out 2s infinite}
h1.text-2xl:has(> span.text-emerald-500)::after{content:'';position:absolute;right:-24px;top:5px;width:8px;height:22px;background:var(--fg);box-shadow:12px 0 0 var(--fg);transform:skewX(-8deg);border-radius:1px;animation:sa-barras 6s ease-in-out 2s infinite}
@keyframes sa-entra{from{translate:-26px 0;opacity:0}to{translate:0 0;opacity:1}}
@keyframes sa-linhas{0%,84%,100%{background-size:20px 3px,14px 3px,18px 3px}90%{background-size:34px 3px,26px 3px,30px 3px}}
@keyframes sa-barras{0%,84%,100%{translate:0 0}90%{translate:5px 0}}
@media (prefers-reduced-motion:reduce){h1.text-2xl:has(> span.text-emerald-500),h1.text-2xl:has(> span.text-emerald-500)::after{animation:none!important}}