/* =============================================================================
   Design System — tokens
   =============================================================================
   Carregado antes dos bundles de página, que consomem estas variáveis.

   Cores: abordagem híbrida. Texto, bordas e fundos seguem a escala neutra do
   design system; o roxo (#142540) e o rosa (#f05162) da marca ficam nos
   acentos — botões, destaques e fundos de seção. Trocar tudo por neutro
   apagaria a identidade do site.

   A família tipográfica NÃO é definida aqui, de propósito: o site já tem a
   dele e o design system não deve mexer nisso.
   ========================================================================== */

:root {
  /* --- Cor: texto e superfícies (escala neutra) --- */
  --ds-text: #16273F;
  --ds-text-strong: #0C1826;
  --ds-text-muted: #667385;
  --ds-text-subtle: #6B7889;
  --ds-bg: #ffffff;
  --ds-bg-alt: #f6f8fa;
  --ds-border: #d7dde5;

  /* --- Cor: marca (acentos) --- */
  --ds-brand: #142540;
  --ds-accent: #f05162;
  --ds-on-brand: #ffffff;
  --ds-on-accent: #ffffff;

  /* --- Tipografia: escala --- */
  --ds-hero: 60px;
  --ds-section-title: 48px;
  --ds-h2: 32px;
  --ds-h3: 24px;
  --ds-h4: 22px;
  --ds-lead: 24px;
  --ds-body-lg: 18px;
  --ds-body: 16px;
  --ds-small: 14px;
  --ds-caption: 12px;

  /* --- Tipografia: line-height por nível --- */
  --ds-lh-hero: 1.05;
  --ds-lh-section-title: 1.1;
  --ds-lh-h2: 1.15;
  --ds-lh-h3: 1.25;
  --ds-lh-body: 1.6;

  /* --- Espaçamento: escala única --- */
  --ds-1: 4px;
  --ds-2: 8px;
  --ds-3: 12px;
  --ds-4: 16px;
  --ds-5: 24px;
  --ds-6: 32px;
  --ds-7: 48px;
  --ds-8: 64px;
  --ds-9: 80px;
  --ds-10: 96px;
  --ds-11: 120px;

  /* --- Layout --- */
  --ds-container: 1280px;
  --ds-container-pad: 24px;
  --ds-measure-wide: 752px;  /* texto de destaque */
  --ds-measure: 632px;       /* texto de leitura */

  /* --- Raio --- */
  --ds-radius-btn: 8px;
  --ds-radius: 24px;
  --ds-radius-lg: 32px;

  /* --- Seções --- */
  --ds-section-y: 80px;
  --ds-section-y-lg: 120px;
  --ds-section-y-sm: 48px;

  /* --- Grid --- */
  --ds-grid-gap: 24px;
  --ds-grid-gap-lg: 32px;
}

/* Tipografia e espaçamento de seção encolhem juntos no mobile: manter
   120px de respiro numa tela de 375px desperdiça a dobra. */
@media (max-width: 1024px) {
  :root {
    --ds-hero: 48px;
    --ds-section-title: 40px;
    --ds-section-y: 64px;
    --ds-section-y-lg: 80px;
  }
}

@media (max-width: 640px) {
  :root {
    --ds-hero: 38px;
    --ds-section-title: 32px;
    --ds-h2: 28px;
    --ds-section-y: 48px;
    --ds-section-y-lg: 64px;
    --ds-section-y-sm: 32px;
  }
}

/* =============================================================================
   Primitivas reutilizáveis
   ========================================================================== */

.ds-container {
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: var(--ds-container-pad);
}

/* Larguras de leitura: texto longo em 1280px vira parede. */
.ds-measure-wide { max-width: var(--ds-measure-wide); }
.ds-measure { max-width: var(--ds-measure); }

.ds-divider {
  border: 0;
  border-top: 1px solid var(--ds-border);
}