/* CALONE Monochrome Intelligence System® — fundação
   Tokens, tipografia base, container e regras globais de movimento. */

/* Fallbacks métricos das fontes web
   ---------------------------------
   Auditoria de 02/09/2026: /inteligencia/ e /governanca/ marcavam CLS 0,213 e
   0,212 no celular — faixa "needs improvement" do Google. A causa foi isolada
   bloqueando as fontes: o CLS caía de 0,2133 para 0,0000. Não era imagem sem
   dimensão nem anúncio; era a troca de fonte aos 1132ms, que mudava a altura
   do bloco do manifesto de 466 para 429px e empurrava a página inteira.

   O primeiro palpite foi a Playfair, por ser a fonte dos títulos grandes.
   Estava errado: a fonte computada de `.inteligencia__quadro` e de
   `.inteligencia__manifesto` é a INTER, e o fallback da Playfair sozinho não
   mexeu no número. Quem reflui é o texto corrido, não o display.

   O culpado é o ascent, não a largura: medido em canvas a 100px, a Inter tem
   ascent 97 contra 91 do Arial, e a Playfair 108 contra 90 do Times. Cada
   linha nasce mais baixa e cresce quando a fonte real chega.

   A correção NÃO é preload da URL do gstatic: o Google rotaciona a versão do
   arquivo (hoje /s/inter/v20/) e um preload fixo vira 404 silencioso na
   próxima rotação — o CLS volta e ninguém percebe. Um fallback com métrica
   ajustada não depende de URL nenhuma e vale mesmo se o Google Fonts cair.

   Os overrides saem de medição em canvas contra as fontes reais. O
   `size-adjust` da Inter, não: o canvas dizia 105,91% (a Inter é 5,91% mais
   larga que a Arial na mesma caixa), e com esse valor o bloco do manifesto
   ainda nascia 3px mais alto do que terminava — 0,103 de CLS, acima do 0,1.

   O canvas mede uma linha isolada; o que decide a altura de um parágrafo é
   ONDE o texto quebra, e a quebra sofre o `letter-spacing` negativo que este
   site usa em quase todo texto de display (-.014em a -.036em). Varrendo o
   valor contra a altura real do bloco, o erro cai para 1px em qualquer coisa
   entre 101% e 103%, e volta a crescer fora disso. 102% é o meio desse platô.

   Ou seja: 102% não é a largura da fonte, é a largura DEPOIS do letter-spacing
   desta folha. Se o letter-spacing mudar muito, vale remedir. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Helvetica"), local("Arial");
  size-adjust: 102%;
  ascent-override: 91.59%;
  descent-override: 22.66%;
}

@font-face {
  font-family: "Playfair Fallback";
  src: local("Times New Roman"), local("Times");
  font-style: italic;
  size-adjust: 103.46%;
  ascent-override: 104.39%;
  descent-override: 24.16%;
}

:root {
  /* Paleta oficial — somente preto, branco e neutros */
  --calone-black: #000000;
  --calone-ink: #080808;
  --calone-charcoal: #111111;
  --calone-graphite: #1b1b1b;
  --calone-dark-gray: #2b2b2b;
  --calone-gray-700: #525252;
  --calone-gray-500: #858585;
  --calone-gray-300: #c7c7c7;
  --calone-silver: #e4e4e4;
  --calone-off-white: #f2f2ef;
  --calone-paper: #f8f8f5;
  --calone-white: #ffffff;

  /* Texto e bordas por contexto */
  --calone-on-dark-muted: rgba(255, 255, 255, 0.68);
  --calone-on-dark-border: rgba(255, 255, 255, 0.14);
  --calone-on-light-muted: rgba(0, 0, 0, 0.62);
  --calone-on-light-border: rgba(0, 0, 0, 0.12);

  /* Tipografia */
  --calone-font-sans: "Inter", "Inter Fallback", sans-serif;
  --calone-font-display: "Playfair Display", "Playfair Fallback", serif;

  /* Movimento */
  --motion-micro: 220ms;
  --motion-header: 280ms;
  --motion-standard: 420ms;
  --motion-reveal: 680ms;
  --motion-cinematic: 1080ms;
  --motion-stagger: 80ms;
  --motion-distance: 28px;
  --motion-distance-large: 44px;
  --motion-parallax-max: 18px;
  --motion-scale-max: 1.035;
  --motion-fast: var(--motion-micro);
  --motion-medium: var(--motion-standard);
  --motion-slow: var(--motion-reveal);
  --ease-calone: cubic-bezier(0.16, 1, 0.3, 1);
}

html,
/* Mesma história do margin abaixo: o box-sizing só existia no style.css, e
   sem ele um `width: 100%` com padding estoura a caixa. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  /* O reset morava só no style.css, que é folha da home. Páginas que não o
     carregam nasciam com o `margin: 8px` do navegador e ganhavam uma moldura
     branca em volta da tela inteira — aconteceu em privacidade, termos e
     contato. Aqui é o único lugar que toda página do site carrega. */
  margin: 0;
  font-family: var(--calone-font-sans);
}

/* Controles de formulário não herdam fonte do UA stylesheet (cairiam em Arial) */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Links institucionais nunca no azul padrão do navegador */
a {
  color: inherit;
}

/* Área de toque mínima (§23) */
button,
[role="button"] {
  min-height: 44px;
}

/* Fonte narrativa — apenas em palavras estratégicas de títulos.
   Playfair Display é carregada somente em itálico. */
.font-display,
.font-playfair {
  font-family: var(--calone-font-display);
  font-style: italic;
}

/* Direção de arte cinematográfica (§15): baixa saturação, alto contraste.
   Aplicado à mídia de fundo para manter o sistema predominantemente P&B. */
.media-cinematic,
.lithos-hero__base,
.lithos-hero__reveal,
.flow-hero__video,
.flow-thumb img,
.scene-capabilities-v2__video,
.hero__video {
  filter: saturate(0.35) contrast(1.08) brightness(0.9);
}

.media-monochrome {
  filter: grayscale(1) contrast(1.1);
}

.site-container {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 72px);
}

/* Foco visível — nunca remover sem substituição.

   Anel de duas camadas, não de uma. O anel branco sozinho sumia em toda
   seção clara: medido sobre o cabeçalho em fundo claro, dava 1,22:1 contra
   rgb(233,233,231), muito abaixo do mínimo de 3:1 que a WCAG 2.4.11 pede
   para indicador de foco. Como o site alterna seções claras e escuras sob um
   cabeçalho fixo, nenhuma cor única resolve — a argola escura por fora
   garante o contraste no claro, a branca no escuro. */
:focus-visible {
  outline: 2px solid var(--calone-white);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px rgba(0, 0, 0, .85);
}

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

/* Quem pede menos transparência precisa de superfície opaca, não de vidro
   mais fraco: o desfoque atrás do texto é justamente o que atrapalha. Vale
   para toda a cromagem em vidro do site — cabeçalho, cápsula da navegação,
   menu e campo do rodapé. */
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-scrolled,
  .site-header__pill,
  .site-menu,
  .site-footer__field {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header.is-scrolled { background: var(--calone-black); }
  .site-header.is-scrolled.site-header--on-light { background: var(--calone-paper); }
  .site-header__pill { background: rgba(255, 255, 255, .18); }
  .site-header--on-light .site-header__pill { background: rgba(0, 0, 0, .1); }
  .site-footer__field { background: rgba(255, 255, 255, .16); }
}

/* Contraste alto: fundo quase sólido e borda definida no lugar do vidro, e os
   textos secundários voltam à cor cheia — os tokens "muted" existem para
   hierarquia, e aqui hierarquia perde para legibilidade. */
@media (prefers-contrast: more) {
  :root {
    --calone-on-dark-muted: rgba(255, 255, 255, .92);
    --calone-on-light-muted: rgba(0, 0, 0, .88);
    --calone-on-dark-border: rgba(255, 255, 255, .5);
    --calone-on-light-border: rgba(0, 0, 0, .5);
  }

  .site-header.is-scrolled,
  .site-header__pill,
  .site-menu,
  .site-footer__field {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header.is-scrolled { background: var(--calone-black); }
  .site-header.is-scrolled.site-header--on-light { background: var(--calone-white); }

  .site-header__pill {
    background: rgba(0, 0, 0, .8);
    border-color: var(--calone-on-dark-border);
  }

  .site-header--on-light .site-header__pill {
    background: rgba(255, 255, 255, .9);
    border-color: var(--calone-on-light-border);
  }

  .site-header__link { color: var(--calone-white); }
  .site-header--on-light .site-header__link { color: var(--calone-black); }
}