/*
 * Apuração 2026 · tema
 *
 * Duas cores de candidato tiradas da flora brasileira, e não das cores dos
 * partidos: jacarandá (roxo) e ipê (ocre). O painel é de uma empresa de
 * tecnologia, não de campanha. As duas passaram no validador de paleta
 * (faixa de luminosidade, separação para daltonismo, contraste) nos dois modos.
 * Texto nunca usa a cor do candidato: número e nome ficam na tinta do texto,
 * com a marca colorida ao lado.
 */
:root {
  /* superfícies (claro) */
  --fundo: #f2f4f8;
  --superficie: #fff;
  --superficie-2: #e7ebf2;
  --linha: #c9d1de;
  --tinta: #0f1e36;
  --tinta-2: #3e4f6b;
  --tinta-3: #5c6d88;
  --foco: #1f6feb;

  /* candidatos */
  --cor-a: #6b3fd4;
  --cor-b: #a86f00;
  --cor-a-suave: rgb(107 63 212 / 14%);
  --cor-b-suave: rgb(168 111 0 / 14%);
  --cor-a-forte: rgb(107 63 212 / 34%);
  --cor-b-forte: rgb(168 111 0 / 38%);
  --nevoa: rgb(15 30 54 / 16%);

  /* tipografia */
  --fonte-numero: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --fonte-texto: "Atkinson Hyperlegible Next", "Atkinson Fallback", system-ui, sans-serif;
  --t-1: clamp(2.5rem, 1.2rem + 6.4vw, 7.5rem); /* número do placar */
  --t-2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --t-3: 1.375rem;
  --t-4: 1.125rem;
  --t-5: 1rem;
  --t-6: 0.875rem;

  /* medidas */
  --largura: 1200px;
  --margem: 16px;
  --raio: 14px;
  --raio-p: 8px;
  --cabecalho: 64px;
  --rodape-min: 200px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0f1b2d;
    --superficie: #16243a;
    --superficie-2: #1d2e48;
    --linha: #2f4362;
    --tinta: #eaf0f7;
    --tinta-2: #b9c6d8;
    --tinta-3: #8fa1ba;
    --foco: #79b0ff;
    --cor-a: #9468ec;
    --cor-b: #c08a10;
    --cor-a-suave: rgb(148 104 236 / 18%);
    --cor-b-suave: rgb(192 138 16 / 18%);
    --cor-a-forte: rgb(148 104 236 / 45%);
    --cor-b-forte: rgb(192 138 16 / 45%);
    --nevoa: rgb(234 240 247 / 18%);
  }
}

:root[data-theme="dark"] {
  --fundo: #0f1b2d;
  --superficie: #16243a;
  --superficie-2: #1d2e48;
  --linha: #2f4362;
  --tinta: #eaf0f7;
  --tinta-2: #b9c6d8;
  --tinta-3: #8fa1ba;
  --foco: #79b0ff;
  --cor-a: #9468ec;
  --cor-b: #c08a10;
  --cor-a-suave: rgb(148 104 236 / 18%);
  --cor-b-suave: rgb(192 138 16 / 18%);
  --cor-a-forte: rgb(148 104 236 / 45%);
  --cor-b-forte: rgb(192 138 16 / 45%);
  --nevoa: rgb(234 240 247 / 18%);
}

/* Archivo (Omnibus-Type, SIL OFL 1.1), variável em peso e largura: os números do
   placar, que são o LCP — por isso declarada aqui e pré-carregada no head */
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* fontes de reserva com métricas ajustadas: a troca para a fonte da página
   não mexe no layout (CLS zero) */
@font-face {
  font-family: "Archivo Fallback";
  size-adjust: 102%;
  ascent-override: 88%;
  descent-override: 22%;
  src: local("Arial");
}

@font-face {
  font-family: "Atkinson Fallback";
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  src: local("Arial");
}

@media (width >= 600px) {
  :root { --margem: 24px; }
}

@media (width >= 900px) {
  :root {
    --margem: 32px;
    --cabecalho: 72px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { text-size-adjust: 100%; }

body {
  display: none;
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-5);
  line-height: 1.55;
}

body.appear { display: block; }

header .header, footer .footer { visibility: hidden; }
header .header[data-block-status="loaded"], footer .footer[data-block-status="loaded"] { visibility: visible; }

header { height: var(--cabecalho); }
footer { min-height: var(--rodape-min); }

h1, h2, h3, h4 {
  font-family: var(--fonte-numero);
  font-stretch: 100%;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--t-2); font-weight: 760; }
h2 { font-size: var(--t-3); font-weight: 720; }
h3 { font-size: var(--t-4); font-weight: 700; }

p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }

main { display: block; }

main > .section {
  padding: 32px var(--margem);
}

main > .section > div {
  max-width: var(--largura);
  margin: 0 auto;
}

@media (width >= 900px) {
  main > .section { padding: 48px var(--margem); }
}

main > .section:first-of-type { padding-top: 20px; }

/* seção de leitura (metodologia): coluna estreita */
main > .section.leitura > div { max-width: 72ch; }

/* números sempre em algarismos de mesma largura: o placar não dança ao atualizar */
.num {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums lining-nums;
}

.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- perfil de acessibilidade (atributos postos na raiz pelo painel) ---- */
html[data-font-size="85"] { font-size: 85%; }
html[data-font-size="92"] { font-size: 92%; }
html[data-font-size="110"] { font-size: 110%; }
html[data-font-size="120"] { font-size: 120%; }
html[data-highlight-links] main a { background: #ff0; color: #000; text-decoration: underline 2px; }

html[data-a11y-reduce-motion] *, html[data-a11y-reduce-motion] *::before, html[data-a11y-reduce-motion] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}