/*
 * Tokens de design da interface — espelho de `js/design/tokens.js`.
 * Nenhum valor visual (cor, espaço, tamanho, raio, sombra, duração) pode ser
 * escrito solto em outro arquivo CSS. Faltou token? Acrescente aqui primeiro.
 *
 * Linguagem visual: tipografia do sistema Apple (SF Pro na interface, New York
 * no corpo do documento), superfícies neutras, uma única hairline como
 * separador, sombra quase inexistente e movimento curto. O que dá hierarquia
 * aqui é espaço e peso de fonte — não caixa, borda nem sombra.
 */

:root {
  color-scheme: light dark;

  /* ---- Superfícies e tinta ---- */
  --tinta: #1d1d1f; /* preto de texto da Apple, não #000 */
  /* Os dois cinzas de apoio são medidos, não escolhidos a olho: cada um passa
   * de 4.5:1 sobre os TRÊS fundos claros (--papel, --fundo, --fundo-realce).
   * O #86868b da Apple ficava em 3.18:1 sobre o fundo de realce — e é justo
   * ali que mora a etiqueta "só renumeração", que diz se uma alteração é
   * cosmética. A hierarquia entre eles vem de tamanho e peso, não de apagar
   * o mais fraco até ninguém conseguir ler. */
  --tinta-suave: #5f5f66;
  --tinta-fraca: #6b6b70;
  --linha: rgba(0, 0, 0, 0.09); /* hairline: separador, nunca borda pesada */
  --linha-forte: rgba(0, 0, 0, 0.16);
  --papel: #ffffff;
  --fundo: #f5f5f7; /* cinza de fundo da Apple */
  --fundo-realce: #f0f0f2;
  --vidro: rgba(255, 255, 255, 0.72); /* cabeçalho translúcido */
  --acento: #0071e3; /* azul de ação da Apple */
  --acento-forte: #0077ed;
  --acento-tinta: #ffffff;
  /* Fundo do botão primário. Separado de --acento porque no tema escuro o azul
   * de sistema (#0a84ff) só chega a 3.65:1 com texto branco — legível como
   * link sobre fundo escuro, insuficiente como superfície de botão. */
  --acento-superficie: #0071e3;
  --acento-superficie-forte: #0077ed;
  /* Acento LEGÍVEL sobre `--fundo-realce`.
     O `--acento` foi medido para o papel branco, onde dá 4,70:1. Sobre o cinza
     de realce ele cai para 4,13:1 — abaixo do mínimo AA — e foi exatamente ali
     que ele foi parar: no botão "Desfazer" da barra de lote, que é a rede de
     segurança de uma ação que toca dezenas de pontos e precisa ser o elemento
     MAIS legível da barra, não o menos. Medido: 4,86:1 sobre o realce e 5,54:1
     sobre o papel. Quem escrever sobre uma superfície de realce usa este. */
  --acento-sobre-realce: #0064d6;

  /* ---- As marcações do produto ----
   * Azul inclui, vermelho retira, verde muda de lugar, cinza reescreve.
   * A cor nunca é o único sinal: adição vem sublinhada e supressão riscada,
   * para quem não distingue vermelho de verde. */
  --adicao-tinta: #0062d1;
  --adicao-fundo: #e8f0fd;
  --adicao-borda: #a8c7f5;

  --supressao-tinta: #c9252d;
  --supressao-fundo: #fdeaea;
  --supressao-borda: #f2adad;

  --movimentacao-tinta: #157a3c;
  --movimentacao-fundo: #e6f4ea;
  --movimentacao-borda: #a3d5b5;

  --mudanca-tinta: #5c5c62;
  --mudanca-fundo: #f0f0f2;
  --mudanca-borda: #d2d2d7;

  /* Formatação: mesmo texto, apresentação alterada. Roxo porque os outros
     quatro papéis já estão tomados e este precisa se distinguir deles. */
  --formatacao-tinta: #6b4d96;
  --formatacao-fundo: #f1ebf9;
  --formatacao-borda: #cdb8e6;

  /* ---- Espaçamento (base 4) ---- */
  --e-xs: 4px;
  --e-sm: 8px;
  --e-md: 12px;
  --e-lg: 20px;
  --e-xl: 32px;
  --e-xxl: 56px;

  /* ---- Painéis flutuantes ----
   * Cada painel tem a largura que o conteúdo dele pede, mas nenhum pode passar
   * da tela: numa de 390px um painel de 360px ficava metade fora — e a metade
   * invisível continuava respondendo a toque. */
  --painel-ajustes: 300px;
  --painel-exportacao: 320px;
  --painel-exemplos: 360px;
  --painel-ajuda: 380px;
  --painel-recuo: var(--e-lg); /* respiro mínimo entre o painel e a borda */
  --painel-altura-maxima: 72vh;
  /* A paleta de comandos. Ela não é um popover pendurado num botão: é um
     diálogo centrado sobre a página, e por isso tem largura e altura próprias.
     O recuo do topo é o de um Spotlight — alto o bastante para a lista crescer
     para baixo sem passar da tela. */
  --paleta-largura: 560px;
  --paleta-topo: 12vh;
  --paleta-lista-altura: 46vh;
  /* O escurecido por trás de um diálogo modal. Único no app, e de propósito
     leve: ele separa camadas, não apaga o conteúdo — quem abre a paleta está
     olhando para a comparação e vai voltar a ela. */
  --sombreado: rgba(0, 0, 0, 0.28);

  /* ---- Tipografia ---- */
  --fonte-interface: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
    system-ui, 'Helvetica Neue', sans-serif;
  --fonte-documento: 'New York', ui-serif, Georgia, 'Times New Roman', serif;
  --fonte-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Consolas, monospace;

  --t-etiqueta: 11px;
  --t-apoio: 13px;
  --t-corpo: 15px;
  --t-documento: 15px;
  --t-titulo: 19px;
  --t-destaque: 34px;

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600; /* a Apple raramente passa de 600 */

  /* Título grande pede entrelinha curta e letra apertada; texto corrido, o oposto. */
  --letra-destaque: -0.022em;
  --letra-titulo: -0.014em;
  --letra-etiqueta: 0.06em;
  --entrelinha-documento: 1.62;
  --entrelinha-interface: 1.45;
  --entrelinha-destaque: 1.08;

  /* Trilho entre os botões de uma tira de abas — e o respiro do trilho até a
     borda dela. Nasceu solto no CSS, e virou token quando a tira miúda passou
     a quebrar em duas linhas: a largura de cada aba é calculada a partir dele. */
  --trilho-abas: 2px;

  /* Vão entre um título e a linha que o explica logo abaixo — mais apertado
     que `--e-xs`, porque as duas linhas são uma coisa só. */
  --vao-linha-dupla: 2px;
  /* Lado do quadradinho que vira a seta de um `<details>`. */
  --seta-revelador: 6px;
  /* Alvo mínimo de dedo. 44px é o piso da Apple, e vale para todo controle que
     se toca: botão-ícone, gatilho de revelador, troca de arquivo no chip. */
  --alvo-toque: 44px;
  /* O traço do minimapa da aba Documento, e o vão dele até a borda da faixa.
     O agrupado é mais alto porque carrega mais de uma alteração. */
  --fio-faixa: 3px;
  --fio-faixa-grupo: 5px;
  --fio-faixa-vao: 2px;
  /* Altura da barra de navegação da revisão, fixa no rodapé do celular: é o
     que a lista precisa reservar embaixo para o último item não ficar por
     baixo dela. Alvo de toque mais o respiro que a barra tem em volta. */
  --barra-revisao: calc(var(--alvo-toque) + 2 * var(--e-xs));
  /* Quanto da borda de uma tira deslizante se dissolve, para dizer que há mais
     conteúdo daquele lado. */
  --desvanecer-tira: 24px;
  /* Largura da régua de marcas encostada na área de rolagem — a mesma da faixa
     central da aba Documento, para os dois mapas se lerem como um só. */
  --largura-regua: 18px;
  /* Espessura do traço de um ícone desenhado em CSS — a seta do revelador, o
     fio sob a palavra marcada. Mais grosso que a hairline de separação, porque
     aqui o traço É o desenho, e não uma divisória. */
  --traco-icone: 1.5px;
  /* O material do cabeçalho e da barra do par: vidro sobre o conteúdo que rola.
     Nasceu solto em `.cabecalho`, e virou token quando a barra do par passou a
     usar o MESMO material — dois lugares com o mesmo valor escrito à mão são
     dois lugares que divergem na primeira alteração. */
  --vidro-desfoque: saturate(180%) blur(20px);

  /* ---- Forma ---- */
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 18px;
  --raio-pilula: 980px; /* botão-cápsula da Apple */

  /* ---- Profundidade: um nível só, e quase invisível ---- */
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 32px -20px rgba(0, 0, 0, 0.18);

  /* ---- Movimento: curto, e com a curva de saída da Apple ----
   * Resposta a um toque nunca passa de 200ms: acima disso a interface parece
   * lenta em vez de suave. O tempo maior fica só para o que entra na tela. */
  --rapido: 140ms;
  --padrao: 200ms;
  --entrada: 240ms;
  --suave: cubic-bezier(0.28, 0.11, 0.32, 1);

  /* ---- Camadas: escala fixa, para não haver z-index inventado ---- */
  --camada-cabecalho: 20;
  /* A barra do par gruda abaixo do cabeçalho: passa por cima do conteúdo que
     rola, e por baixo do cabeçalho e dos painéis flutuantes. */
  --camada-barra-par: 15;
  --camada-flutuante: 30;

  /* Altura do cabeçalho grudado, para quem precisa sentar logo abaixo dele.
     Medida de estrutura, e não decisão de estilo: é a soma do respiro e da
     linha de texto que o cabeçalho já tem. */
  --altura-cabecalho: 60px;
  /* A borda de rolagem: um fio que se dissolve, no lugar de uma régua dura. */
  --fio-rolagem: 3px;

  /* ---- O documento .docx desenhado com a diagramação dele ----
   * A fonte pedida pelo arquivo (`w:rFonts`) vai inline, porque é conteúdo do
   * documento e não escolha nossa. Estas três são só a rede embaixo: quando a
   * máquina não tem "Cambria" nem "Calibri", o parágrafo cai numa fonte da
   * mesma família em vez de na fonte da interface — que faria o contrato
   * parecer um formulário do app. */
  --docx-fonte-serif: 'New York', ui-serif, Georgia, 'Times New Roman', serif;
  --docx-fonte-sem: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --docx-fonte-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Consolas, monospace;

  /* Vão mínimo entre blocos: o respiro que o próprio documento pede vem do
     `w:spacing` e é somado a este, não substituído por ele. */
  --docx-vao-blocos: 2px;
  --docx-recuo-lista: var(--e-lg);
  /* Altura presumida de um bloco ainda não desenhado. Existe por causa do
     `content-visibility: auto`: sem ela, a barra de rolagem de um contrato de
     quarenta páginas pula a cada bloco que entra na tela. */
  --docx-altura-estimada: 96px;
  --docx-tabela-linha: 1px solid var(--docx-linha);

  /*
   * O papel e a tinta do documento desenhado NÃO viram com o tema do app.
   *
   * A folha é conteúdo, não cromo — é o equivalente à página que o pdf.js
   * rasteriza, e aquela sai branca em qualquer tema porque é o papel do
   * arquivo. Aqui a diferença é que a cor do texto vem de `w:color`, inline,
   * do próprio documento: quase todo `.docx` exportado do Google Docs ou do
   * LibreOffice traz `w:color w:val="000000"` em cada trecho.
   *
   * Amarrar a folha a `--papel` fazia esse preto cair sobre `#1c1c1e` no tema
   * escuro — razão de contraste **1,23:1**, ou seja, o contrato inteiro
   * invisível. E o inverso, `w:color="FFFFFF"` no tema claro, dava 1,00:1.
   * Pior ainda: no mesmo tema escuro o PDF saía branco e legível e o `.docx`
   * saía preto no preto, lado a lado, sem explicação nenhuma.
   */
  --docx-papel: #ffffff;
  --docx-tinta: #1d1d1f;
  --docx-linha: rgba(0, 0, 0, 0.12);
  --docx-tinta-fraca: #6b6b70;
  /* A faixa de cabeçalho, rodapé, nota e comentário. Está na família `--docx-`
     pelo MESMO motivo do papel, e não por arrumação: ela também tem por cima
     texto cuja cor vem inline do arquivo. Usar `--fundo-realce` a fazia virar
     #2c2c2e no tema escuro, com o `w:color="000000"` do cabeçalho por cima —
     preto sobre quase-preto, timbre invisível. O teste de contraste do
     navegador mede a faixa contra um `<span>` de dentro dela justamente para
     que ninguém troque isto de volta por um token de tema. */
  --docx-fundo-regiao: #f2f2f4;
  --docx-borda-regiao: rgba(0, 0, 0, 0.16);
  --docx-fio-regiao: 2px;

  /* O parágrafo que mudou de LUGAR: filete na margem e uma lavagem levíssima.
     Levíssima porque as palavras reescritas dentro dele continuam com o
     vermelho e o azul por cima — a lavagem diz que o bloco andou, e não pode
     competir com o que diz o que mudou. Verde congelado do tema claro, como
     `--docx-papel` e pelo mesmo motivo: a folha não vira com o tema. */
  --docx-movido-tinta: #157a3c;
  --docx-movido-fundo: rgba(21, 122, 60, 0.055);
  --docx-movido-fundo-ativo: rgba(21, 122, 60, 0.14);
  /* Respiro entre o filete e a primeira letra, somado ao recuo do arquivo. */
  --docx-movido-vao: 8px;
  /* Realce de palavra: menor que `--raio-sm`, que é raio de superfície. */
  --docx-raio-marca: 2px;
  --docx-traco-marca: 1px;
  --docx-recuo-sublinhado: 2px;

  /* Opacidade do fundo de uma marcação sobre o documento. Ela precisa deixar
     ler a palavra por baixo — é a palavra que está em discussão. O valor era
     calculado em JS na visão do PDF; agora nasce aqui, e os dois usam o mesmo. */
  --marca-fluxo-alfa: 0.18;

  /* Largura do filete de uma marcação de BLOCO — o parágrafo que mudou de
     lugar. Só filete: bloco com preenchimento somaria alfa por baixo dos
     retângulos de palavra do mesmo parágrafo. */
  --marca-bloco-fio: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #f5f5f7;
    --tinta-suave: #a1a1a6;
    --tinta-fraca: #86868b;
    --linha: rgba(255, 255, 255, 0.12);
    --linha-forte: rgba(255, 255, 255, 0.2);
    --papel: #1c1c1e;
    --fundo: #000000;
    --fundo-realce: #2c2c2e;
    --vidro: rgba(28, 28, 30, 0.72);
    --acento: #0a84ff;
    --acento-forte: #409cff;
    --acento-superficie: #0b6fd4; /* 4.95:1 com branco */
    --acento-superficie-forte: #1a7ee0;
    /* A mesma medida do outro lado: o #0a84ff dá 3,82:1 sobre o realce
       escuro; este dá 4,92:1. */
    --acento-sobre-realce: #409cff;

    --adicao-tinta: #6cb2ff;
    --adicao-fundo: rgba(10, 132, 255, 0.16);
    --adicao-borda: rgba(10, 132, 255, 0.42);

    --supressao-tinta: #ff7b72;
    --supressao-fundo: rgba(255, 69, 58, 0.16);
    --supressao-borda: rgba(255, 69, 58, 0.42);

    --movimentacao-tinta: #55d98d;
    --movimentacao-fundo: rgba(48, 209, 88, 0.16);
    --movimentacao-borda: rgba(48, 209, 88, 0.42);

    --mudanca-tinta: #a1a1a6;
    --mudanca-fundo: rgba(255, 255, 255, 0.08);
    --mudanca-borda: rgba(255, 255, 255, 0.18);

    --formatacao-tinta: #c4a6ee;
    --formatacao-fundo: rgba(157, 118, 214, 0.18);
    --formatacao-borda: rgba(157, 118, 214, 0.45);

    --sombra: 0 1px 3px rgba(0, 0, 0, 0.5), 0 12px 32px -20px rgba(0, 0, 0, 0.8);
    /* No escuro o mesmo alfa some contra o fundo preto: o escurecido precisa
       ser mais denso para continuar separando as duas camadas. */
    --sombreado: rgba(0, 0, 0, 0.6);
  }
}

/*
 * A escolha explícita vence a do sistema, nos dois sentidos: quem revisa
 * contrato às vezes quer o tema claro num quarto escuro, e vice-versa.
 * O atributo é gravado em `data-tema` na raiz do documento.
 */
:root[data-tema='escuro'] {
    --tinta: #f5f5f7;
    --tinta-suave: #a1a1a6;
    --tinta-fraca: #86868b;
    --linha: rgba(255, 255, 255, 0.12);
    --linha-forte: rgba(255, 255, 255, 0.2);
    --papel: #1c1c1e;
    --fundo: #000000;
    --fundo-realce: #2c2c2e;
    --vidro: rgba(28, 28, 30, 0.72);
    --acento: #0a84ff;
    --acento-forte: #409cff;
    --acento-superficie: #0b6fd4; /* 4.95:1 com branco */
    --acento-superficie-forte: #1a7ee0;
    --acento-sobre-realce: #409cff;

    --adicao-tinta: #6cb2ff;
    --adicao-fundo: rgba(10, 132, 255, 0.16);
    --adicao-borda: rgba(10, 132, 255, 0.42);

    --supressao-tinta: #ff7b72;
    --supressao-fundo: rgba(255, 69, 58, 0.16);
    --supressao-borda: rgba(255, 69, 58, 0.42);

    --movimentacao-tinta: #55d98d;
    --movimentacao-fundo: rgba(48, 209, 88, 0.16);
    --movimentacao-borda: rgba(48, 209, 88, 0.42);

    --mudanca-tinta: #a1a1a6;
    --mudanca-fundo: rgba(255, 255, 255, 0.08);
    --mudanca-borda: rgba(255, 255, 255, 0.18);

    --formatacao-tinta: #c4a6ee;
    --formatacao-fundo: rgba(157, 118, 214, 0.18);
    --formatacao-borda: rgba(157, 118, 214, 0.45);

    --sombra: 0 1px 3px rgba(0, 0, 0, 0.5), 0 12px 32px -20px rgba(0, 0, 0, 0.8);
    --sombreado: rgba(0, 0, 0, 0.6);
  }

:root[data-tema='claro'] {
  --tinta: #1d1d1f;
  --tinta-suave: #5f5f66;
  --tinta-fraca: #6b6b70;
  --linha: rgba(0, 0, 0, 0.09);
  --linha-forte: rgba(0, 0, 0, 0.16);
  --papel: #ffffff;
  --fundo: #f5f5f7;
  --fundo-realce: #f0f0f2;
  --vidro: rgba(255, 255, 255, 0.72);
  --acento: #0071e3;
  --acento-forte: #0077ed;
  --acento-superficie: #0071e3;
  --acento-superficie-forte: #0077ed;
  --acento-sobre-realce: #0064d6;

  --adicao-tinta: #0062d1;
  --adicao-fundo: #e8f0fd;
  --adicao-borda: #a8c7f5;

  --supressao-tinta: #c9252d;
  --supressao-fundo: #fdeaea;
  --supressao-borda: #f2adad;

  --movimentacao-tinta: #157a3c;
  --movimentacao-fundo: #e6f4ea;
  --movimentacao-borda: #a3d5b5;

  --mudanca-tinta: #5c5c62;
  --mudanca-fundo: #f0f0f2;
  --mudanca-borda: #d2d2d7;

  /* Formatação: mesmo texto, apresentação alterada. Roxo porque os outros
     quatro papéis já estão tomados e este precisa se distinguir deles. */
  --formatacao-tinta: #6b4d96;
  --formatacao-fundo: #f1ebf9;
  --formatacao-borda: #cdb8e6;

  --sombra: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 32px -20px rgba(0, 0, 0, 0.18);
  --sombreado: rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rapido: 1ms;
    --padrao: 1ms;
  }
}

/* --------------------------------------------------------------- *
 * Marcações — as classes que dão sentido às cores dentro do texto. *
 *                                                                  *
 * A cor nunca decide sozinha: adição vem sublinhada e supressão     *
 * riscada, porque vermelho e verde são justamente o par que some    *
 * para quem tem daltonismo.                                         *
 * --------------------------------------------------------------- */

.marca-adicao,
.marca-supressao,
.marca-movimentacao {
  border-radius: var(--raio-sm);
  padding: 0.05em 0.12em;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.marca-adicao {
  color: var(--adicao-tinta);
  background: var(--adicao-fundo);
  text-decoration: underline;
}

.marca-supressao {
  color: var(--supressao-tinta);
  background: var(--supressao-fundo);
  text-decoration: line-through;
}

.marca-movimentacao {
  color: var(--movimentacao-tinta);
  background: var(--movimentacao-fundo);
}

/* Supressão colada em adição vira "3060": o respiro é relativo à fonte. */
.marca-supressao + .marca-adicao,
.marca-adicao + .marca-supressao {
  margin-left: 0.2em;
}