/* ==========================================================================
   Atlas Lab · tokens de marca · paleta clara (repaginada 29/09/2026)
   Fonte única de cor, tipografia, raio e sombra do site atlaslab.dev.br.
   Versão anterior (tema escuro azul-noite + dourado):
   _versoes-anteriores/atlas-tokens.css.bak-2026-09-29

   Regras que esta paleta garante (conferidas por scripts/checar_contraste.py):
   · todo texto sobre fundo tem razão WCAG >= 4.5 (contraste por luminância);
   · âmbar é SÓ ação (botão, CTA); nunca texto fino sobre fundo claro;
   · informação nunca só por cor: link sempre sublinhado, estado com ícone
     e com luminância diferente (sucesso escuro, aviso claro).
   Todas as cores de texto e fundo ficam em hex puro para o script conseguir
   ler e calcular.

   Fontes (Google Fonts), carregar no <head> de cada página:
   https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap
   ========================================================================== */

/* ==========================================================================
   Fontes de reserva com métricas ajustadas (rodada 2, 29/09/2026)
   Motivo: a Inter e a Plus Jakarta Sans chegam depois do primeiro desenho
   (display=swap). Sem ajuste, o texto aparece em Arial, que tem largura e
   altura diferentes, e a página pula quando a fonte real entra (CLS 0,16
   medido na sessao.html, causa "Web font loaded" no Lighthouse).
   Estas famílias usam a Arial do sistema, redimensionada para ocupar o
   mesmo espaço da fonte real. Mesma técnica do next/font e do fontaine.

   De onde vêm os valores (calculados em 29/09/2026 com fontTools, a partir
   dos arquivos que o Google Fonts serve hoje, instanciados no peso usado):
   · Inter v20 (latin, UPM 2048): hhea ascender 1984, descender -494, lineGap 0.
   · Plus Jakarta Sans v12 (latin, UPM 1000): hhea ascender 1038,
     descender -222, lineGap 0.
   · Arial e Arial Bold do macOS (UPM 2048).
   · size-adjust = largura média da fonte real ÷ largura média da Arial,
     medida sobre o texto visível da sessao.html (português real do site).
     ascent/descent/line-gap-override = métrica da fonte ÷ UPM ÷ size-adjust.
   · Conferência externa: next.js 16.3.1, arquivo
     dist/server/capsize-font-metrics.json (métricas do Capsize) com a
     fórmula de dist/server/font-utils.js, que mede a largura média pela
     frequência de letras do inglês. Resultado dele sobre Arial:
       Inter 400: size-adjust 107,12%, ascent 90,44%, descent 22,52%
       Inter 600: 101,53%, 95,42%, 23,76% (sobre Arial Bold)
       Plus Jakarta Sans 500: 106,33%, 97,62%, 20,88%
       Plus Jakarta Sans 600: 99,80%, 104,01%, 22,25% (sobre Arial Bold)
       Plus Jakarta Sans 700: 100,84%, 102,94%, 22,02% (sobre Arial Bold)
     Ascender e descender do Capsize batem com os dos arquivos acima. A
     largura difere de 0,5% a 1,4% porque aqui a média é do português do
     site, e não do inglês; ficamos com o valor em português.
   Negrito (600 e 700) usa Arial Bold, porque a largura muda com o peso.
   Arimo e Liberation Sans têm as mesmas métricas da Arial (Linux, Android
   com essas fontes); Helvetica fica por último, próxima o bastante.
   ========================================================================== */
@font-face {
  font-family: "Inter Reserva";
  font-style: normal;
  font-weight: 100 500;
  src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 105.89%;
  ascent-override: 91.48%;
  descent-override: 22.78%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Reserva";
  font-style: normal;
  font-weight: 600 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Liberation Sans Bold"), local("Helvetica Bold");
  size-adjust: 100.96%;
  ascent-override: 95.95%;
  descent-override: 23.89%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans Reserva";
  font-style: normal;
  font-weight: 100 500;
  src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 104.89%;
  ascent-override: 98.96%;
  descent-override: 21.16%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans Reserva";
  font-style: normal;
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Liberation Sans Bold"), local("Helvetica Bold");
  size-adjust: 99.25%;
  ascent-override: 104.58%;
  descent-override: 22.37%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans Reserva";
  font-style: normal;
  font-weight: 700 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Liberation Sans Bold"), local("Helvetica Bold");
  size-adjust: 100.11%;
  ascent-override: 103.68%;
  descent-override: 22.17%;
  line-gap-override: 0%;
}

:root {
  /* ==== Fundos ==== */
  /* Cinza-pedra quente [WILLIANS 29/09 12h20: o creme ficou claro demais]:
     tom sério e sóbrio, sem o branco que cansa; ainda leve para leitura longa. */
  --cor-fundo: #e6e0d6;
  /* Branco puro para cards: destaca o conteúdo do fundo creme com pouca
     diferença, sensação de papel limpo e organizado. */
  --cor-superficie: #f4f0e9;
  /* Creme um tom abaixo para faixas alternadas e blocos de apoio: separa
     seções sem precisar de linha nem cor forte. */
  --cor-superficie-2: #dad3c7;
  /* Petróleo profundo: faixa escura pontual (CTA final, rodapé). Azul
     esverdeado escuro transmite solidez e confiança, fecha a página com peso
     sem voltar ao azul-noite. */
  --cor-faixa: #0d2c33;
  /* Petróleo profundo um degrau acima, para cards dentro da faixa escura. */
  --cor-faixa-2: #163e46;

  /* ==== Textos ==== */
  /* Grafite esverdeado: quase preto, puxado para o petróleo para conversar
     com a marca; leitura longa sem o duro do preto puro. */
  --cor-texto: #1a2a2f;
  /* Secundário: subtítulo, descrição de card. Calmo, ainda 7:1. */
  --cor-texto-2: #3a494f;
  /* Sutil: legenda, nota, data. Menor destaque possível mantendo 4.5:1
     inclusive sobre --cor-superficie-2. */
  --cor-texto-sutil: #485559;
  /* Texto claro sobre a faixa petróleo. */
  --cor-texto-faixa: #f5f2ec;
  /* Secundário sobre a faixa petróleo (azul acinzentado claro). */
  --cor-texto-faixa-2: #b8ccd0;

  /* ==== Petróleo · confiança ==== */
  /* Azul-petróleo: cor da marca. Azul acalma e passa confiabilidade, o verde
     embutido traz equilíbrio e crescimento. Usado em títulos de destaque,
     links (sempre sublinhados), ícones e bordas ativas. 7:1 sobre o fundo,
     então pode ser texto. */
  --cor-petroleo: #0e5a66;
  /* Hover e foco de link: mais escuro, a mudança é de luminância e não só
     de matiz. */
  --cor-petroleo-hover: #0a4a54;
  /* Tint claro: fundo de selo, destaque de card recomendado, tag. */
  --cor-petroleo-tint: #d2e4e6;
  /* Link sobre a faixa escura: petróleo clarinho, 9:1. */
  --cor-link-faixa: #9fd3da;

  /* ==== Âmbar · ação ==== */
  /* Âmbar quente: energia, calor e convite à ação, sem a urgência agressiva
     do vermelho. Contraste de matiz máximo com o petróleo (complementar), o
     olho vai direto no botão. SÓ em botão e CTA, nunca como texto. */
  --cor-ambar: #f2a93b;
  /* Hover do botão: âmbar mais escuro, mudança por luminância. */
  --cor-ambar-hover: #e8962a;
  /* Texto sobre o âmbar: escuro (8:1). Branco sobre âmbar não passa. */
  --cor-texto-sobre-ambar: #1a1d20;
  /* Borda do botão âmbar sobre fundo claro: o preenchimento âmbar tem só
     1.9:1 contra o creme, a borda escura garante o contorno >= 4.5:1 (acima dos 3:1 exigidos
     para componente de interface). */
  --cor-ambar-borda: #93580b;

  /* ==== Bordas ==== */
  /* Linha fina de separação (decorativa, não carrega informação). */
  --cor-borda: #c9c0b1;
  /* Borda de campo de formulário e card em foco: >= 4.5:1 sobre o fundo. */
  --cor-borda-forte: #5f5c56;
  /* Linha sobre a faixa escura. */
  --cor-borda-faixa: #2c5058;

  /* ==== Estados (distintos por luminância + ícone) ==== */
  /* Sucesso: bloco ESCURO (verde floresta) com texto branco e ícone de
     visto. Verde = conclusão, segurança. */
  --cor-sucesso: #1d6b48;
  --cor-texto-sobre-sucesso: #ffffff;
  /* Texto de status "no ar / rodando": verde como TEXTO (não bloco). */
  --cor-status-texto: #1d6b48;
  /* Aviso: bloco CLARO (âmbar muito pálido) com texto marrom e ícone de
     exclamação. Distingue do sucesso mesmo em escala de cinza. */
  --cor-aviso-fundo: #fcefd6;
  --cor-aviso-texto: #6b3f00;

  /* ==== Tipografia ==== */
  /* Títulos: Plus Jakarta Sans, sans geométrica e amigável, peso 600.
     Substitui a serifada grande (Fraunces / Instrument Serif) que pesava.
     Corpo: Inter, feita para tela, legível em tamanho pequeno. */
  /* A família "Reserva" logo depois da real evita o salto de layout
     (ver @font-face de reserva no topo deste arquivo). */
  --fonte-titulo: "Plus Jakarta Sans", "Plus Jakarta Sans Reserva", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-corpo: "Inter", "Inter Reserva", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --peso-titulo: 600;
  --peso-corpo: 400;
  --peso-destaque: 600;

  /* Escala compacta (razão ~1.2). h1 e h2 contidos: nada de título gigante. */
  --fs-xs: 0.8125rem;   /* 13px · legenda, selo */
  --fs-sm: 0.875rem;    /* 14px · nota, rodapé */
  --fs-base: 1rem;      /* 16px · corpo */
  --fs-md: 1.125rem;    /* 18px · lead, h4 */
  --fs-lg: 1.3125rem;   /* 21px · h3 */
  --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);  /* 22 a 28px · h2 */
  --fs-2xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);  /* 28 a 40px · h1 */

  --lh-titulo: 1.2;
  --lh-corpo: 1.6;
  --ls-titulo: -0.01em;

  /* ==== Espaço (densidade compacta) ==== */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;       /* respiro máximo entre seções no desktop */
  --largura-texto: 68ch;
  --largura-pagina: 1120px;
  --gutter: 16px;       /* margem lateral mínima no celular */

  /* ==== Raio e sombra suaves ==== */
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 14px;
  --raio-pilula: 999px;
  --sombra-1: 0 1px 2px rgba(13, 44, 51, 0.06), 0 1px 3px rgba(13, 44, 51, 0.05);
  --sombra-2: 0 4px 12px rgba(13, 44, 51, 0.08), 0 1px 3px rgba(13, 44, 51, 0.06);
  --sombra-foco: 0 0 0 3px rgba(14, 90, 102, 0.35);
}

/* ==========================================================================
   Seção escura · class="escuro" [WILLIANS 29/09 12h20, alternado escuro/pedra]
   Redefine os mesmos tokens dentro da seção: botão, card, link e texto
   se ajustam sozinhos, sem CSS próprio por página. Petróleo profundo dá o
   peso e a seriedade; o âmbar do botão continua sendo o ponto de ação.
   ========================================================================== */
.escuro {
  --cor-fundo: #0d2c33;
  --cor-superficie: #143b43;
  --cor-superficie-2: #0a242a;
  --cor-texto: #f5f2ec;
  --cor-texto-2: #c9d7da;
  --cor-texto-sutil: #a6bbbf;
  --cor-petroleo: #9fd3da;
  --cor-petroleo-hover: #c4e7eb;
  --cor-petroleo-tint: #1d4a53;
  --cor-borda: #2c5058;
  --cor-borda-forte: #86a5ab;
  --cor-status-texto: #7fd3a4;   /* verde claro: 8:1 sobre o petróleo */
  --cor-ambar-borda: #f2a93b;   /* no escuro o próprio âmbar já contrasta 7:1 */
  --cor-aviso-fundo: #3a2c12;
  --cor-aviso-texto: #f6d9a3;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --sombra-2: 0 4px 12px rgba(0, 0, 0, 0.3);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}