:root {
    /* Step 0: Body text (16px to 18px) */
    --fluid-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    /* Step 1: H6 (18px to 21px) */
    --fluid-text-sm: clamp(1.125rem, 1.05rem + 0.38vw, 1.3125rem);
    /* Step 2: H5 (20px to 24px) */
    --fluid-text-md: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    /* Step 3: H4 (24px to 30px) */
    --fluid-text-lg: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    /* Step 4: H3 (30px to 39px) */
    --fluid-text-xl: clamp(1.875rem, 1.65rem + 1.13vw, 2.4375rem);
    /* Step 5: H2 (36px to 48px) */
    --fluid-text-2xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
    /* Step 6: H1 (44px to 62px) */
    --fluid-text-3xl: clamp(2.75rem, 2.3rem + 2.25vw, 3.875rem);
}

/* Apply to standard body and Elementor widgets */
html, body, p, .elementor-widget-text-editor {
    font-size: var(--fluid-text-base);
    line-height: 1.6;
}

/* Base Headings */
h1 { font-size: var(--fluid-text-3xl); line-height: 1.1; margin-bottom: 0.5em; }
h2 { font-size: var(--fluid-text-2xl); line-height: 1.2; margin-bottom: 0.5em; }
h3 { font-size: var(--fluid-text-xl); line-height: 1.3; margin-bottom: 0.5em; }
h4 { font-size: var(--fluid-text-lg); line-height: 1.4; margin-bottom: 0.5em; }
h5 { font-size: var(--fluid-text-md); line-height: 1.4; margin-bottom: 0.5em; }
h6 { font-size: var(--fluid-text-sm); line-height: 1.5; margin-bottom: 0.5em; }

/* Apply to Elementor Headings specifically to override defaults */
.elementor-heading-title {
    line-height: 1.2;
}
h1.elementor-heading-title { font-size: var(--fluid-text-3xl); }
h2.elementor-heading-title { font-size: var(--fluid-text-2xl); }
h3.elementor-heading-title { font-size: var(--fluid-text-xl); }
h4.elementor-heading-title { font-size: var(--fluid-text-lg); }
h5.elementor-heading-title { font-size: var(--fluid-text-md); }
h6.elementor-heading-title { font-size: var(--fluid-text-sm); }