/* =====================================================================
   MESSA — tokens de espaçamento (carregar antes dos CSS de cada página)
   Escala: 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80
===================================================================== */
:root {
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Margem horizontal do conteúdo (alinhamento entre secções) */
  --page-gutter: clamp(var(--space-24), 5vw, var(--space-80));

  /* Ritmo vertical entre blocos grandes */
  --section-pad-y-xl: var(--space-80);
  --section-pad-y-lg: var(--space-64);
  --section-pad-y-md: var(--space-48);

  /* Pilhas: título ↔ subtítulo ↔ corpo ↔ CTA */
  --stack-xs: var(--space-8);
  --stack-sm: var(--space-12);
  --stack-md: var(--space-16);
  --stack-lg: var(--space-24);
  --stack-xl: var(--space-32);
  --stack-2xl: var(--space-48);

  /* Corpo expandido serviços: coluna número (52px) + gap padrão */
  --srv-body-pad-left: calc(52px + var(--space-24));

  /* Superfícies e linhas — alinhado à home (serviços / formulário) */
  --messa-canvas: #F1F1EF;
  --messa-surface: #ffffff;
  --messa-line: rgba(17, 17, 17, 0.065);
  --messa-line-strong: rgba(17, 17, 17, 0.1);
  --messa-text-body: #5a5a5a;
  --messa-text-soft: #777;
}
