/* ============================================================================
   iBooster Demo Tracker - tokens da marca e reset (mesma estrutura do CRM)
   Azul-instrumento #1D4ED8, tinta quase preta, fundo creme. Cada ferramenta interna
   tem a sua cor pra dar pra achar a aba no Chrome; o vermelho #DC2626 ficou reservado
   pra plataforma e pras demos de cliente. O tema escuro redefine SO as variaveis:
   nenhum componente sabe em que tema esta, entao nao ha regra dupla.
   ========================================================================== */
:root{
  /* superficie */
  --bg:#F4F3F0;
  --bg-2:#EDECE8;
  --surface:#FFFFFF;
  --surface-2:#FAF9F7;
  --surface-3:#F2F1ED;
  --line:#E5E2DB;
  --line-soft:#EFEDE7;

  /* tinta */
  --ink:#14161A;
  --ink-2:#565B65;
  --ink-3:#8C919B;
  --ink-4:#B3B7BE;

  /* marca e semantica */
  --brand:#1D4ED8;
  --brand-2:#1740B0;
  --brand-soft:#EDF1FD;
  --brand-line:#D3DDF9;
  --ok:#17915A;      --ok-soft:#EAF6F0;
  --warn:#C07A12;    --warn-soft:#FBF3E4;
  /* --info era #3F7FA8, azul-aco a um passo da marca nova: pilula informativa e
     botao primario liam como a mesma familia. Foi pro lado do petroleo pra separar. */
  --info:#0F7C8A;    --info-soft:#E8F3F5;
  --roxo:#7C5CD6;    --roxo-soft:#F1EEFC;

  /* forma */
  --r-xs:6px; --r-sm:9px; --r:14px; --r-lg:16px; --r-xl:22px;
  --sombra-1:0 1px 2px rgba(20,22,26,.05);
  --sombra-2:0 1px 2px rgba(20,22,26,.05), 0 6px 18px -6px rgba(20,22,26,.10);
  --sombra-3:0 12px 40px -12px rgba(20,22,26,.22), 0 2px 8px rgba(20,22,26,.06);
  --sombra-brand:0 1px 2px rgba(29,78,216,.30), 0 5px 14px -5px rgba(29,78,216,.40);
  --anel:0 0 0 3px rgba(29,78,216,.20);

  --sidebar:248px;
  --topo:62px;
  --transicao:150ms cubic-bezier(.4,0,.2,1);
}

html[data-tema="escuro"]{
  --bg:#0B0C0F;
  --bg-2:#101216;
  --surface:#15171C;
  --surface-2:#1A1D23;
  --surface-3:#20242B;
  --line:#272B33;
  --line-soft:#1E2229;

  --ink:#ECEDEF;
  --ink-2:#A6ACB7;
  --ink-3:#757C87;
  --ink-4:#565C66;

  --brand:#6C93F2;
  --brand-2:#1D4ED8;
  --brand-soft:#111A2E;
  --brand-line:#1D2B4A;
  --ok:#3FBF83;      --ok-soft:#12241C;
  --warn:#E0A03A;    --warn-soft:#28200F;
  --info:#3FB6C4;    --info-soft:#0E2226;
  --roxo:#A18AEB;    --roxo-soft:#1C1730;

  --sombra-1:0 1px 2px rgba(0,0,0,.4);
  --sombra-2:0 1px 2px rgba(0,0,0,.4), 0 8px 22px -8px rgba(0,0,0,.6);
  --sombra-3:0 16px 48px -14px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.4);
  --sombra-brand:0 1px 2px rgba(0,0,0,.45), 0 5px 16px -5px rgba(108,147,242,.35);
  --anel:0 0 0 3px rgba(108,147,242,.24);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{color-scheme:light}
html[data-tema="escuro"]{color-scheme:dark}
body{
  font-family:'Inter var','Inter','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:'cv02','cv03','cv04','ss01';
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;color:inherit}
a{color:inherit;text-decoration:none}
svg{display:block}
[hidden]{display:none !important}

/* Todo icone de icones.js nasce com .ic. O svg so tem viewBox, entao SEM tamanho
   base ele estica ate preencher o container - foi o que aconteceu com os titulos
   de cartao em producao. Regras mais especificas por contexto sobrescrevem. */
.ic{width:16px;height:16px;flex:none}
::selection{background:var(--brand);color:#fff}

/* scrollbar discreta: some no fundo em vez de virar uma barra cinza gritante */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-4);background-clip:content-box;border:3px solid transparent}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* tipografia utilitaria */
.num{font-variant-numeric:tabular-nums}
.rotulo{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--ink-3)}
.silencio{color:var(--ink-3)}
.truncar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}