/* © 2025 iPrime | TokensFluid.css — Fluid/responsive design tokens */
/* 
   This file defines ALL fluid (responsive) design tokens using clamp().
   These tokens auto-scale between min and max values based on viewport width.
   Fixed tokens are in TokensFixed.css.
   
   Naming Convention: --token-{category}-fluid-{minPx}-{maxPx}
   Example: --token-padding-fluid-16-24 = 16px on mobile → 24px on desktop
   
   Formula: clamp(min, preferred, max)
   - min: Minimum value (mobile)
   - preferred: Scaling formula (base + viewport percentage)
   - max: Maximum value (desktop)
   
   Load Order: After TokensFixed.css, before Foundation.css
*/

:root {
    /* =========================================================================
       FLUID TYPOGRAPHY — Text sizes that auto-scale
       Use for: font-size property
       ========================================================================= */
    
    --token-text-fluid-12-14: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);         /* 12px → 14px */
    --token-text-fluid-14-16: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);            /* 14px → 16px */
    --token-text-fluid-16-18: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);             /* 16px → 18px */
    --token-text-fluid-18-20: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);            /* 18px → 20px */
    --token-text-fluid-20-24: clamp(1.25rem, 1rem + 1vw, 1.5rem);                /* 20px → 24px */
    --token-text-fluid-24-32: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);               /* 24px → 32px */
    --token-text-fluid-30-40: clamp(1.875rem, 1.5rem + 2vw, 2.5rem);             /* 30px → 40px */
    --token-text-fluid-36-48: clamp(2.25rem, 1.8rem + 2.5vw, 3rem);              /* 36px → 48px */
    --token-text-fluid-40-64: clamp(2.5rem, 2rem + 3vw, 4rem);                   /* 40px → 64px */
    --token-text-fluid-48-80: clamp(3rem, 2.5rem + 3.5vw, 5rem);                 /* 48px → 80px */
    --token-text-fluid-56-96: clamp(3.5rem, 3rem + 4vw, 6rem);                   /* 56px → 96px */
    --token-text-fluid-64-128: clamp(4rem, 3.5rem + 5vw, 8rem);                  /* 64px → 128px */
    
    /* =========================================================================
       FLUID SPACING (GAP) — For flex/grid gap property
       Use for: gap property
       ========================================================================= */
    
    --token-space-fluid-4-8: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);            /* 4px → 8px */
    --token-space-fluid-8-12: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);            /* 8px → 12px */
    --token-space-fluid-12-16: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);            /* 12px → 16px */
    --token-space-fluid-16-24: clamp(1rem, 0.8rem + 1vw, 1.5rem);                /* 16px → 24px */
    --token-space-fluid-20-32: clamp(1.25rem, 1rem + 1.25vw, 2rem);              /* 20px → 32px */
    --token-space-fluid-24-40: clamp(1.5rem, 1rem + 2vw, 2.5rem);                /* 24px → 40px */
    --token-space-fluid-28-48: clamp(1.75rem, 1.25rem + 2.25vw, 3rem);           /* 28px → 48px */
    --token-space-fluid-32-64: clamp(2rem, 1.5rem + 2.5vw, 4rem);                /* 32px → 64px */
    --token-space-fluid-40-80: clamp(2.5rem, 2rem + 3vw, 5rem);                  /* 40px → 80px */
    --token-space-fluid-48-96: clamp(3rem, 2rem + 4vw, 6rem);                    /* 48px → 96px */
    --token-space-fluid-64-128: clamp(4rem, 3rem + 5vw, 8rem);                   /* 64px → 128px */
    
    /* =========================================================================
       FLUID PADDING — Internal element spacing
       Use for: padding property
       ========================================================================= */
    
    /* Extra Small Range */
    --token-padding-fluid-2-4: clamp(0.125rem, 0.1rem + 0.125vw, 0.25rem);       /* 2px → 4px */
    --token-padding-fluid-4-6: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);         /* 4px → 6px */
    --token-padding-fluid-4-8: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);          /* 4px → 8px */
    --token-padding-fluid-6-10: clamp(0.375rem, 0.3rem + 0.3vw, 0.625rem);       /* 6px → 10px */
    --token-padding-fluid-6-12: clamp(0.375rem, 0.3rem + 0.4vw, 0.75rem);        /* 6px → 12px */
    
    /* Small Range */
    --token-padding-fluid-8-12: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);          /* 8px → 12px */
    --token-padding-fluid-8-14: clamp(0.5rem, 0.4rem + 0.5vw, 0.875rem);         /* 8px → 14px */
    --token-padding-fluid-8-16: clamp(0.5rem, 0.4rem + 0.6vw, 1rem);             /* 8px → 16px */
    --token-padding-fluid-10-14: clamp(0.625rem, 0.5rem + 0.5vw, 0.875rem);      /* 10px → 14px */
    --token-padding-fluid-10-16: clamp(0.625rem, 0.5rem + 0.6vw, 1rem);          /* 10px → 16px */
    
    /* Medium Range */
    --token-padding-fluid-12-16: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);           /* 12px → 16px */
    --token-padding-fluid-12-18: clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem);      /* 12px → 18px */
    --token-padding-fluid-12-20: clamp(0.75rem, 0.6rem + 0.8vw, 1.25rem);        /* 12px → 20px */
    --token-padding-fluid-12-24: clamp(0.75rem, 0.6rem + 1vw, 1.5rem);           /* 12px → 24px */
    --token-padding-fluid-14-20: clamp(0.875rem, 0.7rem + 0.75vw, 1.25rem);      /* 14px → 20px */
    --token-padding-fluid-14-24: clamp(0.875rem, 0.7rem + 0.9vw, 1.5rem);        /* 14px → 24px */
    --token-padding-fluid-16-20: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);          /* 16px → 20px */
    --token-padding-fluid-16-24: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);            /* 16px → 24px */
    --token-padding-fluid-16-28: clamp(1rem, 0.8rem + 1vw, 1.75rem);             /* 16px → 28px */
    --token-padding-fluid-16-32: clamp(1rem, 0.8rem + 1.2vw, 2rem);              /* 16px → 32px */
    
    /* Large Range */
    --token-padding-fluid-20-28: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);          /* 20px → 28px */
    --token-padding-fluid-20-32: clamp(1.25rem, 1rem + 1vw, 2rem);               /* 20px → 32px */
    --token-padding-fluid-20-40: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);           /* 20px → 40px */
    --token-padding-fluid-24-32: clamp(1.5rem, 1.2rem + 1vw, 2rem);              /* 24px → 32px */
    --token-padding-fluid-24-40: clamp(1.5rem, 1.2rem + 1.3vw, 2.5rem);          /* 24px → 40px */
    --token-padding-fluid-24-48: clamp(1.5rem, 1.2rem + 1.6vw, 3rem);            /* 24px → 48px */
    --token-padding-fluid-28-40: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);         /* 28px → 40px */
    --token-padding-fluid-28-48: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);           /* 28px → 48px */
    
    /* Extra Large Range */
    --token-padding-fluid-32-48: clamp(2rem, 1.6rem + 1.5vw, 3rem);              /* 32px → 48px */
    --token-padding-fluid-32-56: clamp(2rem, 1.6rem + 1.8vw, 3.5rem);            /* 32px → 56px */
    --token-padding-fluid-32-64: clamp(2rem, 1.6rem + 2vw, 4rem);                /* 32px → 64px */
    --token-padding-fluid-40-64: clamp(2.5rem, 2rem + 2vw, 4rem);                /* 40px → 64px */
    --token-padding-fluid-40-80: clamp(2.5rem, 2rem + 2.5vw, 5rem);              /* 40px → 80px */
    --token-padding-fluid-48-72: clamp(3rem, 2.4rem + 2vw, 4.5rem);              /* 48px → 72px */
    --token-padding-fluid-48-96: clamp(3rem, 2.4rem + 3vw, 6rem);                /* 48px → 96px */
    --token-padding-fluid-64-96: clamp(4rem, 3.2rem + 2.5vw, 6rem);              /* 64px → 96px */
    --token-padding-fluid-64-128: clamp(4rem, 3.2rem + 4vw, 8rem);               /* 64px → 128px */
    
    /* =========================================================================
       FLUID MARGIN — External element spacing
       Use for: margin property
       ========================================================================= */
    
    /* Extra Small Range */
    --token-margin-fluid-2-4: clamp(0.125rem, 0.1rem + 0.125vw, 0.25rem);        /* 2px → 4px */
    --token-margin-fluid-4-6: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);          /* 4px → 6px */
    --token-margin-fluid-4-8: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);           /* 4px → 8px */
    --token-margin-fluid-6-10: clamp(0.375rem, 0.3rem + 0.3vw, 0.625rem);        /* 6px → 10px */
    --token-margin-fluid-6-12: clamp(0.375rem, 0.3rem + 0.4vw, 0.75rem);         /* 6px → 12px */
    
    /* Small Range */
    --token-margin-fluid-8-12: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);           /* 8px → 12px */
    --token-margin-fluid-8-14: clamp(0.5rem, 0.4rem + 0.5vw, 0.875rem);          /* 8px → 14px */
    --token-margin-fluid-8-16: clamp(0.5rem, 0.4rem + 0.6vw, 1rem);              /* 8px → 16px */
    --token-margin-fluid-10-14: clamp(0.625rem, 0.5rem + 0.5vw, 0.875rem);       /* 10px → 14px */
    --token-margin-fluid-10-16: clamp(0.625rem, 0.5rem + 0.6vw, 1rem);           /* 10px → 16px */
    
    /* Medium Range */
    --token-margin-fluid-12-16: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);            /* 12px → 16px */
    --token-margin-fluid-12-18: clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem);       /* 12px → 18px */
    --token-margin-fluid-12-20: clamp(0.75rem, 0.6rem + 0.8vw, 1.25rem);         /* 12px → 20px */
    --token-margin-fluid-12-24: clamp(0.75rem, 0.6rem + 1vw, 1.5rem);            /* 12px → 24px */
    --token-margin-fluid-14-20: clamp(0.875rem, 0.7rem + 0.75vw, 1.25rem);       /* 14px → 20px */
    --token-margin-fluid-14-24: clamp(0.875rem, 0.7rem + 0.9vw, 1.5rem);         /* 14px → 24px */
    --token-margin-fluid-16-20: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);           /* 16px → 20px */
    --token-margin-fluid-16-24: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);             /* 16px → 24px */
    --token-margin-fluid-16-28: clamp(1rem, 0.8rem + 1vw, 1.75rem);              /* 16px → 28px */
    --token-margin-fluid-16-32: clamp(1rem, 0.8rem + 1.2vw, 2rem);               /* 16px → 32px */
    
    /* Large Range */
    --token-margin-fluid-20-28: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);           /* 20px → 28px */
    --token-margin-fluid-20-32: clamp(1.25rem, 1rem + 1vw, 2rem);                /* 20px → 32px */
    --token-margin-fluid-20-40: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);            /* 20px → 40px */
    --token-margin-fluid-24-32: clamp(1.5rem, 1.2rem + 1vw, 2rem);               /* 24px → 32px */
    --token-margin-fluid-24-40: clamp(1.5rem, 1.2rem + 1.3vw, 2.5rem);           /* 24px → 40px */
    --token-margin-fluid-24-48: clamp(1.5rem, 1.2rem + 1.6vw, 3rem);             /* 24px → 48px */
    --token-margin-fluid-28-40: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);          /* 28px → 40px */
    --token-margin-fluid-28-48: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);            /* 28px → 48px */
    
    /* Extra Large Range */
    --token-margin-fluid-32-48: clamp(2rem, 1.6rem + 1.5vw, 3rem);               /* 32px → 48px */
    --token-margin-fluid-32-56: clamp(2rem, 1.6rem + 1.8vw, 3.5rem);             /* 32px → 56px */
    --token-margin-fluid-32-64: clamp(2rem, 1.6rem + 2vw, 4rem);                 /* 32px → 64px */
    --token-margin-fluid-40-64: clamp(2.5rem, 2rem + 2vw, 4rem);                 /* 40px → 64px */
    --token-margin-fluid-40-80: clamp(2.5rem, 2rem + 2.5vw, 5rem);               /* 40px → 80px */
    --token-margin-fluid-48-72: clamp(3rem, 2.4rem + 2vw, 4.5rem);               /* 48px → 72px */
    --token-margin-fluid-48-96: clamp(3rem, 2.4rem + 3vw, 6rem);                 /* 48px → 96px */
    --token-margin-fluid-64-96: clamp(4rem, 3.2rem + 2.5vw, 6rem);               /* 64px → 96px */
    --token-margin-fluid-64-128: clamp(4rem, 3.2rem + 4vw, 8rem);                /* 64px → 128px */
    
    /* =========================================================================
       FLUID BORDER RADIUS — Corner rounding that scales
       Use for: border-radius property
       ========================================================================= */
    
    /* Small Range (subtle scaling) */
    --token-radius-fluid-2-4: clamp(0.125rem, 0.1rem + 0.1vw, 0.25rem);          /* 2px → 4px */
    --token-radius-fluid-4-6: clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);         /* 4px → 6px */
    --token-radius-fluid-4-8: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);            /* 4px → 8px */
    --token-radius-fluid-6-8: clamp(0.375rem, 0.3rem + 0.15vw, 0.5rem);          /* 6px → 8px */
    --token-radius-fluid-6-10: clamp(0.375rem, 0.3rem + 0.2vw, 0.625rem);        /* 6px → 10px */
    --token-radius-fluid-6-12: clamp(0.375rem, 0.3rem + 0.3vw, 0.75rem);         /* 6px → 12px */
    
    /* Medium Range (common for cards, buttons) */
    --token-radius-fluid-8-12: clamp(0.5rem, 0.4rem + 0.25vw, 0.75rem);          /* 8px → 12px */
    --token-radius-fluid-8-14: clamp(0.5rem, 0.4rem + 0.3vw, 0.875rem);          /* 8px → 14px */
    --token-radius-fluid-8-16: clamp(0.5rem, 0.4rem + 0.4vw, 1rem);              /* 8px → 16px */
    --token-radius-fluid-10-14: clamp(0.625rem, 0.5rem + 0.25vw, 0.875rem);      /* 10px → 14px */
    --token-radius-fluid-10-16: clamp(0.625rem, 0.5rem + 0.35vw, 1rem);          /* 10px → 16px */
    --token-radius-fluid-12-16: clamp(0.75rem, 0.6rem + 0.25vw, 1rem);           /* 12px → 16px */
    --token-radius-fluid-12-18: clamp(0.75rem, 0.6rem + 0.35vw, 1.125rem);       /* 12px → 18px */
    --token-radius-fluid-12-20: clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem);         /* 12px → 20px */
    --token-radius-fluid-12-24: clamp(0.75rem, 0.6rem + 0.6vw, 1.5rem);          /* 12px → 24px */
    
    /* Large Range (cards, modals, containers) */
    --token-radius-fluid-16-20: clamp(1rem, 0.85rem + 0.3vw, 1.25rem);           /* 16px → 20px */
    --token-radius-fluid-16-24: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);             /* 16px → 24px */
    --token-radius-fluid-16-28: clamp(1rem, 0.8rem + 0.6vw, 1.75rem);            /* 16px → 28px */
    --token-radius-fluid-16-32: clamp(1rem, 0.8rem + 0.8vw, 2rem);               /* 16px → 32px */
    --token-radius-fluid-20-28: clamp(1.25rem, 1rem + 0.5vw, 1.75rem);           /* 20px → 28px */
    --token-radius-fluid-20-32: clamp(1.25rem, 1rem + 0.6vw, 2rem);              /* 20px → 32px */
    --token-radius-fluid-24-32: clamp(1.5rem, 1.2rem + 0.5vw, 2rem);             /* 24px → 32px */
    --token-radius-fluid-24-36: clamp(1.5rem, 1.2rem + 0.7vw, 2.25rem);          /* 24px → 36px */
    --token-radius-fluid-24-40: clamp(1.5rem, 1.2rem + 0.9vw, 2.5rem);           /* 24px → 40px */
    
    /* Extra Large Range (hero sections, feature cards) */
    --token-radius-fluid-28-40: clamp(1.75rem, 1.4rem + 0.8vw, 2.5rem);          /* 28px → 40px */
    --token-radius-fluid-32-40: clamp(2rem, 1.7rem + 0.6vw, 2.5rem);             /* 32px → 40px */
    --token-radius-fluid-32-48: clamp(2rem, 1.6rem + 1vw, 3rem);                 /* 32px → 48px */
    
    /* =========================================================================
       FLUID HEIGHTS — Interactive element heights
       Use for: height, min-height properties
       ========================================================================= */
    
    /* Touch Target Heights (buttons, inputs) */
    --token-height-fluid-28-32: clamp(1.75rem, 1.6rem + 0.3vw, 2rem);            /* 28px → 32px */
    --token-height-fluid-32-36: clamp(2rem, 1.85rem + 0.3vw, 2.25rem);           /* 32px → 36px */
    --token-height-fluid-32-40: clamp(2rem, 1.8rem + 0.4vw, 2.5rem);             /* 32px → 40px */
    --token-height-fluid-36-40: clamp(2.25rem, 2.1rem + 0.3vw, 2.5rem);          /* 36px → 40px */
    --token-height-fluid-36-44: clamp(2.25rem, 2rem + 0.4vw, 2.75rem);           /* 36px → 44px */
    --token-height-fluid-36-48: clamp(2.25rem, 2rem + 0.5vw, 3rem);              /* 36px → 48px */
    --token-height-fluid-40-44: clamp(2.5rem, 2.35rem + 0.3vw, 2.75rem);         /* 40px → 44px */
    --token-height-fluid-40-48: clamp(2.5rem, 2.3rem + 0.4vw, 3rem);             /* 40px → 48px */
    --token-height-fluid-40-52: clamp(2.5rem, 2.25rem + 0.5vw, 3.25rem);         /* 40px → 52px */
    --token-height-fluid-40-56: clamp(2.5rem, 2.2rem + 0.6vw, 3.5rem);           /* 40px → 56px */
    --token-height-fluid-44-52: clamp(2.75rem, 2.55rem + 0.4vw, 3.25rem);        /* 44px → 52px */
    --token-height-fluid-44-56: clamp(2.75rem, 2.5rem + 0.5vw, 3.5rem);          /* 44px → 56px */
    --token-height-fluid-48-56: clamp(3rem, 2.8rem + 0.4vw, 3.5rem);             /* 48px → 56px */
    --token-height-fluid-48-64: clamp(3rem, 2.7rem + 0.6vw, 4rem);               /* 48px → 64px */
    
    /* Larger Element Heights (headers, cards) */
    --token-height-fluid-56-72: clamp(3.5rem, 3.2rem + 0.6vw, 4.5rem);           /* 56px → 72px */
    --token-height-fluid-64-80: clamp(4rem, 3.6rem + 0.8vw, 5rem);               /* 64px → 80px */
    --token-height-fluid-72-96: clamp(4.5rem, 4rem + 1vw, 6rem);                 /* 72px → 96px */
    --token-height-fluid-80-112: clamp(5rem, 4.4rem + 1.2vw, 7rem);              /* 80px → 112px */
    --token-height-fluid-96-128: clamp(6rem, 5.3rem + 1.4vw, 8rem);              /* 96px → 128px */
    --token-height-fluid-128-160: clamp(8rem, 7rem + 1.5vw, 10rem);              /* 128px → 160px */
    --token-height-fluid-160-200: clamp(10rem, 8.8rem + 2vw, 12.5rem);           /* 160px → 200px */
    --token-height-fluid-200-256: clamp(12.5rem, 11rem + 2.5vw, 16rem);          /* 200px → 256px */
    --token-height-fluid-240-320: clamp(15rem, 13rem + 3vw, 20rem);              /* 240px → 320px */
    --token-height-fluid-320-400: clamp(20rem, 17.5rem + 4vw, 25rem);            /* 320px → 400px */
    
    /* =========================================================================
       FLUID ICON SIZES — Icons that scale with UI
       Use for: width, height on icon elements
       ========================================================================= */
    
    /* Tiny Icons */
    --token-icon-fluid-12-14: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);         /* 12px → 14px */
    --token-icon-fluid-12-16: clamp(0.75rem, 0.65rem + 0.2vw, 1rem);             /* 12px → 16px */
    --token-icon-fluid-14-16: clamp(0.875rem, 0.8rem + 0.15vw, 1rem);            /* 14px → 16px */
    --token-icon-fluid-14-18: clamp(0.875rem, 0.8rem + 0.2vw, 1.125rem);         /* 14px → 18px */
    
    /* Small Icons */
    --token-icon-fluid-16-18: clamp(1rem, 0.93rem + 0.15vw, 1.125rem);           /* 16px → 18px */
    --token-icon-fluid-16-20: clamp(1rem, 0.9rem + 0.2vw, 1.25rem);              /* 16px → 20px */
    --token-icon-fluid-16-24: clamp(1rem, 0.85rem + 0.4vw, 1.5rem);              /* 16px → 24px */
    --token-icon-fluid-18-20: clamp(1.125rem, 1.05rem + 0.15vw, 1.25rem);        /* 18px → 20px */
    --token-icon-fluid-18-24: clamp(1.125rem, 1rem + 0.3vw, 1.5rem);             /* 18px → 24px */
    
    /* Medium Icons */
    --token-icon-fluid-20-24: clamp(1.25rem, 1.15rem + 0.2vw, 1.5rem);           /* 20px → 24px */
    --token-icon-fluid-20-28: clamp(1.25rem, 1.1rem + 0.35vw, 1.75rem);          /* 20px → 28px */
    --token-icon-fluid-24-28: clamp(1.5rem, 1.4rem + 0.2vw, 1.75rem);            /* 24px → 28px */
    --token-icon-fluid-24-32: clamp(1.5rem, 1.35rem + 0.35vw, 2rem);             /* 24px → 32px */
    --token-icon-fluid-28-32: clamp(1.75rem, 1.65rem + 0.2vw, 2rem);             /* 28px → 32px */
    --token-icon-fluid-28-36: clamp(1.75rem, 1.6rem + 0.3vw, 2.25rem);           /* 28px → 36px */
    
    /* Large Icons */
    --token-icon-fluid-32-40: clamp(2rem, 1.85rem + 0.35vw, 2.5rem);             /* 32px → 40px */
    --token-icon-fluid-32-48: clamp(2rem, 1.75rem + 0.5vw, 3rem);                /* 32px → 48px */
    --token-icon-fluid-36-48: clamp(2.25rem, 2rem + 0.5vw, 3rem);                /* 36px → 48px */
    --token-icon-fluid-40-48: clamp(2.5rem, 2.35rem + 0.3vw, 3rem);              /* 40px → 48px */
    --token-icon-fluid-40-56: clamp(2.5rem, 2.25rem + 0.5vw, 3.5rem);            /* 40px → 56px */
    
    /* Extra Large Icons (Hero, Feature) */
    --token-icon-fluid-48-56: clamp(3rem, 2.8rem + 0.4vw, 3.5rem);               /* 48px → 56px */
    --token-icon-fluid-48-64: clamp(3rem, 2.7rem + 0.6vw, 4rem);                 /* 48px → 64px */
    --token-icon-fluid-56-72: clamp(3.5rem, 3.2rem + 0.6vw, 4.5rem);             /* 56px → 72px */
    --token-icon-fluid-64-80: clamp(4rem, 3.7rem + 0.6vw, 5rem);                 /* 64px → 80px */
    --token-icon-fluid-64-96: clamp(4rem, 3.5rem + 1vw, 6rem);                   /* 64px → 96px */
    
    /* =========================================================================
       FLUID AVATAR SIZES — User avatars that scale
       Use for: width, height on avatar elements
       ========================================================================= */
    
    /* Tiny Avatars (inline mentions, lists) */
    --token-avatar-fluid-20-24: clamp(1.25rem, 1.15rem + 0.2vw, 1.5rem);         /* 20px → 24px */
    --token-avatar-fluid-24-28: clamp(1.5rem, 1.4rem + 0.2vw, 1.75rem);          /* 24px → 28px */
    --token-avatar-fluid-24-32: clamp(1.5rem, 1.35rem + 0.35vw, 2rem);           /* 24px → 32px */
    
    /* Small Avatars (comments, cards) */
    --token-avatar-fluid-28-32: clamp(1.75rem, 1.65rem + 0.2vw, 2rem);           /* 28px → 32px */
    --token-avatar-fluid-28-36: clamp(1.75rem, 1.6rem + 0.3vw, 2.25rem);         /* 28px → 36px */
    --token-avatar-fluid-32-40: clamp(2rem, 1.85rem + 0.35vw, 2.5rem);           /* 32px → 40px */
    --token-avatar-fluid-36-44: clamp(2.25rem, 2.1rem + 0.35vw, 2.75rem);        /* 36px → 44px */
    
    /* Medium Avatars (default user display) */
    --token-avatar-fluid-40-48: clamp(2.5rem, 2.35rem + 0.35vw, 3rem);           /* 40px → 48px */
    --token-avatar-fluid-40-52: clamp(2.5rem, 2.3rem + 0.45vw, 3.25rem);         /* 40px → 52px */
    --token-avatar-fluid-40-56: clamp(2.5rem, 2.25rem + 0.5vw, 3.5rem);          /* 40px → 56px */
    --token-avatar-fluid-48-56: clamp(3rem, 2.85rem + 0.35vw, 3.5rem);           /* 48px → 56px */
    --token-avatar-fluid-48-64: clamp(3rem, 2.75rem + 0.5vw, 4rem);              /* 48px → 64px */
    
    /* Large Avatars (profile headers) */
    --token-avatar-fluid-56-72: clamp(3.5rem, 3.2rem + 0.6vw, 4.5rem);           /* 56px → 72px */
    --token-avatar-fluid-64-80: clamp(4rem, 3.7rem + 0.6vw, 5rem);               /* 64px → 80px */
    --token-avatar-fluid-64-96: clamp(4rem, 3.5rem + 1vw, 6rem);                 /* 64px → 96px */
    --token-avatar-fluid-80-96: clamp(5rem, 4.7rem + 0.6vw, 6rem);               /* 80px → 96px */
    --token-avatar-fluid-80-112: clamp(5rem, 4.5rem + 1vw, 7rem);                /* 80px → 112px */
    
    /* Extra Large Avatars (hero, feature) */
    --token-avatar-fluid-96-128: clamp(6rem, 5.5rem + 1vw, 8rem);                /* 96px → 128px */
    --token-avatar-fluid-112-144: clamp(7rem, 6.3rem + 1.2vw, 9rem);             /* 112px → 144px */
    --token-avatar-fluid-128-160: clamp(8rem, 7.3rem + 1.2vw, 10rem);            /* 128px → 160px */
    --token-avatar-fluid-160-200: clamp(10rem, 9rem + 1.5vw, 12.5rem);           /* 160px → 200px */
    
    /* =========================================================================
       FLUID MAX WIDTHS — Container and content max-widths
       Use for: max-width property
       ========================================================================= */
    
    /* Narrow Content (text blocks, forms) */
    --token-max-width-fluid-280-320: clamp(17.5rem, 16rem + 3vw, 20rem);         /* 280px → 320px */
    --token-max-width-fluid-320-400: clamp(20rem, 18rem + 4vw, 25rem);           /* 320px → 400px */
    --token-max-width-fluid-360-480: clamp(22.5rem, 20rem + 5vw, 30rem);         /* 360px → 480px */
    --token-max-width-fluid-400-560: clamp(25rem, 22rem + 6vw, 35rem);           /* 400px → 560px */
    --token-max-width-fluid-480-640: clamp(30rem, 27rem + 6vw, 40rem);           /* 480px → 640px */
    
    /* Medium Content (cards, modals) */
    --token-max-width-fluid-560-720: clamp(35rem, 31rem + 8vw, 45rem);           /* 560px → 720px */
    --token-max-width-fluid-600-800: clamp(37.5rem, 33rem + 9vw, 50rem);         /* 600px → 800px */
    --token-max-width-fluid-640-900: clamp(40rem, 35rem + 10vw, 56.25rem);       /* 640px → 900px */
    --token-max-width-fluid-720-960: clamp(45rem, 40rem + 10vw, 60rem);          /* 720px → 960px */
    
    /* Wide Content (main content, dashboards) */
    --token-max-width-fluid-800-1024: clamp(50rem, 45rem + 10vw, 64rem);         /* 800px → 1024px */
    --token-max-width-fluid-960-1200: clamp(60rem, 53rem + 12vw, 75rem);         /* 960px → 1200px */
    --token-max-width-fluid-1024-1280: clamp(64rem, 57rem + 12vw, 80rem);        /* 1024px → 1280px */
    --token-max-width-fluid-1200-1440: clamp(75rem, 68rem + 12vw, 90rem);        /* 1200px → 1440px */
    
    /* Full Width (hero sections, full-bleed) */
    --token-max-width-fluid-1280-1600: clamp(80rem, 72rem + 14vw, 100rem);       /* 1280px → 1600px */
    --token-max-width-fluid-1440-1920: clamp(90rem, 80rem + 16vw, 120rem);       /* 1440px → 1920px */
    
    /* =========================================================================
       FLUID GAP/SPACING — Additional gap tokens for flex/grid
       Supplements the tokens in TokensFixed.css
       ========================================================================= */
    
    /* Extra Small Gaps */
    --token-gap-fluid-2-4: clamp(0.125rem, 0.1rem + 0.125vw, 0.25rem);           /* 2px → 4px */
    --token-gap-fluid-4-6: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);             /* 4px → 6px */
    --token-gap-fluid-6-8: clamp(0.375rem, 0.33rem + 0.15vw, 0.5rem);            /* 6px → 8px */
    --token-gap-fluid-6-10: clamp(0.375rem, 0.3rem + 0.25vw, 0.625rem);          /* 6px → 10px */
    --token-gap-fluid-6-12: clamp(0.375rem, 0.3rem + 0.35vw, 0.75rem);           /* 6px → 12px */
    
    /* Small Gaps */
    --token-gap-fluid-8-10: clamp(0.5rem, 0.45rem + 0.15vw, 0.625rem);           /* 8px → 10px */
    --token-gap-fluid-8-14: clamp(0.5rem, 0.4rem + 0.35vw, 0.875rem);            /* 8px → 14px */
    --token-gap-fluid-10-14: clamp(0.625rem, 0.55rem + 0.25vw, 0.875rem);        /* 10px → 14px */
    --token-gap-fluid-10-16: clamp(0.625rem, 0.5rem + 0.4vw, 1rem);              /* 10px → 16px */
    
    /* Medium Gaps */
    --token-gap-fluid-14-20: clamp(0.875rem, 0.75rem + 0.4vw, 1.25rem);          /* 14px → 20px */
    --token-gap-fluid-14-24: clamp(0.875rem, 0.7rem + 0.6vw, 1.5rem);            /* 14px → 24px */
    --token-gap-fluid-18-24: clamp(1.125rem, 1rem + 0.4vw, 1.5rem);              /* 18px → 24px */
    --token-gap-fluid-20-28: clamp(1.25rem, 1.1rem + 0.5vw, 1.75rem);            /* 20px → 28px */
    --token-gap-fluid-24-36: clamp(1.5rem, 1.3rem + 0.6vw, 2.25rem);             /* 24px → 36px */
    
    /* Large Gaps */
    --token-gap-fluid-28-40: clamp(1.75rem, 1.5rem + 0.7vw, 2.5rem);             /* 28px → 40px */
    --token-gap-fluid-32-40: clamp(2rem, 1.8rem + 0.5vw, 2.5rem);                /* 32px → 40px */
    --token-gap-fluid-36-48: clamp(2.25rem, 2rem + 0.6vw, 3rem);                 /* 36px → 48px */
    --token-gap-fluid-40-56: clamp(2.5rem, 2.2rem + 0.7vw, 3.5rem);              /* 40px → 56px */
    --token-gap-fluid-48-64: clamp(3rem, 2.7rem + 0.7vw, 4rem);                  /* 48px → 64px */
    --token-gap-fluid-56-80: clamp(3.5rem, 3rem + 1vw, 5rem);                    /* 56px → 80px */
    
    /* =========================================================================
       FLUID BORDER WIDTH — For scaling borders (rarely needed)
       Use sparingly - most borders stay fixed at 1-2px
       ========================================================================= */
    
    --token-border-fluid-1-2: clamp(1px, 0.5px + 0.1vw, 2px);                    /* 1px → 2px */
    --token-border-fluid-2-3: clamp(2px, 1.5px + 0.1vw, 3px);                    /* 2px → 3px */
    --token-border-fluid-2-4: clamp(2px, 1.5px + 0.15vw, 4px);                   /* 2px → 4px */
    --token-border-fluid-3-5: clamp(3px, 2px + 0.2vw, 5px);                      /* 3px → 5px */
    --token-border-fluid-4-6: clamp(4px, 3px + 0.2vw, 6px);                      /* 4px → 6px */
}

/* =============================================================================
   END OF FLUID TOKEN SYSTEM
   ============================================================================= */