/*
 * tokens.css — a identidade do site, em variáveis.
 *
 * Esta é a tradução de `site/theme.py` para CSS. Os dois arquivos descrevem a
 * MESMA identidade, e é por isso que o site inteiro (página e gráfico) parece
 * uma coisa só.
 *
 * A regra que vale mais que todas as outras: COR É PAPEL, NÃO DECORAÇÃO.
 * Cada token abaixo tem um significado fixo. Trocar o VALOR de um token é
 * decisão de identidade do site. Trocar o PAPEL de um token (usar `--threat`
 * para decoração, digamos) quebra a leitura de quem já viu um gráfico do site.
 *
 * Os nomes dos papéis são os mesmos do núcleo (`ROLES` em lab/charts/), para
 * que um leitor que viu um gráfico leia a página sem legenda.
 */

:root {
  /* -- Tinta --------------------------------------------------------------
   * Tinta quente, não preto puro: este é um site editorial sobre livros, e a
   * superfície deve lembrar página impressa, não painel de banco.
   */
  --ink: #22201d;
  --muted: #6e6862;
  --ink-soft: #a8a29a;

  /* -- Papel --------------------------------------------------------------
   * O fundo é papel. `--surface` é o fundo do site; `--card` é o que precisa
   * flutuar sobre ele.
   */
  --surface: #faf8f4;
  --card: #ffffff;
  --line: #e7e2d9;

  /* -- Ardósia: o mecanismo ----------------------------------------------
   * Conhecimento, estrutura do texto, o dado, o link. É a cor daquilo que o
   * site AFIRMA, e por isso é a cor dos links e do botão de encaminhamento.
   */
  --accent: #3d5a80;
  --accent-strong: #2f4763;
  --accent-bg: #eef2f7;
  --accent-line: #d5dfea;

  /* -- Verde: o desfecho bom ---------------------------------------------
   * "Serve para quem procura isto". O que o leitor quer encontrar.
   */
  --good: #2f7d5b;
  --good-bg: #edf7f2;
  --good-line: #cfe8dd;

  /* -- Âmbar: a ressalva -------------------------------------------------
   * Ocupa o papel que em outros sites é vermelho de alarme. É DELIBERADO: o
   * site não assusta o leitor, ele o informa. Numa resenha, o que importa não
   * é "certo ou errado", é "serve ou não serve para você", e a ressalva é o
   * que dá credibilidade à recomendação.
   *
   * A intensidade fica reservada para o que de fato é uma linha que não se
   * cruza (ver site/compliance/rules.py).
   */
  --threat: #b0651a;
  --threat-bg: #fdf5ea;
  --threat-line: #f2e2c8;

  /* -- Tipografia ---------------------------------------------------------
   * Font stack do sistema, e isso é decisão, não esquecimento: zero
   * dependência, zero requisição externa, zero mudança no tema do WordPress.
   * O site não carrega webfonts (ver o docstring de site/theme.py).
   *
   * Serif para o que é editorial (títulos, texto longo); sans para o que é
   * interface (navegação, rótulos, botões).
   */
  --font-serif: Georgia, 'Times New Roman', Times, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Medida de leitura: perto de 70 caracteres por linha, que é onde o olho
   * cansa menos. Resenha é texto longo. */
  --medida: 68ch;

  /* -- Espaçamento --------------------------------------------------------
   * Uma escala só, para o ritmo vertical não virar improviso.
   */
  --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;
  --esp-8: 4rem;

  --raio: 6px;
  --raio-g: 10px;

  /* -- Sombra -------------------------------------------------------------
   * Uma sombra só, discreta. Papel não flutua muito.
   */
  --sombra: 0 1px 2px rgba(34, 32, 29, 0.04), 0 2px 8px rgba(34, 32, 29, 0.04);

  /* -- Alvo de toque ------------------------------------------------------
   * 44px é o mínimo confortável para o dedo. Mobile first significa começar
   * por aqui, não encolher depois.
   */
  --toque: 44px;
}