/* ============================================================
   Componente: número em braille animado (.braille-numero)

   Ocupa os doze painéis da página Visão Geral (.rec-secao__figura), um por
   recomendação: o número dela escrito em braille — sinal de número e os dois
   dígitos — sobre uma grade de pontos parados.

   Geometria e movimento em assets/js/components/braille-numero.js. Aqui só
   cor e enquadramento. Sem JS os dois grupos ficam vazios e o painel mostra
   o campo de cor sozinho: nada quebra e nada de informativo se perde (o
   número está no botão ao lado, em texto).

   Cores de marca por padrão, adaptadas nos temas e modos de cor do painel de
   preferências — sempre reaproveitando pares já verificados em tokens.css,
   como faz o blob do hero (components/braille-blob.css).
   ============================================================ */

.braille-numero {
  display: block;
  inline-size: 100%;
  block-size: 100%;

  /* Campo claro (decisão de 30/08/2026): o painel era um bloco de Azul Médio
     que puxava a página inteira para si, ao lado de doze botões de texto. Em
     Fundo Ultra Claro ele vira um campo, não um cartaz — e o número em
     braille passa a ser desenhado em tinta escura sobre claro, que é a
     direção de contraste que Arditi recomenda (CLAUDE.md §6). */
  --bn-fundo: var(--rare-fundo-ultra-claro);
  --bn-pontos: var(--rare-azul-medio); /* 5,9:1 sobre o campo */
  --bn-blob: var(--rare-azul-escuro); /* 14,6:1 — o número pesa mais que a grade */

  background: var(--bn-fundo);
}

.bn-pontos { fill: var(--bn-pontos); }
.bn-blob { fill: var(--bn-blob); }

/* Tema escuro (automático do sistema ou escolhido no painel). O campo claro
   inverte para Azul Escuro, e a hierarquia de tinta inverte com ele: a grade
   fica no tom médio-claro e o número, no mais claro dos dois — a mesma
   relação do tema claro, de cabeça para baixo. O campo é aprofundado (55%
   preto), como nos banners Bauhaus, porque em Azul Escuro puro ele seria a
   MESMA cor da superfície da página e o painel deixaria de se ler como bloco. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .braille-numero {
    --bn-fundo: color-mix(in srgb, var(--rare-azul-escuro) 55%, black);
    --bn-pontos: var(--rare-azul-claro);
    --bn-blob: var(--rare-branco);
  }
}

:root[data-tema="escuro"] .braille-numero {
  --bn-fundo: color-mix(in srgb, var(--rare-azul-escuro) 55%, black);
  --bn-pontos: var(--rare-azul-claro);
  --bn-blob: var(--rare-branco);
}

/* Modos de cor (painel de preferências). Como nos banners Bauhaus, o campo é
   sempre o oposto da superfície da página — senão o painel some dentro dela,
   que era o que acontecia nos dois modos com amarelo. */
:root[data-modo-cor="alto-contraste"] .braille-numero {
  --bn-fundo: #000000;
  --bn-pontos: #999999; /* grade: 7,3:1 sobre preto, sem competir com o número */
  --bn-blob: #ffffff;
}

/* Superfície preta → campo amarelo, tinta preta. */
:root[data-modo-cor="amarelo-preto"] .braille-numero {
  --bn-fundo: #ffe94e;
  --bn-pontos: #6b6320; /* 4,6:1 sobre o amarelo */
  --bn-blob: #000000;
}

/* Superfície amarela → campo preto, tinta amarela. */
:root[data-modo-cor="preto-amarelo"] .braille-numero {
  --bn-fundo: #000000;
  --bn-pontos: #8a7d1e; /* 5,2:1 sobre o preto */
  --bn-blob: #ffe94e;
}