/* Endogin — camada de acabamento premium (inspirada no Tremor: "mostre o dado, esconda a moldura").
   Carregada POR ÚLTIMO em todas as páginas: refina via variáveis compartilhadas + regras aditivas.
   Puramente visual — não altera nenhuma lógica/motor. */

/* 0. Tipografia sob medida (auto-hospedada): Cormorant Garamond (marca/títulos, serifada de luxo) + Manrope (UI/dados, grotesca limpa) */
@font-face{font-family:'Cormorant Garamond';src:url('/static/fonts/cormorant-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Cormorant Garamond';src:url('/static/fonts/cormorant-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('/static/fonts/manrope-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('/static/fonts/manrope-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('/static/fonts/manrope-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
:root{
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
/* Cormorant é delicada: títulos ganham peso e corpo pra ler como display de luxo, não como serifa fina genérica */
h1,h2,h3,.brand,.brand-name,h1.brand,.card-head h2,.sec-h,.hero h2,.guide h2,.grp-h h3{font-weight:600;letter-spacing:.005em;}
.brand-name,h1.brand{font-weight:600;letter-spacing:.01em;font-size:1.5rem;}


/* 1. Tokens refinados (o cascade de custom properties: última definição vence) */
:root{
  --radius:13px; --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.22);
  --shadow:0 1px 2px rgba(0,0,0,.20),0 6px 20px rgba(0,0,0,.30);
}
:root[data-theme="light"]{
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:0 1px 3px rgba(16,24,40,.07),0 8px 26px rgba(16,24,40,.08);
}

/* 2. Números tabulares — a leitura de dashboard fica alinhada e "cara de produto" */
.pv,.stat .v,.kpi .v,.r-row span,.badge,.score .ring,.stat-value,.v,.big,.gauge-val,.kpi-v{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.012em;
}

/* 3. Foco premium nos campos (anel dourado suave) */
.inp:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent);}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid color-mix(in srgb,var(--brand) 42%,transparent);outline-offset:1px;}

/* 4. Micro-interações discretas (elevação sutil) */
.iconbtn,.btn{transition:transform .14s,color .15s,border-color .15s,box-shadow .15s;}
.iconbtn:hover,.btn:hover{transform:translateY(-1px);}
.stat,.kpi,.bench .b{transition:border-color .15s,transform .13s,box-shadow .15s;}
.stat:hover,.kpi:hover{transform:translateY(-1px);}
.card{transition:border-color .15s,box-shadow .18s;}

/* 5. Scrollbar discreta (WebKit) — some do caminho, aparece no hover */
*::-webkit-scrollbar{height:10px;width:10px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:2px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:var(--brand);background-clip:content-box;}

/* 6. Seleção de texto na cor da marca */
::selection{background:color-mix(in srgb,var(--brand) 32%,transparent);}

/* 7. "Aprender mais" ao lado do parâmetro: o "i" vira link dourado clicável → material educacional */
a.tip{
  text-decoration:none;background:transparent!important;
  border:1.4px solid color-mix(in srgb,var(--brand) 60%,transparent)!important;
  color:var(--brand)!important;font-style:normal;cursor:pointer;
  transition:background .13s,color .13s,transform .13s;
}
a.tip:hover{background:var(--brand)!important;color:#150f04!important;transform:translateY(-1px);}
a.tip:focus-visible{outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:2px;}

/* 8. Profundidade artesanal: aresta de luz interna no topo dos contêineres (craft, não sombra pesada) */
.card,.stat,.kpi,.pcard,.bench .b,.note,.guide{box-shadow:var(--shadow-sm),inset 0 1px 0 rgb(255 255 255 / .035);}
:root[data-theme="light"] .card,:root[data-theme="light"] .stat,:root[data-theme="light"] .kpi,:root[data-theme="light"] .pcard{box-shadow:var(--shadow-sm),inset 0 1px 0 rgb(255 255 255 / .7);}

/* 9. Micro-tipografia dos rótulos-etiqueta (tracking consistente = leitura de produto) */
.stat .l,.kpi .l,.pl,.cat-head span,.card-head p{letter-spacing:.02em;}
h1.brand,.brand-name{letter-spacing:-.015em;}

/* 10. SPOTLIGHT: luz dourada que segue o cursor; o card acende ao aproximar o mouse.
   --mx/--my são setados por endogin-fx.js. mix-blend-mode:screen só CLAREIA (texto continua legível). */
.card,.tool,.stat,.kpi,.pcard,.tpl-card,.bench .b,.act{position:relative;isolation:isolate;}
.card::before,.tool::before,.stat::before,.kpi::before,.pcard::before,.tpl-card::before,.bench .b::before,.act::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  opacity:0;transition:opacity .35s ease;mix-blend-mode:screen;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--brand) 42%,transparent), transparent 60%);
}
.card:hover::before,.tool:hover::before,.stat:hover::before,.kpi:hover::before,.pcard:hover::before,.tpl-card:hover::before,.bench .b:hover::before,.act:hover::before{opacity:.85;}
.card:hover,.tool:hover,.stat:hover,.kpi:hover,.pcard:hover,.tpl-card:hover,.bench .b:hover,.act:hover{border-color:color-mix(in srgb,var(--brand) 50%,var(--line));}
:root[data-theme="light"] .card::before,:root[data-theme="light"] .tool::before,:root[data-theme="light"] .stat::before,:root[data-theme="light"] .kpi::before,:root[data-theme="light"] .pcard::before,:root[data-theme="light"] .tpl-card::before,:root[data-theme="light"] .bench .b::before,:root[data-theme="light"] .act::before{mix-blend-mode:multiply;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--brand) 16%,transparent), transparent 60%);}
@media (prefers-reduced-motion:reduce){.card::before,.tool::before,.stat::before,.kpi::before,.pcard::before,.tpl-card::before,.bench .b::before,.act::before{display:none!important;}}