/* AS SUPERFÍCIES QUE O NAVEGADOR DESENHA POR NÓS.
 *
 * Seleção de texto, cursor de digitação, marcador de lista, sublinhado de
 * link, texto de exemplo em campo, e — o maior deles — caixa de seleção e
 * botão de rádio. Nada disso é desenhado pelo produto, e tudo isso aparece
 * na tela do cliente.
 *
 * POR QUE ISSO IMPORTA AQUI, e não é preciosismo: medido em 22/09/2026,
 * NENHUMA das 18 folhas do app tratava `accent-color`. O resultado é que
 * 76 caixas de seleção e botões de rádio, espalhados por 46 telas de
 * produto, saíam no AZUL DO SISTEMA OPERACIONAL dentro de um produto cuja
 * marca é verde. A pessoa marca "Grade e encaixe" em /vigas/ e vê o azul da
 * Apple; marca outra em /pilares/ e vê o mesmo azul. É a diferença entre uma
 * tela desenhada e uma tela montada, e custa uma linha.
 *
 * AS VARIÁVEIS VÊM COM RESERVA. As telas estáticas declaram `--ep-green` e
 * companhia em ep-cabecalho.css, que só 13 das 104 carregam. Com a reserva,
 * esta folha funciona sozinha em qualquer uma delas.
 *
 * ORDEM DE CARGA: entra logo depois de ep-icones.css, ANTES da folha própria
 * de cada ferramenta. Assim quem quiser divergir num ponto só continua
 * podendo — é piso, não teto. */

:root {
  /* Diz ao navegador que esta é uma interface clara. Sem isto, um dia em que
     alguém marcar `color-scheme: dark` num ancestral, os controles nativos
     inverteriam sozinhos no meio de uma tela branca. */
  color-scheme: light;

  /* O ITEM PRINCIPAL. Vale para checkbox, radio, range, progress e o
     indicador de seleção nativo. Uma declaração na raiz, e herda para tudo. */
  accent-color: var(--ep-green, #07825e);
}

/* A SELEÇÃO DE TEXTO em menta com tinta escura. O azul padrão do navegador é
   a cor de outra empresa, e aparece toda vez que alguém arrasta o cursor
   sobre um número para copiar — o que, num produto de cálculo, é o tempo
   todo. A menta funciona sobre o branco das telas e sobre as faixas
   escuras, porque o texto selecionado passa a ser escuro nas duas. */
::selection {
  background: var(--ep-mint, #65d8b3);
  color: var(--ep-ink, #111b18);
}

/* O CURSOR DE DIGITAÇÃO. É o único elemento da interface que pisca, e num
   formulário de engenharia ele fica na frente do olho o tempo inteiro. */
input,
textarea,
[contenteditable] {
  caret-color: var(--ep-green, #07825e);
}

/* O TEXTO DE EXEMPLO não é texto desabilitado: ele instrui. `opacity: 1`
   porque vários navegadores o entregam a 54%, e aí ele reprova contraste
   sem ninguém ter escolhido isso. */
::placeholder {
  color: var(--ep-muted, #687872);
  opacity: 1;
}

/* O MARCADOR DE LISTA na cor do texto secundário. Preto cheio ao lado de
   texto cinza é o padrão do navegador brigando com a tipografia da página. */
li::marker {
  color: var(--ep-muted, #687872);
}

/* O SUBLINHADO DE LINK afastado do texto e com espessura declarada. O padrão
   corta as descidas de g, p e q — e em português isso acontece em quase toda
   frase. */
a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}