/* ===== BASE COMUM DAS TRÊS VERSÕES (refazer/fontes/kaien/variantes/comum/base.css) =====================
   O variantes.py junta este arquivo com o versao.css de cada versão. Só usa a paleta crua (--c-* clara, --e-*
   escura, --p-* dos painéis) que cada versão define; nenhuma cor escrita aqui.
   Depois da crítica de 17/10 (CRITICA.md, BRIEFING-HUMANO.md) a base faz três coisas e mais nada:
   1. o claro é o padrão da versão, venha o sistema como vier; o escuro acompanha pelo botão;
   2. a fonte de display da versão entra em tudo que o principal põe em --titulo, num peso só;
   3. os links entre as prévias ficam dentro do aviso, na mesma letra, sem rótulo.
   Nada desenhado, nada animado: o principal já é "o original, bem feito" e as versões herdam isso. */

:root[data-versao]:not([data-tema="escuro"]) {
  --fundo: var(--c-fundo); --fundo-2: var(--c-fundo-2); --fundo-3: var(--c-fundo-3); --linha: var(--c-linha);
  --texto: var(--c-texto); --suave: var(--c-suave); --corpo: var(--c-corpo); --acento: var(--c-acento); --foco: var(--c-acento);
  --botao-fundo: var(--c-botao-fundo); --botao-texto: var(--c-botao-texto);
  color-scheme: light;
}
:root[data-versao][data-tema="escuro"] {
  --fundo: var(--e-fundo); --fundo-2: var(--e-fundo-2); --fundo-3: var(--e-fundo-3); --linha: var(--e-linha);
  --texto: var(--e-texto); --suave: var(--e-suave); --corpo: var(--e-corpo); --acento: var(--e-acento); --foco: var(--e-acento);
  --botao-fundo: var(--e-botao-fundo); --botao-texto: var(--e-botao-texto);
  color-scheme: dark;
}
/* os painéis fixos (escuro e ardósia) seguem a paleta da versão nos dois temas; o principal lê --p-* */
:root[data-versao] .painel-escuro { --linha: var(--p-escuro-linha); --corpo: var(--p-escuro-suave);
  --botao-fundo: var(--p-escuro-texto); --botao-texto: var(--p-escuro); --foco: var(--p-escuro-texto); }
:root[data-versao] .painel-ardosia { --linha: var(--p-ardosia-linha); --corpo: var(--p-ardosia-suave);
  --botao-fundo: var(--p-ardosia-texto); --botao-texto: var(--p-ardosia); --foco: var(--p-ardosia-texto); }

/* a display da versão em tudo que o principal põe em --titulo, num peso só */
:root[data-versao] { --titulo: var(--display); }
:root[data-versao] :is(h1, h2, h3) { font-weight: var(--display-peso); letter-spacing: var(--display-tracking); font-variation-settings: var(--display-eixos, normal); }
:root[data-versao] .heroi-titulo { font-size: var(--heroi-tamanho); line-height: var(--heroi-entrelinha); }

/* a linha das prévias, dentro do aviso: só links, mesma letra do aviso */
.versoes { display: inline; }
.versoes a { margin-left: .9em; color: var(--texto); text-decoration: none; }
.versoes a:hover, .versoes a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.versoes a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.versoes a:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
@media (max-width: 700px) { .versoes a { margin-left: .6em; } }

/* ===== MARFIM: uma fonte e papel ==========================================================================
   Fraunces em romano, um peso, em todo título; Geist no corpo. Papel marfim e tinta sépia; o painel escuro
   é sépia noturno e o painel "ardósia" vira um castanho de capa de livro. Nenhum ornamento, a foto como ela é.
   A decisão estrutural: uma coluna de leitura de 960 px, como uma revista, com a foto do herói e o gráfico
   saindo da coluna até as bordas do painel, e "quem somos" em coluna única (gráfico em cima, texto abaixo).
   Escuro de acompanhamento: sépia noturno. Cada par texto/fundo passa AA (teste). */
@font-face { font-family: "Fraunces"; src: url("fontes/fraunces-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }

:root[data-versao="marfim"] {
  --c-fundo: #f5efe3; --c-fundo-2: #fbf8f1; --c-fundo-3: #ebe2d1; --c-linha: #d5c8b0;
  --c-texto: #231a12; --c-suave: #6b5a48; --c-corpo: #3b2f24; --c-acento: #a8401f; --c-botao-fundo: #231a12; --c-botao-texto: #f5efe3;
  --e-fundo: #14110d; --e-fundo-2: #1a1612; --e-fundo-3: #2b251e; --e-linha: #4e4438;
  --e-texto: #f3ebdd; --e-suave: #b8a990; --e-corpo: #d8ccb8; --e-acento: #e08a64; --e-botao-fundo: #f3ebdd; --e-botao-texto: #14110d;
  --p-escuro: #1a1612; --p-escuro-2: #3a3229; --p-escuro-texto: #f3ebdd; --p-escuro-suave: #b8a990; --p-escuro-linha: #4e4438;
  --p-ardosia: #5d4a3a; --p-ardosia-2: #6e5a48; --p-ardosia-texto: #fbf8f1; --p-ardosia-suave: #eadfcf; --p-ardosia-linha: #8a7560;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif; --display-peso: 400; --display-tracking: -0.02em;
  --display-eixos: "opsz" 120;
  --heroi-tamanho: clamp(2.5rem, 7.2vw, 4.5rem); --heroi-entrelinha: 1;
}
:root[data-versao="marfim"] h2, :root[data-versao="marfim"] h3 { font-variation-settings: "opsz" 48; }
:root[data-versao="marfim"] :is(.num, .servicos-lista-titulo, .modulos-lista b) { font-weight: var(--display-peso); }

/* a coluna de leitura: vale para o conteúdo e o rodapé; o topo continua na largura cheia */
:root[data-versao="marfim"] :is(main, .rodape) { --largura: 960px; }
:root[data-versao="marfim"] .heroi-titulo { max-width: 13ch; }
/* a foto do herói e o gráfico saem da coluna até as bordas do painel */
:root[data-versao="marfim"] .heroi-foto { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); border-radius: 0; aspect-ratio: 16 / 7; }
:root[data-versao="marfim"] .quem-grade { grid-template-columns: minmax(0, 1fr); gap: 56px; }
:root[data-versao="marfim"] .barras { justify-content: start; }