/* ============================================================
   Loop Design System — tokens oficiais (Petróleo & Ouro)
   Fonte única da verdade visual da Loop Digital.
   Dona do padrão: Olivia (ops). Ref: /opt/maia/workspace/projetos/loop-design-system.md
   Import: <link rel="stylesheet" href="/shared/loop-tokens.css">
   Valores = CSS em produção (vitrine/detail/painel), canônicos até o Leandro decidir a divergência (seção 6 da ref).
   ============================================================ */

/* ============================================================
   VOZ E LEITURA — a webfont vem COM o token (card #685, Olivia, 2026-08-31)
   Variável CSS não injeta <link>: quem só declarasse --fonte-voz teria o
   nome da família e nenhuma família baixada. O @import mora aqui para que
   importar este arquivo já entregue as duas coisas, e para que a próxima
   troca de fonte seja UMA edição neste arquivo em vez de varrer o parque.
   ESTA É A URL CANÔNICA. Página que quiser o caminho rápido (venda, tráfego
   pago) repete ESTA MESMA URL num <link> no <head>, com &amp; no lugar de &
   e os dois preconnect. URL idêntica = o navegador busca uma vez só; URL
   divergente = duas buscas e duas verdades. Ver seção 2 do design system.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root{
  /* ---- PAR TIPOGRÁFICO DA CASA ------------------------------------
     A família é TOKEN, não string solta em cada arquivo. A ausência
     destes dois tokens é a causa de 142 arquivos declararem a fonte na
     mão (medido em 31/08/2026).
     VOZ = título, número, rótulo, kicker, botão, nome. Tudo que fala
     como a marca. LEITURA = parágrafo, descrição, corpo corrido.
     A pilha do sistema fica na declaração como reserva: com display=swap
     a página pinta nela no primeiro quadro e troca quando a webfont
     chega. Se a webfont não chegar, a página continua legível e só
     perde a voz. */
  --fonte-voz:'Red Hat Display',system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --fonte-leitura:'Inter',system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  /* fundos (dark premium, quase-preto neutro) */
  --preto:#0B0F0E;          /* fundo base da página */
  --preto2:#0E1413;         /* fundo secundário / gradiente de card */
  --card:#121917;           /* superfície de card, bloco, stat */

  /* marca */
  --petroleo:#2E7D77;       /* COR DE MARCA. logo (oo=loop infinito), botão primário */
  --petroleo-claro:#3E9C95; /* hover, link, ênfase de texto, dot de kicker */

  /* acento nobre — SÓ detalhe fino, máx 1 CTA dourado por tela */
  --ouro:#C9A86B;           /* número, kicker, borda fina, CTA premium */
  --ouro-claro:#E0C690;     /* número de stat, hover do ouro */

  /* neutros / texto */
  --prata:#C7CCCB;          /* corpo secundário, "digital" do wordmark */
  --texto:#EAEFEE;          /* título / corpo principal sobre escuro */
  --texto-dim:#9AA6A4;      /* label uppercase, legenda, footer */

  /* linhas / bordas */
  --linha:rgba(201,168,107,0.16);  /* borda com leve tom de ouro (divisória nobre) */
  --linha2:rgba(255,255,255,0.06); /* borda neutra padrão de card */

  /* alerta / confidencial — terracota dessaturado, SÓ selo, risco e aviso.
     Nunca como cor decorativa ou área grande. (Olivia, 2026-07-27) */
  --alerta:#C0564C;
  --alerta-claro:#E0897E;
  --alerta-bg:rgba(192,86,76,0.12);

  /* accent local de componente (trocar por card/bloco sem quebrar o sistema) */
  --ac:var(--petroleo-claro);
  --ac2:var(--petroleo-claro);
}

/* base de página opcional: fundo dark premium com glows petróleo.
   Aplique adicionando class="loop-page" no <body>, ou copie o background. */
.loop-page{
  background:
    radial-gradient(120% 80% at 82% -8%, rgba(46,125,119,0.20), rgba(11,15,14,0) 55%),
    radial-gradient(90% 60% at 0% 102%, rgba(62,156,149,0.10), rgba(11,15,14,0) 52%),
    var(--preto);
  color:var(--texto);
  font-family:var(--fonte-leitura);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

/* iOS: evita zoom em foco de campo (regra Leandro) */
input,select,textarea{font-size:16px !important}

/* ============================================================
   ESCALA DE TIPO E ESPAÇAMENTO — card #651 (Olivia, 2026-08-28)
   Não é escala nova. É a régua que já está em produção na página de
   vendas de saúde (/maia/saude/index.html, 171 usos dos tokens abaixo),
   promovida a padrão da casa. Quem não usa token hoje está fora do
   padrão, não o contrário.
   Ver seção 2A do /opt/maia/workspace/projetos/loop-design-system.md.
   ============================================================ */
:root{
  /* RÉGUA DE TIPO — rem puro, degrau por media query.
     6 níveis. Papel de cada um na seção 2A do design system. */
  --t-1:0.75rem;      /* 12 · rótulo (voz, caixa alta) e apoio (leitura) */
  --t-2:1.0625rem;    /* 17 · CORPO. parágrafo, item de lista, botão */
  --t-3:1.25rem;      /* 20 · SUBTÍTULO. lead, linha de apoio do título */
  --t-4:1.5rem;       /* 24 · TÍTULO 3. h3, nome de card, nome de agente */
  --t-5:1.75rem;      /* 28 · TÍTULO 2. h2, título de seção */
  --t-6:2.25rem;      /* 36 · TÍTULO 1. h1, headline da página */

  /* RÉGUA DE ESPAÇO — base 8. 7 degraus, nenhum valor fora deles.
     Qual degrau serve pra quê: tabela do par na seção 2A. */
  --e-0:.25rem;       /*  4 · colagem: ícone e texto na mesma linha, dentro de pílula */
  --e-1:.5rem;        /*  8 · rótulo colado no título; linha de lista compacta */
  --e-2:1rem;         /* 16 · PARÁGRAFO PARA PARÁGRAFO. piso de respiro de texto */
  --e-3:1.5rem;       /* 24 · subtítulo para corpo; padding interno de card */
  --e-4:2rem;         /* 32 · abaixo do título de seção; corpo para bloco destacado */
  --e-5:3rem;         /* 48 · grupo para grupo dentro da mesma seção */
  --e-6:4rem;         /* 64 · acima do título de seção */

  /* ESPAÇO ABAIXO DO TÍTULO — lei do card #651.
     O espaço abaixo de um título tem que ser MAIOR que a entrelinha do texto
     que ele abre. Igual ou menor e o título lê como mais uma linha do parágrafo.
     Piso 1,0x a entrelinha, alvo da casa 1,5x. Não são degraus novos: são
     apelidos de e-4 e e-3, escolhidos pelo tamanho do texto que vem embaixo. */
  --e-titulo:var(--e-4);       /* título -> corpo em t-2 (entrelinha 1,7 ≈ 29-32px) */
  --e-titulo-mini:var(--e-3);  /* título -> apoio em t-1 (entrelinha 1,7 ≈ 20px) */

  --sec-y:4rem;       /* 64 · respiro vertical de seção (o maior de todos) */
  --pad-x:1.25rem;    /* respiro lateral do container */
  --medida:100%;      /* largura da linha de leitura. vira 52ch no desktop */
  --raio:14px;
}
@media (min-width:720px){
  :root{
    --t-2:1.125rem;   /* 18 */  --t-3:1.375rem;  /* 22 */
    --t-4:1.75rem;    /* 28 */  --t-5:2.5rem;    /* 40 */
    --t-6:3.5rem;     /* 56 */
    --e-3:1.75rem;    /* 28 */  --e-4:2.5rem;    /* 40 */
    --e-5:4rem;       /* 64 */  --e-6:6rem;      /* 96 */
    --sec-y:6rem;     /* 96 */  --pad-x:2.5rem;  --medida:52ch;
  }
}
@media (min-width:1100px){
  :root{
    --t-2:1.1875rem;  /* 19 */  --t-3:1.5rem;    /* 24 */
    --t-4:2rem;       /* 32 */  --t-5:3.25rem;   /* 52 */
    --t-6:4.25rem;    /* 68 */
    --e-5:4.5rem;     /* 72 */  --e-6:7rem;      /* 112 */
    --sec-y:8rem;     /* 128 */ --pad-x:4rem;
  }
}