/* =========================================================================
   GRUPO UNEED — TOKENS ESTRUTURAIS

   Este arquivo é a GRAMÁTICA VISUAL do grupo: ritmo, escala, movimento,
   proporção. É idêntico em todas as marcas e não deve ser editado por
   projeto.

   Cor e tipografia vivem em brands/{marca}.css. Trocar de marca é trocar
   aquele arquivo — nada aqui muda.
   ====================================================================== */

:root {
	/* --- Escala tipográfica ------------------------------------------
	   Fluida, sem breakpoints. O display é deliberadamente grande: no
	   padrão do grupo o título é o elemento dominante da tela. */
	/* O mínimo do display caiu de 2,5rem para 2,125rem.
	   Em 375px de largura, 2,5rem (40px) dava cerca de 8 caracteres por
	   linha — o título da home ocupava seis linhas e empurrava os botões
	   para fora da primeira tela. */
	--fs-display: clamp(2.125rem, 1.1rem + 4.8vw, 5.25rem);
	--fs-h1:      clamp(1.875rem, 1.3rem + 2.8vw, 3.75rem);
	--fs-h2:      clamp(1.625rem, 1.2rem + 2vw, 3rem);
	--fs-h3:      clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
	--fs-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--fs-sm:      0.9375rem;
	--fs-xs:      0.8125rem;
	--fs-label:   0.6875rem;

	--lh-tight: 1.06;
	--lh-snug:  1.3;
	--lh-body:  1.65;

	--ls-tight: -0.025em;
	--ls-label: 0.16em;

	/* --- Espaçamento -------------------------------------------------- */
	--sp-1:  0.25rem;
	--sp-2:  0.5rem;
	--sp-3:  0.75rem;
	--sp-4:  1rem;
	--sp-5:  1.25rem;
	--sp-6:  1.5rem;
	--sp-8:  2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-20: 5rem;
	--sp-24: 6rem;

	/* Respiro entre seções.
	   Generoso — o padrão do grupo separa blocos por vazio, não por linha —
	   mas 11rem em cima e embaixo davam 22rem entre blocos, e a página
	   virava uma sequência de ilhas. */
	--sp-section: clamp(4rem, 2.5rem + 5vw, 7rem);

	/* --- Layout ------------------------------------------------------- */
	--container: 1180px;
	--container-texto: 720px;

	/* --- Medidas de texto ---------------------------------------------
	   Em rem, NÃO em ch.

	   `ch` é relativo à fonte do PRÓPRIO elemento. Aplicado a um container
	   que herda o corpo de texto, 30ch dá ~240px — não os ~700px que a
	   fonte do título dentro dele sugere. Foi exatamente esse o erro que
	   espremeu todos os títulos numa coluna estreita. */
	--medida-titulo:  46rem;
	--medida-titulo-largo: 56rem;
	--medida-hero:    62rem;
	--medida-apoio:   38rem;
	--gutter: 24px;
	--edge: max(var(--gutter), calc((100vw - var(--container)) / 2));

	/* --- Raio ----------------------------------------------------------
	   Zero. Canto reto é decisão de identidade, não economia: dá ao padrão
	   um registro mais firme e editorial, e é o que diferencia o desenho
	   do template genérico de SaaS.

	   Mantidos como variáveis para que a mudança seja em um lugar só, caso
	   alguma marca do grupo precise de outro tratamento. */
	--r-sm:   0;
	--r-md:   0;
	--r-lg:   0;
	--r-pill: 0;

	/* --- Movimento ---------------------------------------------------- */
	--dur-fast: 140ms;
	--dur-base: 260ms;
	--dur-slow: 620ms;
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);

	/* --- Camadas ------------------------------------------------------ */
	--z-base:    1;
	--z-sticky:  50;
	--z-header:  100;
	--z-overlay: 200;
	--z-modal:   300;
}

/* =========================================================================
   ESCALA DE BREAKPOINTS

   Quatro pontos, e só quatro. A versão anterior tinha doze valores
   diferentes — 560, 600, 620, 640, 641, 700, 720, 900, 901, 940, 1000,
   1001 — e vários quase idênticos criavam FAIXAS MORTAS: entre 701px e
   719px, por exemplo, nenhuma regra de grade do rodapé se aplicava e ele
   caía para uma coluna sem que ninguém tivesse decidido isso.

   Media query não aceita custom property, então a escala vive como
   convenção. Ao adicionar uma regra, use um destes valores:

     600px   telefone → telefone deitado
     820px   tablet em pé
     1024px  tablet deitado / notebook pequeno
     1280px  desktop

   Para `min-width`, use o valor +1 do ponto anterior quando precisar de
   um par exclusivo (ex.: max-width: 1023px / min-width: 1024px).
   ====================================================================== */

@media (max-width: 600px) {
	:root { --gutter: 16px; }
}