/* ==========================================================================
   TOKENS — Novena Milagre do Sol (camada de CAMPANHA)
   Único lugar onde a identidade entra. Nenhum seletor de elemento aqui.
   O creme #EFEADA foi amostrado das artes fornecidas (bgMeionms / bgBioNMS),
   por isso as seções e o papel do documento nunca emendam.
   ========================================================================== */

:root {
  /* ---- cores da marca ---------------------------------------------------- */
  --c-night: #0b2452;        /* azul profundo — rodapé e selos                */
  --hero-bg: #082445;        /* fundo da dobra do hero. Escolhido para bater
                                com o rodapé da arte (#082545): a faixa fecha
                                na cor da seção, sem precisar de véu por cima */
  --c-blue: #10306b;         /* azul dos títulos e da tinta principal         */
  --c-blue-mid: #1c4a92;
  --c-sky: #8fb0d2;
  --c-paper: #efeada;        /* creme amostrado das artes                     */
  --c-paper-warm: #f5f1e6;
  --c-gold: #e9c877;
  --c-gold-deep: #b58a33;
  --c-green: #22de70;        /* verde do botão de conversão                   */
  --c-green-bright: #5cf19b;
  --c-green-deep: #0cc45c;

  /* ---- papéis ------------------------------------------------------------ */
  --paper: var(--c-paper);
  --ink: var(--c-blue);
  --ink-soft: color-mix(in srgb, var(--ink) 78%, transparent);
  --ink-mute: color-mix(in srgb, var(--ink) 58%, transparent);
  --line: color-mix(in srgb, var(--ink) 12%, transparent);

  /* tinta sobre o azul do hero */
  --ink-on-night: #ffffff;
  --ink-on-night-soft: color-mix(in srgb, #ffffff 82%, transparent);
  --ink-on-night-mute: color-mix(in srgb, #ffffff 72%, transparent);

  /* ação */
  --action: var(--c-green);
  --action-hover: var(--c-green-bright);
  --action-deep: var(--c-green-deep);
  --action-ink: #052a15;
  --action-solid: #14892c;   /* verde chapado do botão da página de obrigado */
  --focus: #ffd66b;

  /* contexto do formulário — nesta campanha ele fica sobre o azul do hero.
     Numa campanha de fundo claro, estes quatro passam a apontar para --ink*. */
  --form-hint-ink: var(--ink-on-night-mute);
  --form-status-ink: var(--ink-on-night-soft);
  --form-error-ink: #ffb3c6;
  --form-ok-ink: var(--c-green-bright);

  /* selo de data */
  --pill-bg: color-mix(in srgb, #06102a 62%, transparent);
  --pill-ink: #ffffff;
  --pill-line: rgba(255, 255, 255, 0.24);

  /* estados do formulário */
  --field-bg: #ffffff;
  --field-ink: #17243c;
  --field-place: #666f83;    /* 5,04:1 sobre branco — #7b879b dava só 3,63 */
  --field-line: color-mix(in srgb, var(--c-blue) 16%, transparent);
  --danger: #a82348;
  --danger-bg: #fff0f4;

  /* ---- tipografia -------------------------------------------------------- */
  --font: "Montserrat", "Montserrat Fallback", system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-display: clamp(2.5rem, 1.35rem + 5.75vw, 5.25rem);
  --t-h1: clamp(2.125rem, 1.875rem + 1.25vw, 3rem);
  --t-h2: clamp(1.75rem, 1.607rem + 0.714vw, 2.25rem);
  --t-h3: clamp(1.1875rem, 1.1rem + 0.38vw, 1.5rem);
  --t-lead: clamp(1.0625rem, 0.98rem + 0.45vw, 1.3125rem);
  --t-body: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);
  --t-small: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);
  --t-micro: 0.8125rem;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 800;

  --lh-title: 1.1;
  --lh-lead: 1.38;
  --lh-body: 1.62;
  --track-tight: -0.022em;
  --track-wide: 0.26em;

  /* ---- espaço ------------------------------------------------------------ */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-s: 1rem;
  --sp-m: 1.5rem;
  --sp-l: 2rem;
  --sp-xl: 3rem;
  --sp-2xl: clamp(3rem, 2rem + 5vw, 5rem);
  --sp-3xl: clamp(3.5rem, 2.4rem + 5.5vw, 6rem);

  /* metade do vão entre a dobra do Milagre e a da biografia, no desktop.
     O total entre os dois conteúdos é o dobro deste valor.                   */
  --vao-2-3: clamp(2.25rem, 1.2rem + 1.9vw, 3rem);

  /* ---- medida ------------------------------------------------------------ */
  --shell: 1200px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --measure: 46ch;
  --col: 31rem;              /* coluna de leitura ao lado da arte            */
  --col-hero: 44rem;         /* o H1 do hero cabe em uma linha a partir de 1200px */

  /* ---- forma -------------------------------------------------------------- */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-pill: 999px;

  /* ---- sombra — tingida da tinta, nunca preta ---------------------------- */
  --sh-s: 0 2px 8px color-mix(in srgb, var(--c-blue) 14%, transparent);
  --sh-m: 0 10px 28px color-mix(in srgb, var(--c-blue) 18%, transparent);
  --sh-l: 0 22px 60px color-mix(in srgb, var(--c-blue) 24%, transparent);
  --sh-action: 0 12px 30px color-mix(in srgb, var(--c-green-deep) 42%, transparent);

  /* ---- movimento --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-mid: 280ms;
  --dur-slow: 720ms;
}

/* Bump de corpo no celular: a tela encolhe, a pessoa não. */
@media (max-width: 47.99rem) {
  :root {
    --t-lead: 1.125rem;
    --t-body: 1.0625rem;
    --t-small: 1rem;
    --measure: 40ch;
  }
}