/*
  Central Wefox - base.css
  Tokens e reset. Nenhum componente mora aqui, so a fundacao que os
  componentes consomem. Ver componentes.css para os blocos visuais.

  Fonte: EMBUTIDA desde 21/08/2026. Gotham (Medium e Black) convertida de
  .otf para .woff2, e Instrument Sans variavel. Zero CDN, sempre - fonte
  externa quebra em WebView de WhatsApp e em qualquer rede instavel.
  Ate aqui o sistema rodava com a stack do sistema operacional, o que fazia
  ele parecer tela de ferramenta em vez de produto.
*/

/* ---------- Fontes da marca, servidas do proprio dominio ---------- */

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/gotham-medium.woff2') format('woff2');
  font-weight: 500 650;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/gotham-black.woff2') format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-variable.woff2') format('woff2-variations'),
       url('../fonts/instrument-sans-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Cor ----------
     Redesenho de 24/08/2026: no AgencyFlow medido ao vivo, a superficie do
     cartao (#1C1A23) e MAIS CLARA que o fundo da pagina (#121117) - razao de
     luminancia relativa 1.87x (formula WCAG: 0.2126R+0.7152G+0.0722B em
     RGB linear). A Central fazia o oposto: superficie em rgba(0,0,0,.25),
     ou seja MAIS ESCURA que o fundo. Superficie mais escura que a pagina
     faz todo bloco parecer buraco; mais clara faz parecer objeto apoiado.
     E a causa raiz do "design ainda parece ruim" (ver SISTEMA-VISUAL-
     AGENCYFLOW.md e BRIEFING-AGENTES.md desta rodada).

     A conta pra manter o matiz da Wefox em vez de copiar o cinza-roxo cru
     deles: converti #100B18 pra HSL (h=0.731, s=0.371, l=0.0686), apliquei
     a MESMA razao de luminancia (1.87x) sobre a luminancia do nosso fundo
     (0.00415), achei a luminancia-alvo (0.00778) e busquei por bissecao o L
     do HSL que devolve essa luminancia mantendo h e s intactos. Resultado:
     l=0.110 -> #1A1226. Mesmo processo pra uma segunda camada "elevada"
     (segmented control, chip, hover), usando a razao do #292735 deles sobre
     o #121117 (3.69x): l=0.174 -> #271B3B. As duas ficam na mesma familia
     roxo-escura do #100B18, so mais claras - nunca um hex novo desconectado
     da marca. Contraste medido: --cor-texto-secundario (#A79FB5) sobre
     #1A1226 = 7.14:1 (exige 4.5:1, passa com folga). */
  --cor-fundo: #100B18;
  --cor-superficie: #1A1226;
  --cor-superficie-clara: #271B3B;
  --cor-borda: rgba(245, 243, 239, .14);
  --cor-borda-forte: rgba(245, 243, 239, .24);

  --cor-acento: #FF7C03;
  --cor-acento-hover: #E06900;
  --cor-acento-fraco: rgba(255, 124, 3, .14);

  --cor-texto: #F5F3EF;
  --cor-texto-secundario: #A79FB5;
  --cor-texto-apagado: rgba(245, 243, 239, .45);

  /* nunca vermelho, em nenhuma hipotese - atraso se anuncia por forma,
     rotulo e a borda do acento, nunca por uma segunda cor de sinal */

  /* ---------- Gradiente ----------
     Rodada de 24/08: o Joao sentiu falta de degrade ("parece site da idade
     das pedras"). Isso revoga o dial de movimento 1/5 (ver DESIGN.md), mas
     nao revoga a proibicao de gradiente em TITULO - continua valendo.
     Os quatro tokens abaixo sao a UNICA fonte de gradiente do sistema:
     nenhum componente escreve um linear-gradient() cru com hex solto,
     todos consomem um destes. Luz caindo de cima (180deg), 3 paradas
     dentro da mesma familia do laranja da marca (~10% de variacao) -
     e a mesma gramatica que ja existia hardcoded em .botao--primario,
     so que agora nomeada e reutilizavel em qualquer bloco de destaque
     ou item ativo, em vez de reescrita hex a hex em cada lugar. */
  --grad-acento: linear-gradient(180deg, #FF9331 0%, #FF7C03 46%, #EE6E00 100%);
  --grad-acento-hover: linear-gradient(180deg, #FFA24C 0%, #FF8A1C 46%, #F87500 100%);
  --grad-acento-ativo: linear-gradient(180deg, #F07200 0%, #FF7C03 60%, #FF8A1C 100%);
  /* versao fraca: mesma luz, dentro da faixa translucida que ja usavamos
     pra "item ativo" (--cor-acento-fraco solido) - aqui vira degrade
     bem sutil, pra nao competir com o texto por cima. */
  --grad-acento-fraco: linear-gradient(180deg, rgba(255, 124, 3, .20) 0%, rgba(255, 124, 3, .08) 100%);
  /* sheen neutro pra qualquer superficie que precisa "levantar" (cartao em
     hover, bloco de destaque): branco quase invisivel no topo, some antes
     da metade. Nunca usada sozinha - sempre por cima de --cor-superficie*,
     como segunda camada de background. */
  --grad-superficie: linear-gradient(180deg, rgba(245, 243, 239, .06) 0%, rgba(245, 243, 239, 0) 60%);

  /* ---------- Tipografia ---------- */
  --font-display: 'Gotham', ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-texto: 'Instrument Sans', ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;

  /* Escala redesenhada em 24/08 sobre a medicao do AgencyFlow: 12px e o
     tamanho mais frequente do app deles (29 ocorrencias), 14px e corpo e
     item de menu, 20px peso 600 e titulo de secao. Os tres viram ancora
     direta em --fs-1, --fs-3 e --fs-5; --fs-2 e --fs-4 sao os degraus
     intermediarios que a escala de 6 passos ainda precisa pra manter
     hierarquia entre rotulo/meta e entre corpo/titulo. --fs-6 (numero
     heroi) e flourish exclusivo do bloco de destaque, fora da medicao. */
  --fs-1: 12px;   /* rotulo pequeno: cabecalho de grupo, badge, timeline */
  --fs-2: 13px;   /* meta: hora, data, texto de apoio */
  --fs-3: 14px;   /* corpo, titulo de tarefa em repouso, item de menu */
  --fs-4: 16px;   /* enfase, titulo de secao pequeno */
  --fs-5: 20px;   /* titulo de secao, estado vazio */
  --fs-6: 64px;   /* numero herois, so no bloco de raio grande */

  /* quatro pesos agora: --fw-media e novo, pra rotulo que perde a caixa
     alta e precisa de algum peso pra nao sumir em texto normal (400) */
  --fw-regular: 400;
  --fw-media: 500;   /* rotulo minusculo sem caixa alta */
  --fw-forte: 650;   /* ~peso 600 medido no titulo de secao do AgencyFlow */
  --fw-black: 800; /* reservado ao numero do bloco de destaque */

  --lh-dado: 1.2;
  --lh-texto: 1.55;

  /* -0.16px medido no AgencyFlow em quase todo texto do app (nao escala
     por em, e um valor fixo) - aplicado global no body em vez de var aqui,
     porque cobre corpo/menu/rotulo, nao so titulo. --tracking-titulo
     continua a camada extra so pra titulo grande (fs-5/fs-6). */
  --tracking-titulo: -0.02em;   /* negativo em titulo grande, soma ao body */
  /* --tracking-rotulo: caixa alta saiu de quase todo componentes.css
     (ver bloco 2/3/9/12/17) porque o AgencyFlow nao usa caixa alta em
     lugar nenhum (text-transform: none em toda amostra). O token continua
     existindo pro que outras telas ainda usam, so com metade do valor -
     positivo e mais restrito, pra nao ficar "duro" onde ainda aparece. */
  --tracking-rotulo: 0.04em;

  /* ---------- Espaco: grid de 8px ---------- */
  --sp-05: 4px;   /* so subgrid interno de componente pequeno, nunca entre blocos */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;

  /* ---------- Forma ----------
     Gramatica do AgencyFlow, medida: 16px em cartao/botao/modal, 14px em
     item de menu, 12px em elemento pequeno, pilula so em chip de status.
     --raio-md vira o "cartao/botao/modal" (16), --raio-sm vira o "elemento
     pequeno" (12). O item de menu (14) fica fora daqui: a barra lateral e
     shell.css, nao um destes dois arquivos.

     Decisao sobre --raio-hero (era 26px, "um bloco por tela"): com o
     --raio-md padrao saltando de 10 pra 16, a folga entre "padrao" e
     "hero" encolhe de 2.6x pra perto de 1.6x - a regra de exclusividade
     existia pra proteger um salto de forma que agora e bem menor, e o
     AgencyFlow nao usa raio hero nenhum (tudo e 16). Em vez de manter
     26px intocado (que voltaria a parecer um salto grande de novo, na
     direcao contraria ao "aproximar do AgencyFlow") ou zerar o hero por
     completo (perderia a unica assinatura visual propria da Central, o
     bloco .destaque com canto assimetrico em forma de flamula), reduzi
     --raio-hero pra 20px: ainda um degrau visivel acima do cartao padrao,
     pequeno o bastante pra nao brigar com a nova densidade do resto do
     sistema. A regra de "um bloco por tela" continua valendo por
     convencao (so .destaque usa --raio-hero em todo o CSS de posse deste
     agente), mas deixou de ser uma trava rigida: se outra tela quiser um
     segundo momento de enfase, o custo de usar --raio-hero de novo caiu
     bastante com a diferenca menor entre os dois valores. */
  --raio-sm: 12px;
  --raio-md: 16px;
  --raio-hero: 20px;
  --raio-pilula: 999px;   /* so em chip de status, nunca em bloco grande */

  --sombra-1: 0 8px 24px rgba(0, 0, 0, .28);

  /* ---------- Movimento ----------
     Dial subiu de 1/5 pra 3/5 em 24/08: "movimento que da RESPOSTA e
     CONTINUIDADE, nunca movimento que faz ESPERAR" (ver DESIGN.md). A
     regra pratica que fecha toda decisao de duracao/easing desta rodada:
     nada no caminho de uma acao passa de 250ms, e nenhuma tela atrasa a
     primeira pintura por causa de animacao de entrada.

     Duas duracoes, generosas o bastante pra sentir e curtas o bastante
     pra nao segurar: --duracao-rapida (hover, foco, feedback de toque)
     e --duracao-media (o que muda de FORMA ou de lugar: borda recuando,
     grupo do rail abrindo, cartao levantando).

     Tres easings, nao um so - e o que separa "animado" de "vivo":
     - --easing-padrao: simetrico, pra mudanca de ESTADO sem direcao
       propria (cor, borda, opacidade que so liga/desliga)
     - --easing-entrada: comeca rapido e desacelera (ease-out) - usado
       quando algo aparece, cresce ou entra em foco (hover chegando,
       grupo abrindo, cartao levantando)
     - --easing-saida: comeca devagar e acelera (ease-in) - usado quando
       algo sai, encolhe ou volta ao repouso (hover saindo, grupo
       fechando). O idioma e sempre o mesmo par: a REGRA base do
       componente carrega --easing-saida (volta ao repouso), e a regra
       :hover/[open] carrega --easing-entrada (chegando la) - o navegador
       usa o easing da transicao que esta ativa em cada sentido. */
  --duracao-rapida: 120ms;
  --duracao-media: 200ms;
  --easing-padrao: cubic-bezier(.4, 0, .2, 1);
  --easing-entrada: cubic-bezier(0, 0, .2, 1);
  --easing-saida: cubic-bezier(.4, 0, 1, 1);
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  /* Achado verificando esta rodada: o quadro (componentes.css, bloco 12,
     display:grid + grid-auto-flow:column + overflow-x:auto) e um scroll
     container correto por dentro - offsetWidth 358 vs scrollWidth 1008,
     nunca vaza pro layout visual. Mas em emulacao mobile (390px, viewport
     meta com width=device-width) o Chromium ainda inflava
     window.innerWidth pro tamanho intrinseco do grid (409px) so em
     kanban.php, empurrando a barra inferior fixa (.rail, position:fixed)
     19px pra fora - sem nenhum elemento visivelmente cortado, so a barra
     de baixo alargada e um scroll fantasma no documento. overflow-x:clip
     no html e a rede de seguranca padrao pra esse bug conhecido de
     grid/flex com scroll interno + viewport mobile: clip, nao hidden,
     porque nao cria um novo scroll container (position:sticky do .topo
     continua funcionando) e nao muda nenhuma pintura visivel - so
     impede o documento de esticar por causa do filho scrollavel. */
  overflow-x: clip;
}

body {
  height: 100%;
  margin: 0;
  overflow-x: clip;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--font-texto);
  font-size: var(--fs-3);
  line-height: var(--lh-texto);
  /* -0.16px medido no AgencyFlow em quase todo texto do app. Aplicado
     aqui, no body, pra herdar em cascata pro sistema inteiro de uma vez -
     em vez de adicionar a propriedade em cada classe de componentes.css,
     o texto normal ja nasce apertado e so os rotulos que ainda usam
     --tracking-rotulo (positivo, caixa alta remanescente noutras telas)
     sobrescrevem isso pontualmente. */
  letter-spacing: -0.16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* ---------- As superficies que o navegador desenha sozinho ----------
   Selecao, cursor, barra de rolagem e anel de foco vem com o padrao do
   sistema operacional e nao pertencem a design system nenhum ate alguem
   decidir. E o sinal mais barato de que a tela foi construida e nao
   montada. */

::selection {
  background: var(--cor-acento);
  color: var(--cor-fundo);
}

:root {
  color-scheme: dark;
  accent-color: var(--cor-acento);
  caret-color: var(--cor-acento);
  scrollbar-color: rgba(245, 243, 239, .18) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(245, 243, 239, .16);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--raio-pilula);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 243, 239, .3);
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* Um anel de foco so no sistema inteiro, sempre visivel no teclado e nunca
   no clique de mouse. Fica FORA do elemento pra nunca cobrir texto. */
:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Sublinhado que respira, em vez de encostar na letra */
a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* numero que vira coluna, sempre alinhado - ver base-paineis.md */
.num,
.tabular {
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}