/* Quatro cores institucionais. Proporção de peça: 60 Cimento / 30 Aço / 10 Saque.
   Carbono é tinta e não entra na cota. */
:root {
  --bo-cimento: #F1F0EC;
  --bo-carbono: #16171A;
  --bo-aco: #7C8791;
  --bo-saque: #FF3B2F;

  /* derivados — não são cores de marca, são tons de trabalho */
  --bo-carbono-fundo: #0E0F11;
  --bo-carbono-regua: #2B2D31;
  --bo-carbono-painel: #1D1F23;
  --bo-cinza-texto: #4A4F55;
  --bo-cinza-apoio: #5A5F66;
  --bo-cinza-claro: #B9BEC4;
  --bo-aco-escuro: #2E3338;

  /* semânticos · base clara é o padrão do sistema */
  --bo-bg: var(--bo-cimento);
  --bo-texto: var(--bo-carbono);
  --bo-texto-2: var(--bo-cinza-texto);
  --bo-texto-3: var(--bo-cinza-apoio);
  --bo-regua: rgba(22, 23, 26, 0.16);
  --bo-painel: rgba(124, 135, 145, 0.14);
  --bo-palco: rgba(124, 135, 145, 0.14);
  --bo-guia: rgba(22, 23, 26, 0.3);
  --bo-guia-fraca: rgba(22, 23, 26, 0.12);
  --bo-acento: var(--bo-saque);
  --bo-sobre-acento: var(--bo-carbono);
  --bo-sobreposicao: rgba(22, 23, 26, 0.8);
}

/* Faixa de Aço: é a única superfície que não segue o tema — a cor é institucional
   e vale igual nos dois. Qualquer bloco sobre Aço declara data-tema="claro" para que
   os componentes aninhados herdem tinta Carbono, como manda a tabela de contraste. */

/* versão escura · o site inteiro pode alternar por preferência do usuário
   (prefers-color-scheme como padrão inicial, escolha manual salva por cima).
   Base clara continua o padrão de quem chega sem preferência. Rodapé segue
   sempre escuro e faixa de Aço sempre clara — os data-tema locais não mudam. */
[data-tema="escuro"] {
  --bo-bg: var(--bo-carbono);
  --bo-texto: var(--bo-cimento);
  --bo-texto-2: var(--bo-cinza-claro);
  --bo-texto-3: var(--bo-aco);
  --bo-regua: var(--bo-carbono-regua);
  --bo-painel: var(--bo-carbono-painel);
  --bo-palco: var(--bo-carbono-fundo);
  --bo-guia: #3A3D42;
  --bo-guia-fraca: #26282C;
}

/* base clara declarada explicitamente, para poder voltar a ela dentro do escuro
   (faixa de Aço, bloco de campanha em fundo claro) */
[data-tema="claro"] {
  --bo-bg: var(--bo-cimento);
  --bo-texto: var(--bo-carbono);
  --bo-texto-2: var(--bo-cinza-texto);
  --bo-texto-3: var(--bo-cinza-apoio);
  --bo-regua: rgba(22, 23, 26, 0.16);
  --bo-painel: rgba(124, 135, 145, 0.14);
  --bo-palco: rgba(124, 135, 145, 0.14);
  --bo-guia: rgba(22, 23, 26, 0.3);
  --bo-guia-fraca: rgba(22, 23, 26, 0.12);
}