/* ===== 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; } }

/* ===== GRAFITE E OURO: Bodoni e champanhe ================================================================
   Bodoni Moda em romano em todo título, grafite sobre champanhe, respiro grande. Nenhum filete, arco, losango,
   borda tripla ou sombra: "ouro" é o nome da paleta (champanhe, grafite, e um painel "ardósia" em taupe), não um
   desenho. A decisão estrutural: composição centrada, cantos retos; o herói é o título sozinho no centro, com a
   foto inteira abaixo; cada seção abre com o título centrado e isolado, com o dobro do respiro vertical.
   Cada par texto/fundo passa AA (teste). */
@font-face { font-family: "Bodoni Moda"; src: url("fontes/bodoni-moda-latin-opsz-normal.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap; }

:root[data-versao="ouro"] {
  --c-fundo: #f4ede0; --c-fundo-2: #fbf7ef; --c-fundo-3: #e9dfcb; --c-linha: #c9b893;
  --c-texto: #1c1b19; --c-suave: #5f5647; --c-corpo: #34302a; --c-acento: #7d5e14; --c-botao-fundo: #1c1b19; --c-botao-texto: #f4ede0;
  --e-fundo: #0e0e0e; --e-fundo-2: #141414; --e-fundo-3: #222120; --e-linha: #45413a;
  --e-texto: #f2ece1; --e-suave: #b3a993; --e-corpo: #d6cebd; --e-acento: #d4af61; --e-botao-fundo: #f2ece1; --e-botao-texto: #0e0e0e;
  --p-escuro: #141414; --p-escuro-2: #2e2c29; --p-escuro-texto: #f2ece1; --p-escuro-suave: #b3a993; --p-escuro-linha: #45413a;
  --p-ardosia: #6b5f4e; --p-ardosia-2: #61564a; --p-ardosia-texto: #fbf7ef; --p-ardosia-suave: #ece3d3; --p-ardosia-linha: #968872;
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; --display-peso: 400; --display-tracking: -0.01em;
  --display-eixos: "opsz" 96;
  --heroi-tamanho: clamp(2.6rem, 7.6vw, 5rem); --heroi-entrelinha: 1.04;
  --raio: 0px;
}
/* nos títulos menores o eixo óptico desce, senão a Bodoni vira fio de cabelo */
:root[data-versao="ouro"] h2, :root[data-versao="ouro"] h3 { font-variation-settings: "opsz" 48; }
:root[data-versao="ouro"] :is(.foto, .cartao, .numeros-lista li, .pergunta, .botao, .selo, .chip, .tema-botao, .abre, .servicos-lista-mais) { border-radius: 0; }
:root[data-versao="ouro"] .barras li .barra { border-radius: 0; }

/* o herói: título sozinho no centro, a foto inteira abaixo */
:root[data-versao="ouro"] .heroi { padding-top: 160px; }
:root[data-versao="ouro"] .heroi-dentro { justify-items: center; text-align: center; }
:root[data-versao="ouro"] .heroi-titulo { max-width: 16ch; }
:root[data-versao="ouro"] .heroi-rodape { justify-content: center; }
:root[data-versao="ouro"] .heroi-foto { margin-top: 64px; }

/* cada seção abre com o título centrado e isolado, com o dobro do respiro */
:root[data-versao="ouro"] .secao { padding-block: 192px; }
:root[data-versao="ouro"] .painel .secao { padding-block: 176px; }
:root[data-versao="ouro"] .cabeca { justify-items: center; text-align: center; margin-inline: auto; margin-bottom: 96px; }
:root[data-versao="ouro"] .quem-grade { grid-template-columns: minmax(0, 1fr); gap: 96px; }
:root[data-versao="ouro"] .quem-texto { justify-items: center; text-align: center; max-width: 820px; margin-inline: auto; }
:root[data-versao="ouro"] .botao { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }