/* © 2026 iPrime | CssThemeTokensFluid.css */

:root {

    /* === FONT SIZE FLUID (CONTAINER) === */
    --prime-font-size-fluid-caption: clamp(0.6875rem, 0.9cqi + 0.5rem, 0.875rem);  /* 11px → 14px */
    --prime-font-size-fluid-body: clamp(0.875rem, 1.1cqi + 0.6rem, 1.25rem);       /* 14px → 20px */
    --prime-font-size-fluid-title: clamp(0.75rem, 2.8cqi + 0.25rem, 2.375rem);     /* 12px → 38px */
    --prime-font-size-fluid-heading: clamp(1.125rem, 3.2cqi + 0.25rem, 3rem);      /* 18px → 48px */
    --prime-font-size-fluid-display: clamp(1.5rem, 4.2cqi + 0.25rem, 5rem);        /* 24px → 80px */


    /* === SPACE FLUID (CONTAINER) === */
    --prime-space-fluid-gap: clamp(0.5rem, 1.1cqi + 0.25rem, 1.5rem);               /* 8px → 24px */
    --prime-padding-fluid-pad: clamp(0.625rem, 1.4cqi + 0.25rem, 2.5rem);           /* 10px → 40px */
    --prime-border-radius-fluid: clamp(0.5rem, 1.1cqi + 0.25rem, 1.5rem);           /* 8px → 24px */


    /* === LAYOUT FLUID (VIEWPORT) === */
    --prime-container-fluid-narrow: clamp(320px, 86vw, 720px);                /* 320px → 720px */
    --prime-container-fluid: clamp(320px, 92vw, 1200px);                      /* 320px → 1200px */
    --prime-container-fluid-wide: clamp(320px, 96vw, 1600px);                 /* 320px → 1600px */


    /* === LEGACY FLUID (token-*) === */
    --prime-space-fluid-4-8: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);          /* 4px → 8px */
    --prime-space-fluid-16-24: clamp(1rem, 0.8rem + 1vw, 1.5rem);             /* 16px → 24px */
    --prime-padding-fluid-20-40: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);        /* 20px → 40px */
    --prime-padding-fluid-24-40: clamp(1.5rem, 1.2rem + 1.3vw, 2.5rem);       /* 24px → 40px */

}