/* ==========================================================================
   Jooy Atlas — tokens do sistema visual
   Fonte: orientacao-design.md §1 (paleta e tipografia) e §2 (grid e espaçamento).
   Não inventar valor novo aqui sem atualizar o documento de design.
   ========================================================================== */

:root {

  /* ----- Cores da marca (manual) ----------------------------------------- */
  --navy:        #071C31;   /* cor institucional: header, rodapé, faixas de dado */
  --white:       #FFFFFF;
  --gold:        #D9A32F;   /* acento — forma gráfica, NUNCA texto sobre branco */
  --silver:      #C6C6C6;   /* metal — traço, borda, texto secundário sobre navy */

  /* ----- Gradientes (o manual entrega gold e prata como gradiente) -------- */
  --gold-grad:   linear-gradient(180deg, #E7B345, #C8901E);
  --silver-grad: linear-gradient(180deg, #E6E6E6, #B6B6B6);

  /* ----- Tokens derivados para a web ------------------------------------- */
  --navy-900:    #04121F;   /* rodapé e overlay de imagem */
  --navy-700:    #0E2C48;   /* card sobre navy, hover, borda interna */
  --gold-text:   #8F6510;   /* o único dourado legível sobre branco (5,2:1) */
  --gray-100:    #F4F6F8;   /* seção alternada, zebra de tabela */
  --gray-500:    #5B6B7A;   /* texto secundário sobre branco */
  --ink:         #101820;   /* corpo de texto sobre branco */

  /* Derivados de apoio (transparências dos tokens acima) */
  --navy-a08:    rgba(7, 28, 49, .08);
  --navy-a16:    rgba(7, 28, 49, .16);
  --white-a10:   rgba(255, 255, 255, .10);
  --white-a16:   rgba(255, 255, 255, .16);
  --white-a70:   rgba(255, 255, 255, .70);

  /* WhatsApp — cor do canal, fora do sistema da marca. Só no botão flutuante. */
  --whatsapp:    #25D366;

  /* Água — cor funcional dos cortes técnicos. Não é cor de marca: existe para
     que a lâmina d'água seja lida como água num desenho de engenharia. */
  --agua:        #2F7EBF;
  --agua-clara:  #6BA9D8;
  --incendio:    #C0392B;

  /* ----- Tipografia ------------------------------------------------------ */
  /* Display = fonte do wordmark. Michroma é a substituta livre da Ethnocentric
     enquanto a licença webfont não for comprada (orientacao-design.md §1.3). */
  --font-display: "Michroma", "Ethnocentric", "Arial Narrow", sans-serif;
  --font-text:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* O guia pede clamp(2rem, 5vw, 3.75rem) no H1. O mínimo de 2rem foi calibrado
     para uma fonte de largura normal: em Michroma, "RESERVATÓRIOS" a 32 px mede
     377 px e não cabe nos 350 px úteis de uma tela de 390 px — a palavra era
     partida por hífen no meio. Mínimo em 1.5rem e ganho por vw mais acentuado:
     o máximo de 3.75rem no desktop é exatamente o do guia. */
  --fs-h1:        clamp(1.5rem, 6.4vw, 3.75rem);
  --fs-h2:        clamp(1.5rem, 3.6vw, 2.5rem);
  --fs-h3:        1.375rem;
  --fs-h4:        1.125rem;
  --fs-body:      1.0625rem;
  --fs-small:     0.9375rem;
  --fs-overline:  0.75rem;
  --fs-numero:    clamp(2.5rem, 6vw, 4.5rem);

  /* O documento de design pede 1.05 / 1.15. Em caixa-alta e português, o acento
     de Á/Ó/Ê colide com a linha de cima nesses valores — subimos o mínimo que
     resolve a colisão e mantém o aspecto compacto da titulação. */
  --lh-h1:        1.08;
  --lh-h2:        1.18;
  --lh-h3:        1.3;
  --lh-body:      1.7;
  --lh-small:     1.6;

  --tracking-display:  .02em;
  --tracking-overline: .12em;

  /* Largura máxima de linha no corpo de texto — 72 caracteres (§1.3) */
  --medida:       72ch;

  /* ----- Grid e espaçamento (§2) ----------------------------------------- */
  /* Uma goteira só: seção e cabeçalho começam e terminam na mesma vertical.
     A medida de leitura NÃO é o container — quem limita a linha de texto é
     .medida (72ch), .medida-centro (62ch) e .conteudo. */
  --largura-conteudo: 1440px;
  --margem-lateral:   40px;
  --gutter:           24px;
  --secao-y:          96px;
  --titulo-gap:       32px;

  /* Escala base 8 */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;
  --e-9: 96px;  --e-10: 128px;

  /* ----- Forma ----------------------------------------------------------- */
  --raio:        8px;    /* card, input, botão */
  --raio-tabela: 4px;
  --arco:        240px 240px 12px 12px;   /* motivo do arco — §1.5, máx. 2 por página */
  --sombra:      0 2px 12px rgba(7, 28, 49, .08);   /* a única sombra do projeto */

  /* ----- Movimento (padrão Jooy) ----------------------------------------- */
  --dur-rapida: 160ms;
  --dur-media:  280ms;
  --dur-lenta:  520ms;
  --ease:       cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 1024px) {
  :root {
    --margem-lateral: 32px;
    --gutter:         20px;
    --secao-y:        72px;
    --titulo-gap:     28px;
  }
}

@media (max-width: 640px) {
  :root {
    --margem-lateral: 20px;
    --gutter:         16px;
    --secao-y:        56px;
    --titulo-gap:     24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 0ms; --dur-media: 0ms; --dur-lenta: 0ms; }
}