/* AEVIA — composições de layout
 *
 * NÃO é gerado: escrito à mão, e só com um valor próprio (--content-max,
 * a largura máxima do conteúdo, que o design system não define). Os dois paddings
 * fluidos da página são clamp() entre tokens do design system, exatamente
 * como a nota de `spacing` do tokens.json descreve:
 *
 *   "O site usa padding lateral clamp(24px, 6vw, 96px) e padding vertical
 *    de seção clamp(80px, 10vw, 140px). Os extremos desses intervalos são
 *    tokens; os intermediários são calculados pelo viewport."
 *
 * Os extremos vêm de --space-*; só as taxas (6vw, 10vw) vivem aqui, porque
 * um clamp() não é valor válido de token no formato do design system.
 */
:root {
  /* Em tela larga o conteúdo para em 1280px e centraliza: a margem vira o
     que sobra dos dois lados. Os fundos continuam de ponta a ponta, porque
     é padding. O % se resolve pela largura do elemento (seção, nav, rodapé,
     todos de largura total) e já desconta a barra de rolagem, ao contrário
     de 100vw. Até ~1450px vale o clamp() do design system; 1280px não é
     token: o artifact não define largura máxima. */
  --content-max: 1280px;
  --pad-x:       max(clamp(var(--space-24), 6vw, var(--space-96)), calc((100% - var(--content-max)) / 2));
  --pad-section: clamp(var(--space-80), 10vw, var(--space-140));
}