/* tokens.css — design tokens da revista digital de jurisprudência.
 *
 * DIREÇÃO VISUAL: Variante A (clara/colorida, sans) — proposta
 * `Informativo TRE-PI.dc.html` do ZIP "Galeria de informativos jurídicos".
 * Página branca, tipografia Libre Franklin (títulos + corpo) + IBM Plex Mono
 * (eyebrows/labels/números-meta), cartões de edição com fundo tingido por cor
 * de edição. Substitui a direção antiga navy/latão/serif.
 *
 * R4: fontes AUTO-HOSPEDADAS em assets/fonts/ (OFL) — sem CDN em runtime.
 * (R4 proíbe rede externa, NÃO "novas fontes".)
 * AA: acentos por edição validados sobre branco (ver bloco --ed-*).
 */

:root {
  /* --- Tinta / texto --- */
  --cor-tinta: #1c1e26;          /* corpo */
  --cor-titulo: #171a21;         /* títulos (h1–h3) */
  --cor-tese: #1b1e26;           /* manchete da tese (ementa) */
  --cor-forte: #2e313a;          /* valores fortes (dados, nav) */
  --cor-passo: #33363f;          /* corpo dos passos */

  /* --- Cinzas / labels (escurecidos p/ AA ≥ 4.5:1 sobre branco; o protótipo
   *     usava tons mais claros que reprovavam) --- */
  --cor-suave: #6b6e78;          /* texto secundário — 5.09:1 */
  --cor-label: #767162;          /* label mono quente (principal) — 4.87:1 */
  --cor-label-frio: #6f737d;     /* label mono frio — 4.75:1 */
  --cor-sub: #726d5c;            /* sub-labels (norma, contagens) — 5.18:1 */
  --cor-tenue: #b7b0a0;          /* seta/decorativo (não carrega texto sozinho) */

  /* --- Papel / superfícies --- */
  --cor-branco: #ffffff;
  --cor-realce-claro: #f1ece1;   /* trilho do segmento */
  --cor-dados-cab: #fcfaf5;      /* cabeçalho "Dados do processo" */
  --cor-hover-item: #fcf9f2;     /* hover de item do sumário */
  --cor-desativado: #faf7f0;     /* nav prev/próx desabilitado */
  --cor-limpar-bg: #efeae0;      /* botão × da busca */

  /* --- Fios / bordas (família marfim) --- */
  --cor-fio: #e7e2d8;            /* regra da toolbar / borda "dados" */
  --cor-fio-card: #ece7dd;       /* borda dos cartões de edição */
  --cor-fio-suave: #ebe6db;      /* bordas de cartões/regra de seção */
  --cor-fio-tenue: #f0ebe0;      /* divisores internos / trilhos de barra */
  --cor-fio-tema: #ebe4d5;       /* faixa de tema / conector de passo */
  --cor-fio-item: #eee9df;       /* topo de item do sumário */

  /* --- Superfícies escuras (usadas mesmo no tema claro) --- */
  --cor-navy-ementa: #1c2030;    /* faixa e box "Resultado" da ementa */
  --cor-navy-texto: #f4f2ec;     /* texto claro sobre navy */
  --cor-navy-texto-suave: #eeebe2;
  --cor-navy-label: #8e93a6;     /* label mono sobre navy */
  --cor-navy-desativado: #565b70;
  --cor-latao-resultado: #d8b98c;/* label/ícone do "Resultado" (latão sobre navy) */

  /* --- Ênfase --- */
  --cor-bordo: #8a2f3b;          /* realce / seleção */

  /* --- Paleta legada navy/latão/marfim ---
   * Mantida porque o INFOGRÁFICO (views/infografico.js — visão padrão do
   * julgado, fora do escopo da Variante A) e utilitários (skip-link, estado)
   * ainda a consomem. A home/sumário/ementa NÃO usam mais estes tokens. */
  --cor-navy: #11203a;
  --cor-navy-escuro: #0b1628;
  --cor-latao: #b08544;
  --cor-latao-texto: #856024;
  --cor-marfim: #faf6ec;
  --cor-marfim-fundo: #f4eee1;
  --fio-latao: 1px solid var(--cor-latao);

  /* Superfícies claras do INFOGRÁFICO (visão do julgado). Antes eram bege
   * (--cor-marfim*); agora brancas/neutras a pedido: a "folha" fica branca e as
   * faixas secundárias (tema/tags/rodapé) recebem um cinza-neutro sutil só para
   * separar as zonas — sem bege. NÃO redefinir --cor-marfim: ele continua sendo
   * TEXTO claro sobre navy/bordô no mesmo infográfico. */
  --info-folha: var(--cor-branco);
  --info-superficie: #f4f4f6;

  /* --- Acento por edição (rotação de 6 cores — EDPAL) ---
   * Cada edição recebe um acento determinístico pelo índice (ver
   * util/format.js `acentoDaEdicao`). Três papéis por cor:
   *   --*-fg   : cor forte (nº, lombada, botão, chip) — sobre BRANCO
   *   --*-deep : versão escurecida (hover de botão)
   *   --*-tint : fundo tingido do cartão (quase branco, matiz sutil)
   * Contraste do fg sobre #fff (WCAG 2.1) anotado; todos ≥ 4.5:1, e o botão
   * (fg + texto #fff) também ≥ 4.5:1. */
  --ed-bordo-fg: #8a2f3b;   --ed-bordo-deep: #6e2430;   --ed-bordo-tint: #fbeff0; /* 8.23:1 */
  --ed-azul-fg: #2b5c8a;    --ed-azul-deep: #204768;    --ed-azul-tint: #ecf3f9;  /* 7.00:1 */
  --ed-verde-fg: #2f6b54;   --ed-verde-deep: #234f3f;   --ed-verde-tint: #eaf4ee; /* 6.26:1 */
  --ed-ambar-fg: #8a5a1e;   --ed-ambar-deep: #6b4416;   --ed-ambar-tint: #f8f1e4; /* 5.90:1 */
  --ed-roxo-fg: #5b3a78;    --ed-roxo-deep: #452c5c;    --ed-roxo-tint: #f2ecf8;  /* 9.05:1 */
  --ed-teal-fg: #1f6b6b;    --ed-teal-deep: #164f4f;    --ed-teal-tint: #e7f3f2;  /* 6.22:1 */

  /* --- Papéis semânticos --- */
  --fundo: var(--cor-branco);
  --superficie: var(--cor-branco);
  --texto: var(--cor-tinta);
  --texto-suave: var(--cor-suave);
  --acento: var(--cor-bordo);        /* acento global (fallback quando não há acento de edição) */
  --acento-texto: var(--cor-bordo);
  --acento-forte: var(--cor-titulo);
  --realce: var(--cor-bordo);
  --link: var(--cor-bordo);
  --link-hover: var(--cor-bordo);
  --foco: var(--cor-bordo);
  --fio-cor: var(--cor-fio);

  /* --- Tipografia --- */
  --fonte-titulo: 'Libre Franklin', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fonte-corpo: 'Libre Franklin', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fonte-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --escala-base: 1rem;            /* 16px */
  --escala-pequena: 0.875rem;
  --escala-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);   /* hero 52px */
  --escala-h2: clamp(1.3rem, 1.05rem + 1vw, 1.6rem);
  --escala-h3: 1.25rem;
  /* Manchete da tese (ementa): sans grande com fio de acento à esquerda. */
  --escala-manchete: clamp(1.4rem, 1.1rem + 1.5vw, 1.65rem);  /* ~26px */
  --fio-manchete: 3px solid var(--capa-acento, var(--acento));

  --altura-linha: 1.6;
  --altura-linha-titulo: 1.05;

  /* --- Fios / bordas --- */
  --fio: 1px solid var(--cor-fio);
  --fio-forte: 2px solid var(--cor-titulo);
  --raio: 11px;
  --raio-card: 18px;
  --raio-pilula: 999px;

  /* --- Sombras --- */
  --sombra-card: 0 10px 30px -20px rgba(30, 25, 15, 0.3);
  --sombra-card-hover: 0 12px 28px -18px rgba(30, 25, 15, 0.4);
  --sombra-pilula: 0 6px 22px -12px rgba(30, 25, 15, 0.35);

  /* --- Espaçamento --- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;

  --largura-maxima: 48rem;

  /* --- Movimento --- */
  --transicao: 160ms ease;
}