/* =============================================================================
   TOKENS HOME
   Custom properties consumidas EXCLUSIVAMENTE pelas seções da home
   (hero, biosphera, biomas, catalisadores, simbioses, stats — os includes
   de template-parts/pages/home/* listados em index.php).

   Cada variável aqui foi auditada e não é usada em nenhum outro arquivo CSS
   do tema. Se algum dia uma delas passar a ser consumida fora da home,
   mova-a de volta para tokens.css (fonte única de verdade universal).

   Carregado depois de tokens.css, apenas em is_front_page() || is_home().
   ============================================================================= */

:root {
	--grid-gap-y: 2cqi;
	--grid-gap-x: 3.125%;

	--section-padding-y-sm: 3%;

	--system-font-size-fluid-text-xl: clamp(16px, 1.3cqi, 24px);
	--system-line-height-fluid-text-xl: clamp(18px, 1.4cqi, 26px);
	--system-letter-spacing-fluid-text-xl: clamp(-0.6px, -0.04cqi, 0px);

	--system-font-size-fluid-text-md: clamp(12px, 1cqi, 18px);
	--system-line-height-fluid-text-md: clamp(14px, 1.1cqi, 20px);
	--system-letter-spacing-fluid-text-md: clamp(-0.18px, -0.01cqi, 0px);

	--system-font-size-fluid-text-sm: clamp(10px, 0.7cqi, 13px);
	--system-line-height-fluid-text-sm: clamp(14px, 1cqi, 20px);
	--system-letter-spacing-fluid-text-sm: 0px;

	--system-font-size-heading-span: clamp(32px, 4.2cqi, 50px);
	--system-font-size-grid-h3: 90px;
}

@container page-root (max-width: 1500px) {
	.page-root > * {
		--grid-gap-y: 1.8cqi;
		--grid-gap-x: 2.8%;
		--section-padding-y-sm: 2.8%;
		--system-font-size-grid-h3: clamp(60px, 6cqi, 90px);
	}
}

@container page-root (max-width: 1240px) {
	.page-root > * {
		--grid-gap-y: 20px;
		--grid-gap-x: 30px;
		--section-padding-y-sm: 30px;

		--system-font-size-heading-span: clamp(28px, 3.8cqi, 40px);
		--system-font-size-grid-h3: clamp(50px, 5cqi, 80px);
		--system-font-size-fluid-text-xl: clamp(16px, 1.5cqi, 22px);
		--system-line-height-fluid-text-xl: clamp(18px, 1.7cqi, 24px);
		--system-font-size-fluid-text-md: clamp(12px, 1.1cqi, 16px);
		--system-line-height-fluid-text-md: clamp(14px, 1.3cqi, 19px);
		--system-font-size-fluid-text-sm: clamp(10px, 0.9cqi, 12px);
		--system-line-height-fluid-text-sm: clamp(14px, 1.1cqi, 18px);
	}
}

@container page-root (max-width: 1024px) {
	.page-root > * {
		--grid-gap-y: 15px;
		--grid-gap-x: 25px;
		--section-padding-y-sm: 25px;

		--system-font-size-heading-span: clamp(24px, 3.5cqi, 36px);
		--system-font-size-grid-h3: clamp(40px, 4cqi, 60px);
		--system-font-size-fluid-text-xl: clamp(15px, 1.8cqi, 20px);
		--system-line-height-fluid-text-xl: clamp(17px, 2cqi, 22px);
		--system-font-size-fluid-text-md: clamp(12px, 1.3cqi, 15px);
		--system-line-height-fluid-text-md: clamp(14px, 1.5cqi, 18px);
		--system-font-size-fluid-text-sm: clamp(10px, 1.1cqi, 12px);
		--system-line-height-fluid-text-sm: clamp(12px, 1.3cqi, 16px);
	}
}

@container page-root (max-width: 768px) {
	.page-root > * {
		--grid-gap-y: 18px;
		--grid-gap-x: 16px;
		--section-padding-y-sm: 12px;

		--system-font-size-heading-span: 18px;
		--system-font-size-grid-h3: clamp(30px, 3.5cqi, 50px);
		--system-font-size-fluid-text-xl: 26px;
		--system-line-height-fluid-text-xl: 28px;
		--system-font-size-fluid-text-md: 16px;
		--system-line-height-fluid-text-md: 18px;
		--system-font-size-fluid-text-sm: 12px;
	}
}