/* tokens.css - tokens do sistema de design do TemJus (PUB-CASCA-133, 29/09/2026).
   Origem: PUB-DESIGN-132, _dados/tokens.css, com a paleta A (veredito do operador de 29/09/2026).
   Só variáveis CSS: nenhum recurso externo, nenhum framework. Quem desenha é static/css/base.css.
   - :root                          paleta A (neutros quentes, azul de ação, barra lateral clara) e densidade padrão;
   - html[data-density="compacta"]  densidade compacta, escolhida por usuário no botão da casca;
   - html[data-theme="dark"]        tema escuro (PUB-ESCURO-141), escolhido por usuário no botão
     "Escuro" da casca: redefine só os nomes de cor e de sombra daqui, e cada par é medido nos
     dois temas (tests/test_escuro_141.py e o contraste.py da PUB-DESIGN-132).
   Os tokens antigos de style.css (--primary, --text, --border...) continuam valendo para as telas de
   hoje; cada tela passa a estes tokens na própria sessão. */

:root {
  /* ---- Tipografia ---- */
  --fonte-base: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --texto-xs: 0.75rem;     /* 12px  legenda, metadado não essencial; nunca em selo ou botão */
  --texto-sm: 0.8125rem;   /* 13px  selo, rótulo de coluna, migalha, texto de apoio */
  --texto-md: 0.875rem;    /* 14px  corpo na densidade compacta */
  --texto-base: 0.9375rem; /* 15px  corpo padrão, célula de tabela, campo, botão, item de menu */
  --texto-lg: 1.0625rem;   /* 17px  título de bloco, nome das partes */
  --texto-xl: 1.25rem;     /* 20px  título de seção; título da tela no cabeçalho da casca */
  --texto-2xl: 1.5rem;     /* 24px  título da tela dentro do conteúdo (h1) */
  --texto-3xl: 1.875rem;   /* 30px  número das caixas de contagem */
  --peso-normal: 400;
  --peso-forte: 600;       /* títulos, partes, rótulo de selo; 700 só no número das caixas */
  --peso-numero: 700;
  --entrelinha-apertada: 1.25; /* títulos e números */
  --entrelinha-base: 1.45;     /* corpo, tabela, formulário */
  --entrelinha-leitura: 1.6;   /* texto da publicação, ementa, descrição longa */
  --largura-leitura: 72ch;     /* coluna de texto corrido */

  /* ---- Espaçamento (base 4) ---- */
  --esp-05: 2px;
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;

  /* ---- Grade e medidas ---- */
  --largura-nav: 250px;        /* a largura da barra de hoje (style.css), mantida para não mover as telas */
  --largura-conteudo-max: 1440px;
  --largura-indice: 200px;
  --largura-painel-leitura: 40%;
  --altura-topo: 56px;
  --controle-alt: 36px;        /* botão, campo, chip; nunca abaixo de 24px */
  --controle-alt-sm: 28px;
  --linha-tabela: 44px;
  --icone: 18px;
  --icone-sm: 14px;
  --raio-sm: 4px;
  --raio-md: 6px;
  --raio-lg: 10px;
  --raio-pill: 999px;
  --sombra-1: 0 1px 2px rgba(20, 18, 14, 0.06);
  --sombra-2: 0 6px 16px rgba(20, 18, 14, 0.12);   /* só para menu suspenso e busca */
  --transicao: 120ms ease;

  /* ---- Cores: paleta A (neutros quentes) ---- */
  --cor-fundo: #f5f4f0;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #f0eee9;   /* cabeçalho de tabela, faixa de grupo */
  --cor-borda: #e3e0d8;          /* divisória decorativa */
  --cor-borda-forte: #8a857b;    /* borda de campo e de componente: 3:1 */
  --cor-texto: #2b2925;
  --cor-texto-2: #6b665d;
  --cor-texto-3: #767169;        /* placeholder, desabilitado (ainda 4,5:1 sobre branco) */
  --cor-acao: #1f5f9e;
  --cor-acao-hover: #174b7e;
  --cor-acao-texto: #ffffff;
  --cor-acao-fundo: #e4eef8;     /* fundo de item ativo, chip selecionado, linha selecionada */
  --cor-foco: #174b7e;           /* anel de 2px com deslocamento de 2px */

  /* semânticas: cada uma tem texto (sobre branco e sobre o próprio fundo) e fundo claro */
  --cor-prazo: #7c4a03;          --cor-prazo-fundo: #fdf1d8;     /* PRAZO A CONFIRMAR, prazo interno */
  --cor-urgente: #a11d1d;        --cor-urgente-fundo: #fbe3e3;   /* atrasado, vence hoje, PARADA */
  --cor-atencao: #9a3b0c;        --cor-atencao-fundo: #fde8dc;   /* tipo divergente, SEM DONO */
  --cor-ok: #1e6b3a;             --cor-ok-fundo: #ddf3e4;        /* tratada, concluída, captura ok */
  --cor-neutro: #4d5560;         --cor-neutro-fundo: #e9ecef;    /* em andamento, informação */
  --cor-historico: #6b6257;      --cor-historico-fundo: #efeae2; /* histórica, arquivada, cancelada */
  --cor-ia: #6d28d9;             --cor-ia-fundo: #efe8fd;        /* sugestão da IA, cota */

  /* barra lateral clara */
  --cor-nav-fundo: #f0eee9;
  --cor-nav-borda: #e3e0d8;
  --cor-nav-texto: #2b2925;
  --cor-nav-texto-2: #6b665d;
  --cor-nav-hover-fundo: #e8e5de;
  --cor-nav-ativo-fundo: #e4eef8;
  --cor-nav-ativo-texto: #1f5f9e;
  --cor-nav-marca: #1e3a5f;      /* a cor do favicon de hoje, mantida como marca */
}

/* ---- Densidade compacta: corpo 14px, controles e linhas menores ---- */
[data-density="compacta"] {
  --texto-base: 0.875rem;   /* 14px */
  --texto-lg: 1rem;         /* 16px */
  --controle-alt: 32px;
  --controle-alt-sm: 26px;  /* nunca abaixo de 24px */
  --linha-tabela: 36px;
  --altura-topo: 48px;
  --esp-5: 16px;
  --esp-6: 24px;
}

/* ---- Tema escuro (PUB-ESCURO-141, 30/09/2026; decisão 5 da PUB-DESIGN-132) ----
   Paleta A escura: neutros quentes escuros no conteúdo e, na barra lateral, a barra escura da
   opção 3b da proposta. Mesmos nomes do :root, nenhum nome novo. A regra de cada cor não muda:
   a etiqueta, os selos e os avisos têm o mesmo contraste mínimo nos dois temas (texto 4,5:1,
   borda, foco e ícone 3:1). Texto claro sobre fundo escuro; a cor de ação fica clara, e por isso
   o texto sobre ela (botão primário, selo sólido) é escuro.
   O <head> só põe data-theme="dark" nas telas do desenho novo sem cor fixa (templates/base.html);
   nas outras a escolha fica guardada e a tela segue clara. */
[data-theme="dark"] {
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sombra-2: 0 6px 16px rgba(0, 0, 0, 0.6);

  --cor-fundo: #171614;
  --cor-superficie: #211f1c;
  --cor-superficie-2: #2b2925;
  --cor-borda: #3a3732;
  --cor-borda-forte: #8c867c;
  --cor-texto: #ece9e3;
  --cor-texto-2: #b8b2a7;
  --cor-texto-3: #a8a296;
  --cor-acao: #7fb5ea;
  --cor-acao-hover: #a6cdf3;
  --cor-acao-texto: #0f1822;
  --cor-acao-fundo: #1d3247;
  --cor-foco: #a6cdf3;

  --cor-prazo: #eec06a;          --cor-prazo-fundo: #3a2b0f;
  --cor-urgente: #f4a0a0;        --cor-urgente-fundo: #431c1c;
  --cor-atencao: #f3ad83;        --cor-atencao-fundo: #3f2415;
  --cor-ok: #86d6a2;             --cor-ok-fundo: #16321f;
  --cor-neutro: #bcc5cf;         --cor-neutro-fundo: #2a3037;
  --cor-historico: #c3b9ac;      --cor-historico-fundo: #302b25;
  --cor-ia: #c9aef8;             --cor-ia-fundo: #2e2248;

  --cor-nav-fundo: #1c2b3a;
  --cor-nav-borda: #2f4256;
  --cor-nav-texto: #e6ebf1;
  --cor-nav-texto-2: #a3adba;
  --cor-nav-hover-fundo: #243749;
  --cor-nav-ativo-fundo: #2f4a66;
  --cor-nav-ativo-texto: #ffffff;
  --cor-nav-marca: #2f5d8f;

  color-scheme: dark;            /* controles nativos (campo, seleção, data, rolagem) escuros */
}