/* ═══════════════════════════════════════════════════════════════════════════
   etus-ui — tokens
   Fonte única de cor, tipografia e espaçamento dos produtos internos da ETUS.

   Consolida as DUAS famílias que hoje convivem no ferramentas-etus:
     canônica  →  --card / --ink / --line / --track / --green   (a das telas v2)
     (aliases de nome antigo NÃO moram aqui — ver a nota mais abaixo)

   Todo par de cor deste arquivo foi medido com scripts/contraste.py nos dois
   temas. Os valores ajustados foram marcados para atingir WCAG 2.2 AA
   preservando matiz e saturação — a identidade da cor não mudou, só a
   luminosidade.
   ═══════════════════════════════════════════════════════════════════════════ */

:root, :root[data-theme="dark"] {

  /* ── Superfície ────────────────────────────────────────────────────────── */
  --bg:            #151514;   /* MARCA · cor principal da marca */
  --bg-sidebar:    #0e0e0d;
  --card:          #1b1b1a;   /* card padrão — TODO card usa este */
  --card2:         #1f1f1e;   /* card aninhado / cabeçalho de tabela */
  --line:          #2a2a28;   /* borda de card, divisória de linha */
  --line-strong:   #6E6D68;   /* MARCA · borda de campo              3.3:1 */
  --track:         #242422;   /* trilho de barra, fundo de chip, hover */

  /* ── Texto ─────────────────────────────────────────────────────────────── */
  --ink:           #EBE9E5;   /* MARCA · número grande, título      12.8:1 */
  --ink2:          #BEBBB7;   /* MARCA · corpo, rótulo de eixo       8.1:1 */
  --ink3:          #908E89;   /* MARCA · eyebrow 11px, legenda       4.8:1 */

  /* ── Marca ─────────────────────────────────────────────────────────────── */
  --green:         #3BE476;   /* MARCA · acento, dado em destaque    9.3:1 */
  --green-mid:     #066E3E;   /* MARCA */
  --green-deep:    #066E3E;   /* MARCA */
  --green-soft:    rgba(59, 228, 118, 0.10);   /* fundo de acento */

  /* ── Gráfico ───────────────────────────────────────────────────────────── */
  --chart-bar:     #3BE476;   /* MARCA · barra padrão                9.3:1 */
  --chart-focus:   #8DF768;   /* MARCA · barra em foco              11.6:1 */
  --chart-tail:    #6E6D68;   /* MARCA · cauda sobre --card          3.3:1 */
  --chart-grid:    #33322F;   /* gridline — decorativa, ver nota      1.4:1 */
  --chart-parcial: #6E6D68;   /* MARCA · barra de período parcial     3.3:1 */
  --chart-proj:    #2E9E5B;   /* NOVO — projeção: mesma cor, traço tracejado */
  --chart-ring:    #151514;   /* MARCA · contorno 1.5px da barra em foco 8.2:1 */

  /* ── Semântica de estado ───────────────────────────────────────────────── */
  --danger:        #E0685F;   /* crítico, atraso                     5.2:1 */
  --danger-soft:   rgba(224, 104, 95, 0.14);
  --warning:       #E8913C;   /* revisar, pendência                  7.0:1 */
  --warning-soft:  rgba(232, 145, 60, 0.14);
  --info:          #4A9EFF;
  --info-soft:     rgba(74, 158, 255, 0.12);
  --neutro:        #908E89;   /* MARCA · "sem dado": nem bom nem ruim 4.8:1 */

  /* ── Foco (WCAG 2.4.7 / 2.4.13) ────────────────────────────────────────── */
  --focus:         #7CC4FF;   /* NOVO — anel de foco, 3:1 em qualquer superfície */
  --sobre-verde:   #151514;   /* MARCA · texto sobre --green (vivo)   11,0:1 */
  --green-hover:   #2BC262;   /* NOVO — hover do botão primário */
  --sobre-deep:    #EBE9E5;   /* MARCA · texto sobre --green-deep      5,2:1 */

  --shadow-card:   none;
  --hover:         rgba(255,255,255,.04);
}

:root[data-theme="light"] {

  --bg:            #FBFAF9;   /* MARCA */
  --bg-sidebar:    #F3F2EF;   /* MARCA */
  --card:          #FFFFFF;
  --card2:         #F6F4F1;
  --line:          #E7E4DF;
  --line-strong:   #6E6D68;   /* MARCA · borda de campo              5.2:1 */
  --track:         #F1EFEB;

  --ink:           #151514;   /* MARCA                              15.9:1 */
  --ink2:          #3E3E3C;   /* MARCA                               9.3:1 */
  --ink3:          #6E6D68;   /* MARCA                               4.5:1 */

  --green:         #066E3E;   /*                                     6.4:1 */
  --green-mid:     #066E3E;   /* MARCA */
  --green-deep:    #066E3E;   /* MARCA */
  --green-soft:    rgba(6, 110, 62, 0.08);

  --chart-bar:     #066E3E;   /* MARCA · barra padrão                6.4:1 */
  --chart-focus:   #151514;   /* MARCA · foco mais escuro que barra 18.3:1 */
  --chart-tail:    #908E89;   /* MARCA · cauda sobre --card          3.3:1 */
  --chart-grid:    #E2DFD9;   /* decorativa                          1.3:1 */
  --chart-parcial: #908E89;   /* MARCA · idem                          3.3:1 */
  --chart-proj:    #1f9d57;   /* NOVO */
  --chart-ring:    #EBE9E5;   /* MARCA · contorno da barra em foco       5.5:1 */

  --danger:        #C2352C;   /* extensão de UI — ver procedência    6,0:1 */
  --danger-soft:   rgba(194, 53, 44, 0.10);
  --warning:       #9A5B12;   /* extensão de UI — ver procedência    5,4:1 */
  --warning-soft:  rgba(154, 91, 18, 0.12);
  --info:          #2563EB;
  --info-soft:     rgba(37, 99, 235, 0.10);
  --neutro:        #6E6D68;   /* MARCA                               5.2:1 */

  --focus:         #0B63C5;   /* NOVO */
  --sobre-verde:   #EBE9E5;   /* MARCA · texto sobre --green (escuro)  5,2:1 */
  --green-hover:   #0C5732;   /* NOVO — hover do botão primário */
  --sobre-deep:    #EBE9E5;   /* MARCA · texto sobre --green-deep      5,2:1 */

  --shadow-card:   0 1px 2px rgba(21,21,20,0.04);
  --hover:         rgba(6,110,62,.05);
}


/* ═══════════════════════════════════════════════════════════════════════════
   IDENTIDADE POR PRODUTO

   --id vive SÓ no cromo: marca, favicon, item de menu ativo, anel de foco,
   barra em destaque no gráfico. NUNCA qualifica um dado.
   As cores de estado (--danger --warning --neutro --green) vivem SÓ no dado.
   Os dois conjuntos não se cruzam. Cruzar é o que produz "alarme que sempre
   dispara" — a cor de aviso vira decoração e o aviso deixa de existir.

   Três tokens por produto:
     --id        preenchimento (marca, favicon, barra em foco)
     --id-ink    texto e ícone — SEMPRE abaixo do --ink, senão compete
     --id-soft   fundo de item ativo e de chip
     --sobre-id  texto sobre um preenchimento --id

   Declare o produto no elemento raiz:  <html data-produto="ferramentas">
   Nenhum componente conhece o nome do produto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Padrão, para dashboard que ainda não declarou produto */
:root {
  --id:        #3BE476;   /* MARCA */
  --id-ink:    #3BE476;
  --id-soft:   rgba(59, 228, 118, 0.10);
  --sobre-id:  #151514;   /* MARCA */
}
:root[data-theme="light"] {
  --id:        #066E3E;   /* MARCA */
  --id-ink:    #066E3E;
  --id-soft:   rgba(6, 110, 62, 0.08);
  --sobre-id:  #EBE9E5;   /* MARCA */
}

/* ── Ferramentas ───────────────────────────────────────────────────────────
   Amarelo 01 do brand book. Puro, ele tem 14,1:1 — praticamente o mesmo do
   --ink. Por isso o texto usa --id-ink, que é o próprio #F0EE7A composto
   sobre a superfície: mesmo matiz, 9,3:1, abaixo do --ink. Ele recua. */
:root[data-produto="ferramentas"],
:root[data-theme="dark"][data-produto="ferramentas"] {
  --id:        #F0EE7A;   /* MARCA · preenchimento              14,1:1 */
  --id-ink:    #C4C366;   /* derivado de --id                    9,3:1 */
  --id-soft:   rgba(240, 238, 122, 0.12);
  --sobre-id:  #151514;   /* MARCA · texto sobre --id           15,0:1 */
}
:root[data-theme="light"][data-produto="ferramentas"] {
  --id:        #6E6B14;   /* derivado do Amarelo 01              5,6:1 */
  --id-ink:    #6E6B14;   /*                                     5,6:1 */
  --id-soft:   rgba(110, 107, 20, 0.10);
  --sobre-id:  #FBFAF9;   /* MARCA */
}

/* ── MandaNota ─────────────────────────────────────────────────────────── */
:root[data-produto="mandanota"],
:root[data-theme="dark"][data-produto="mandanota"] {
  --id:        #3BE476;   /* MARCA                              10,3:1 */
  --id-ink:    #3BE476;
  --id-soft:   rgba(59, 228, 118, 0.10);
  --sobre-id:  #151514;   /* MARCA */
}
:root[data-theme="light"][data-produto="mandanota"] {
  --id:        #066E3E;   /* MARCA                               6,4:1 */
  --id-ink:    #066E3E;
  --id-soft:   rgba(6, 110, 62, 0.08);
  --sobre-id:  #EBE9E5;   /* MARCA */
}

/* ── Produto novo: como escolher ───────────────────────────────────────────
   A cor SAI DA PALETA do brand book — não se inventa. E passa em dois testes:

   1. CONTRASTE MENOR QUE O DO TEXTO na versão de texto. Se --id-ink chegar
      perto do --ink, o acento compete com o conteúdo em vez de destacá-lo.
      Se a cor da paleta for clara demais, derive o --id-ink compondo-a sobre
      a superfície até ficar abaixo do --ink — foi o que se fez no amarelo.
   2. MATIZ A 40° OU MAIS das cores de estado (--danger 31°, --warning 65°,
      --green 148°). Colada nelas, a identidade é lida como aviso.

   Já usados: verde #3BE476 (MandaNota) · Amarelo 01 #F0EE7A (Ferramentas).
   Próximos sancionados: azul #A0E3F3 (matiz 220°) e rosa #F5B3D8 (343°).
   O limão #C5F07A NÃO serve — 122°, colado no verde da marca.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   PROCEDÊNCIA — de onde vem cada cor

   Tudo marcado com MARCA vem literalmente do Brand Book Etus (Drive,
   "01. Brand Book Etus"). Nenhuma cor de marca foi inventada nem alterada.

   A descoberta que gerou este arquivo: a paleta da marca já resolvia o
   contraste — as duas cores cinza estavam apenas ATRIBUÍDAS AOS TEMAS
   TROCADOS no styles.css atual.

     #6E6D68  passa em tema CLARO (5,2:1) e reprova no escuro (3,3:1)
     #908E89  passa em tema ESCURO (4,8:1) e reprova no claro (3,3:1)

   O código usava #6E6D68 no escuro e #908E89 no claro — exatamente o
   contrário. Trocar a atribuição corrige o contraste sem sair da marca.

   ── Extensões de UI, FORA do brand book ──────────────────────────────────
   O Brand Book não define cor de estado (erro, aviso, informação) nem anel
   de foco — são necessidades de interface que uma marca de comunicação não
   precisa cobrir. Os quatro tokens abaixo são propostas e PRECISAM DE AVAL
   do time de marca antes de virarem padrão:

     --danger   --warning   --info   --focus

   Os pastéis do brand book (#F5B3D8 rosa, #F0EE7A amarelo, #A0E3F3 azul,
   #C5F07A limão e as 10 variações) não servem para ESTADO: são claros demais
   para texto em tema claro. Servem para peça de comunicação — e para
   IDENTIDADE DE PRODUTO, que é cromo e não dado: ver o bloco de identidade
   acima. Se o time de marca quiser derivar os estados deles, é a conversa
   certa.

   ── Mudança de 15/08/2026 ────────────────────────────────────────────────
   --warning saiu de #D9A441 para #E8913C. O #D9A441 vinha sendo usado ao
   mesmo tempo como cor de aviso e como identidade da Ferramentas, e não
   consta da paleta do brand book. Com a Ferramentas assumindo o Amarelo 01
   (#F0EE7A, matiz 105°), o aviso precisou sair da família amarela: os 25°
   que separavam as duas cores não bastam para papéis opostos. O laranja
   novo fica a 40° da identidade e a 34° do --danger — separado dos dois
   lados.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   NOTA DE ACESSIBILIDADE — por que barra, cauda e foco não têm 3:1 entre si

   Três níveis de preenchimento não cabem, ao mesmo tempo, com 3:1 entre si E
   3:1 contra o mesmo fundo: a faixa de luminância disponível não dá. É
   aritmética, não escolha de paleta.

   O sistema resolve com canal redundante, como o WCAG 1.4.11 permite:

   · cauda vs barra  — matiz diferente (cinza vs verde), posição (a lista é
     sempre ordenada por valor) e o corte rotulado na tela. Além disso as
     barras são separadas por vão (largura = 40% do passo), então não são
     "adjacentes" no sentido do critério.
   · foco vs barra   — a barra em foco ganha CONTORNO de 1.5px em
     --chart-ring, medido em 3.4:1 (escuro) e 5.2:1 (claro) contra a barra. O
     preenchimento sozinho nunca comunica seleção.

   Cada cor isolada contra o fundo cumpre 3:1. Isto está medido, não assumido:
   scripts/contraste.py --pares, os 24 pares do sistema.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ Tipografia — 6 tamanhos, não 20 ══════════════════════════════════════
   A escala abaixo substitui os 20 tamanhos que existem hoje. Todo texto do
   produto cabe em um destes seis papéis. Se algo não couber, é sinal de que
   falta um papel — pare e discuta, não invente um 12.5px novo.             */
:root {
  --fs-numero:     22px;  --fw-numero:     750;   /* KPI, número grande      */
  --fs-titulo:     18px;  --fw-titulo:     700;   /* título de página        */
  --fs-card:       15px;  --fw-card:       700;   /* título de card          */
  --fs-corpo:      13px;  --fw-corpo:      400;   /* corpo, célula de tabela */
  --fs-apoio:      12px;  --fw-apoio:      400;   /* legenda, rótulo de eixo */
  --fs-eyebrow:    11px;  --fw-eyebrow:    700;   /* eyebrow CAIXA-ALTA      */
  --ls-eyebrow:    .06em;

  /* PISO. 11px é o MENOR texto do sistema. Nada abaixo disso — 8, 9 e 10px não são
     "compactos", são ilegíveis para boa parte das pessoas. Medido no ferramentas-etus
     em 07/08/2026: 40 usos abaixo de 11px, sendo 8 a 9px e 1 a 8px.
     Se algo "não cabe" em 11px, o problema é o layout, não a fonte. */

  /* ÍCONE NÃO É TEXTO. Ícone, avatar e selo se medem em width/height, nunca em
     font-size — senão entram na conta da tipografia e inflam a escala sem motivo.
     O alvo clicável mínimo é --alvo (WCAG 2.5.8) e vale para o ícone "i" de
     "como ler", que é o caso que mais se erra. */
  --ico-sm:        16px;   /* decorativo, não clicável            */
  --ico-md:        20px;   /* decorativo maior, avatar de linha   */
  --ico-lg:        32px;   /* avatar de card, ícone de estado vazio */
  --alvo:          24px;   /* MÍNIMO de alvo clicável — WCAG 2.5.8 */

  /* DUAS famílias, DOIS papéis — não é cadeia de fallback, é divisão de trabalho.
     Fonte geométrica cansa em bloco de texto a 13px; humanista não. Medido nos
     dois produtos da casa: onde a prosa está em Space Grotesk a tela lê "dura".
     system-ui nunca é aceitável em nenhum dos dois: apaga a tipografia da marca. */
  --font-marca: 'Space Grotesk', sans-serif;  /* MARCA · título de página, título de
     card, eyebrow, número-chave, item de menu, valor monetário */
  --font-texto: 'Roboto', 'Space Grotesk', sans-serif;  /* corpo, apoio, célula de
     tabela, legenda. O brand book permite Roboto no CORPO de texto de sistemas. */
  --font: var(--font-marca);   /* alias de compatibilidade — projeto em migração.
     Código novo usa --font-marca ou --font-texto, nunca --font. */
  --num:  tabular-nums;   /* font-variant-numeric em TODA coluna numérica */
}

/* ═══ Espaçamento — escala de 4 ════════════════════════════════════════════ */
:root {
  --s1:  4px;   --s2:  8px;   --s3: 12px;   --s4: 16px;
  --s5: 20px;   --s6: 24px;   --s7: 32px;   --s8: 40px;

  --r-chip:   999px;   /* chip, pill, badge — sempre cápsula     */
  --r-ctrl:     8px;   /* botão, campo, segmented control        */
  --r-card:    14px;   /* card, painel, tabela                   */
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALIASES DE LEGADO — NÃO ficam aqui.

   Um projeto que está migrando de nomes antigos (--bg-card, --text-primary,
   --border-subtle, --red …) precisa de um bloco de aliases apontando para os
   tokens canônicos. Esse bloco é **andaime de migração daquele projeto** e mora
   no CSS dele, nunca nesta camada.

   A regra: a camada compartilhada carrega o que TODO dashboard precisa, nunca o
   que UM dashboard está tentando apagar. Trazer aliases para cá exporta a dívida
   de um projeto para todos os próximos.
   ═══════════════════════════════════════════════════════════════════════════ */