Apply parent window's css variables to iframe

I have a parent window and an iframe.

In the parent window's html, I have a list of CSS variables:

:root {
  --lp-font-size-heading-lg: 2.5rem;
  --lp-font-size-heading-md: 2rem;
  --lp-font-size-heading-sm: 1.5rem;
}    

but these variables are not available in the iframe, i.e. in iframe's header, I have:

font-size: var(--lp-font-size-heading-md);

but iframe cannot find the definition of --lp-font-size-heading-md

How to add the CSS variables in the iframe?